CODEWITHSUNDEEP
javascriptreactjsreact-nativefrontendreact-native-flatlist
darkshadowtrail
darkshadowtrail

Reputation: 348

How can you make a screen with a FlatList scrollable in React Native?

One of my screens has a FlatList, but it also features a TextInput that must remain at the top of the page. The TextInput determines which other component is rendered, if it's empty it is a category page but if it's filled with any text it's the search results. My problem right now is that I have the TextInput outside of the main FlatList, and this causes it to be at the top of the screen even when scrolling the list. I'd like for it to remain at the top of the page and not follow the scroll.

If I put the TextInput inside one of the FlatLists it causes the other to not have it due to rendering separate components. But if I place it in both FlatLists it creates a bug where after typing the first character the TextInput will exit the editing mode since a completely new component is being rendered.

Here's the structure I have right now:

<View>
    <TextInput />
<View>
{conditional check ? (
    <FlatList /> :
    (<View>
        <FlatList />
    </View>
}

Upvotes: 1

Views: 3063

Answers (1)

Mikołaj Wittbrodt
Mikołaj Wittbrodt

Reputation: 465

So how docs says FlatList has a props called ListHeaderComponent to display at the top of the list a component. https://reactnative.dev/docs/flatlist

//textinput component

const input = () => {
  <View>
    <TextInput />
  </View>
};

<FlatList
  listHeaderComponent={input}
  data={/* data or another type of array */}
  renderItem={ /* put here what you want to be scrollable */ }
/>

Upvotes: 4

Related Questions