React-native-paper: Searchbar keyboard closes after each entry in FlatList ListHeaderComponent

[makhataibar]

Current behaviour

when the text changes (onChangeText) in Searchbar the keyboard closes

Expected behaviour

I expect the keyboard will not close after changing the text

Code sample

data={works}
keyExtractor={item => item.id.toString()}
renderItem={this._renderItem}
ListHeaderComponent={() => (
placeholder="Поиск"
onChangeText={query => {
this.setState({ firstQuery: query });
}}
value={firstQuery}
style={{ margin: 16, marginBottom: 0 }}
/>
)}
refreshing={refreshing}
onRefresh={this._onRefresh}
ListFooterComponent={() => }
/>

Screenshots (if applicable)

What have you tried

Your Environment

| software | version
| --------------------- | -------
| ios or android | android
| react-native | https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz
| react-native-paper | ^2.2.8
| node | v10.15.0
| npm or yarn | yarn 1.13.0
| expo sdk | ^32.0.0

[lukewalczak]

Hello @makhataibar , try render ListHeaderComponent directly as a React Element instead of a rendering a function.

        <FlatList
          ...
          ListHeaderComponent={
            <Searchbar
              placeholder="Поиск"
              onChangeText={query => {
                this.setState({ firstQuery: query });
              }}
              value={firstQuery}
              style={{ margin: 16, marginBottom: 0 }}
            />
          }
        />

More about that issue you can read here

[satya164]

Basically FlatList expects you to pass a React Component (as evident by the name ListHeaderComponent). When you pass an inline function like that, it creates a new component every render. When the component signatures differ (in this case the function reference), react will unmount the previous tree with the old component and mount a new tree with the new component. Due to this, all of the local state of the previous component is lost, such as focus state.

[nikbakhtenb4]

I fixed it by adding below line on my Flatlist component:
keyExtractor={item => item}
...
/>

[devendra-learngram-ai]

https://stackoverflow.com/a/61932641/10912970
this answer helped me fix the issue.

<FlatList
....
removeClippedSubviews={false}
...
/>