[FlatList] Issues Rendering a TextInput within FlatList > ListHeaderComponent

I am trying to render a TextInput at the top of a FlatList so that the user can search / filter the list of data.

      <FlatList
        ...
        data={[...]}
        ListHeaderComponent={(): React$Element<*> => (
          <TextInput
            ...
            onChangeText={(value: string): void => this._onChangeText(value)}
            value={this.state.query}
            ...
          />
        )}
        ...
      />

Every time the value prop given to TextInput changes, the keyboard dismisses rather than staying active and allowing the user to type. It looks as though the entire TextInput component is unmounted and re-mounted, forcing this odd behavior.

I’ve used this pattern on ListView’s renderHeader with great success. Would like to see it working on FlatList as well!

[joncursi]

I’m happy to report that I was able to get this to work with a rather simple fix! Using the same example as posted in the original comment, I just rendered the ListHeaderComponent directly as a React Element instead of a render function:

      <FlatList
        ...
        data={[...]}
        ListHeaderComponent={
          <TextInput
            ...
            onChangeText={(value: string): void => this._onChangeText(value)}
            value={this.state.query}
            ...
          />
        }
        ...
      />

This enables React to properly diff the ListHeaderComponent prop across changes, keeping the original TextInput mounted and just changing the value.

[dborzouei]

just use “Arrow functions” like this sample

...

renderHeader = () => {
   return <TextInput
            ...
            onChangeText={(name): this.setState({name})}
            value={this.state.name}
            ...
          />
}

...

 <FlatList
        ...
        data={[...]}
        ListHeaderComponent={this.renderHeader()}
        ...
      />

It works for me or just rendered the ListHeaderComponent directly as a React Element instead of a render function