React Native TextInput setState() hides keyboard

Question

Please check on the snack link, https://snack.expo.io/@banid/textinput The TextInput on the filter view(shows when the button is pressed) hides keyboard when ever I call setState(). I call setState to update the value of TextInput. Bcause of this I can't type continuously on the TextInput. Is this a bug or am I doing something wrong?? Thank you

Answer 1

The problem is that you are creating a new (anonymous) function that renders the header of the FlatList on every update

<FlatList .... ListHeaderComponent={() => this.showHeader()} />

So a new TextInput is being created instead of updating the existing one.

Solution:

change ListHeaderComponent={() => this.showHeader()}

to ListHeaderComponent={this.showHeader} as ListHeaderComponent can be a function

https://facebook.github.io/react-native/docs/flatlist#listheadercomponent

Similar Issue: https://github.com/react-native-training/react-native-elements/issues/559