TextInput breaks Modal - please help

Expo Development Tools
1

When I put a <Text> element on a modal it works fine.

When I replace this with a <TextInput> I get an error message appear behind the Modal.

I am using expo CLI 3.18.2 and testing on an android Google Pixel 3a.

I have created the simplest possible example to illustrate the problem, any help would be much appreciated.

This works and “Hello” is displayed on the screen in a Modal:

import React from 'react';
import { View, TextInput, Text } from 'react-native';

const MyModal = () => {
  return (
    <View>
      <Text>Hello</Text>
    </View>
  );
};

export default MyModal;

This breaks:

import React from 'react';
import { View, TextInput, Text } from 'react-native';

const MyModal = () => {
  return (
    <View>
      <TextInput
        onChangeText={text => console.log(text)}
        value='Hello' // It does not matter what I put here, even if it is a state oject
      />
    </View>
  );
};

export default MyModal;

Here is the code to launch the Modal:

import React, { useState } from 'react';
import { View, Modal, TouchableOpacity, Text } from 'react-native';
import MyModal from './CreateModalBroken';


const App = () => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View>
      <Modal
        animationType="slide"
        transparent={false}
        visible={modalVisible}
        onRequestClose={() => {
          setModalVisible(!modalVisible);
        }}
      >
        <MyModal />
      </Modal>
      <TouchableOpacity onPress={() => setModalVisible(true)} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', alignSelf: 'center', marginTop: 200 }}>
        <View style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', alignSelf: 'center', margin: 10, borderRadius: 20, backgroundColor: 'blue', paddingTop: 10, paddingBottom: 10, paddingLeft: 20, paddingRight: 20 }}>
          <Text style={{ color: 'white' }}>Show Modal</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
};

export default App;

Here is a screenshot of the error (apologies for the giant size). This actually appears behind the modal and the whole application stops working, though I was able to get a screenshot of just the error without the modal in the way after refreshing a few times.

Thanks for your help.

enter image description here

Expo CLI 3.18.2 environment info:
System:
OS: macOS High Sierra 10.13.6
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.16.1 - /usr/local/bin/node
Yarn: 1.22.1 - /usr/local/bin/yarn
npm: 6.13.4 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.5791312
Xcode: 8.2.1/8C1002 - /usr/bin/xcodebuild
npmPackages:
expo: ~37.0.3 => 37.0.3
react: ~16.9.0 => 16.9.0
react-native: https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz => 0.61.4
react-navigation: ^4.3.7 => 4.3.7
npmGlobalPackages:
expo-cli: 3.18.2

2

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.