2

TextInputs at the bottom of the screen in a FlatList automatically and immediately dismiss the keyboard on focus, making it impossible to write anything in it. The issue is reproducible easily on a blank react-native init project. I tested it in Nexus 5x simulator and real device. I reproduce the bug every time on 0.61.

Related to https://github.com/facebook/react-native/issues/13745

Anurag Chutani
  • 591
  • 1
  • 4
  • 15

2 Answers2

1

Just add one props in your FlatList as below:

<FlatList
     keyboardDismissMode={'none'}
     .....
</FlatList>

Chears.!

Prashant Jajal
  • 3,469
  • 5
  • 24
  • 38
0

Just don't give the component reference to the Flatlist footer because when we update state of the component then arrow function creates a new reference that's why TextInput loses it's focus. Just return direct View to the Flatlist footer.

<FlatList
  data={...}
  ListFooterComponent={renderYourFooter()}
/>

or

<FlatList
  data={...}
  ListFooterComponent={<View>
    <TextInput/>
  </View>}
/>