FlatList search bar does not persist keyboard React Native

Question

I'm fetching data from an API and implementing search in a FlatList but the keyboard dismisses automatically after every key-press. I'm refering this article but implementing it in a Functional Component.

 const renderHeader = () => {
        return <SearchBar 
        placeholder="Type Here..." 
        lightTheme 
        round
        onChangeText={text => searchFilterFunction(text)}
        value={value}
        autoCorrect={false} />;
    }

 const searchFilterFunction = (text) => {
        setValue(text);
        const newData = APIData.filter(item => {
            const itemData = `${item.name.toUpperCase()}`;
            const textData = text.toUpperCase();
            return itemData.includes(textData);
        });
        setData(newData);
    }

 return (
    <FlatList
    keyExtractor={(item) => item._id}
    data={data}
    ItemSeparatorComponent={renderSeparator}
    ListHeaderComponent={renderHeader}
    ListFooterComponent={renderFooter}
    onRefresh={handleRefresh}
    refreshing={refreshing}
    renderItem={({ item }) => (
        <Card>
            <Card.Content style={{ flexDirection: "row" }}>
                <Text>{"Name: " + item.name}</Text>
                <Text>{"Status: " + (item.isaccepted ? "Accepted" : "Pending")}</Text>
                <Text>{"ID: " + item.id}</Text>
            </Card.Content>
        </Card>
    )} />
)

Thanks in advance.

Answer 1

Try rendering your ListHeaderComponent as JSX element directly, instead of using callback

<FlatList
    ListHeaderComponent={
      <View>
       <Text>I am the header</Text>
      </View>
    }
    ...props
/>