How can you make a screen with a flatlist scrollable in React Native?-CodePudding

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 is 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>
}

CodePudding user response：

If I understood it correctly that if you want to scroll TextInput with the list, you should wrap the TextInput and all inside ScrollView and instead of using FlatList, map the data to be rendered and pass it to child component like below.

<ScrollView>
    <TextInput />
{conditional check ? (
    {data1.map((item,index)=> <ChildComponent1/> //renderItem in FlatList 1
     )}):
    (<View>
        {data2.map((item,index)=> <ChildComponent2/> //renderItem in FlatList 2
     )}
    </View>)
}
<ScrollView>

CodePudding user response：

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 */ }
/>