I am trying to make a social app using react native, I am working on home screen, I want to display user stories on top( horizontal scroll) and post below ( verticallt) similar like instagram, I am using different array for both, I tried to use flatlist for both the arrays, one for stories and one for post, But I want to scroll u p stories flatlist, when post flat is scrolled, I tried to put them in scrollview so both stories and post scroll up it worked somehow, but giving me warning, virtualized list cannot be render inside scrollview, Then I tried to use section list but problem is section list uses same data array, but I want yo use two Data array, How to Solve this problem? So i can make home Screen similar like instargam
Advertisement
Answer
create a Function called RenderStories
inside RenderStories
const RenderStories = () => ( <> // Write your Story Flatlist Render Code... </> )
In your Posts
flatlist write like this
<FlatList data={Posts} //This will be your Post array ListHeaderComponent={RenderStories()} // Render Stories is being called here... renderItem={({ item }) => ( <> // Write your Post Render Code... </> )} />
This will make sure your Posts and Stories scroll up together.