Modal crashes while pressing on Text input

[GadirajuSanjayvarma]

Hello.I have a modal and there is a text input inside the modal.When i am pressing the textinput keyboard opens and in next second both keyboard and modal closes.

Description

Hello.I have a modal and there is a text input inside the modal.When i am pressing the textinput keyboard opens and in next second both keyboard and modal closes.

React Native version:

{ "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web", "eject": "expo eject" }, "dependencies": { "@react-native-community/masked-view": "0.1.10", "@react-navigation/drawer": "^5.9.0", "@react-navigation/native": "^5.7.3", "@react-navigation/stack": "^5.9.0", "expo": "~38.0.8", "expo-status-bar": "^1.0.2", "react": "~16.11.0", "react-dom": "~16.11.0", "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz", "react-native-elements": "^2.1.0", "react-native-gesture-handler": "~1.6.0", "react-native-reanimated": "~1.9.0", "react-native-safe-area-context": "~3.0.7", "react-native-screens": "~2.9.0", "react-native-web": "~0.11.7", "react-redux": "^7.2.1", "react-thunk": "^1.0.0", "redux": "^4.0.5", "redux-thunk": "^2.3.0" }, "devDependencies": { "@babel/core": "^7.8.6", "babel-preset-expo": "~8.1.0" }, "private": true }

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

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

{ setModalVisible(!modalVisible); }} /> > <TextInput placeholder="write your name" /> <Button onPress={() => setModalVisible(false)} title="Learn More" color="#841584" /> </Modal> </View>

Expected Results

When we press on TextInput keyboard opens and modal and keyboard closes.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[dllz]

Hey there. I know this issue is stale but I am also experiencing it, seems to only be happening on older versions of Android. If you remove focus from the text input and then click it again it will sometimes work.

[bhattanmol101]

I am also facing this issue any update on how to solve it

[bhattanmol101]

Anything about this?

[bhattanmol101]

Still getting this issue @shergin @react-native-bot

[andrei-around]

I'm also experiencing this issue. But only at some particular case for some reason.

[Rajeevdamam]

Did anyone get any solution for this? Its actually happening when we use flatlist especially for me.

[agusdac]

Any updates on this? I still get this all the time

[nairobiB]

Did anyone get any solution for this? Its actually happening when we use flatlist especially for me.

Omg same and i have no idea why

[psnehanshu]

I am facing this issue when trying to focus on a text field inside a Modal, inside a FlatList.

Interestingly it happens with only items that are initially out of the screen's scope.

Here's a gif explaining the issue. (Source)

[kristianmarkuy]

I also experiencing this issue :(

[redreceipt]

I can reproduce on RN v67

[psnehanshu]

The solution is to not render the modal inside FlatList, instead render it outside of the list.

[redreceipt]

I also found today that if you don't have a big list and performance isn't an issue, you can use the removeClippedSubviews prop, the keyboard stays on screen and everything works as expected.

<FlatList removeClippedSubviews={false}>
  <Modal>
    <TextInput />
  </Modal>
</FlatList>

Essentially what's happening is Android is un-rendering the Modal when the keyboard shifts the "parent" of the TextInput off screen (or something like that). iOS doesn't have this issue. Definitely still a bug that RN should fix, but this should stop the bleeding on Android.

[justbuildittech]

Did you get any solution on this ? I'm facing same issue with modal

[redreceipt]

Did you get any solution on this ? I'm facing same issue with modal

Either use the removeClippedSubviews prop I describe above or take the Modal out of the FlatList

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.

[abid211051]

I also found today that if you don't have a big list and performance isn't an issue, you can use the removeClippedSubviews prop, the keyboard stays on screen and everything works as expected.

<FlatList removeClippedSubviews={false}>
  <Modal>
    <TextInput />
  </Modal>
</FlatList>

Essentially what's happening is Android is un-rendering the Modal when the keyboard shifts the "parent" of the TextInput off screen (or something like that). iOS doesn't have this issue. Definitely still a bug that RN should fix, but this should stop the bleeding on Android.

Thanks bro, it's really work. but what is the Cost for this approch? Is this approch disable Flatlist LazyLoading feature?

[HodgertA]

I had the same issue but my Modal was inside a Component that was in a Tab View renderScene. I pulled the modal out of the TabView and just passed the ref as a prop.

[gvvpriyanka]

My modal is outside the flatlist, but when I'm pressing 'r' key rapidly , the app is getting reloaded automatically.