How render Two arrays of Data like Instagaram stories and Post on HomeScreen?

Question

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

Answer 1

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.