React-Native another VirtualizedList-backed container

Question

After upgrading to react-native 0.61 i get a lot of warnings like that:

VirtualizedLists should never be nested inside plain ScrollViews with the same orient         


        

Answer 1

I tried some ways to solve this, including ListHeaderComponent or ListFooterComponent, but it all didn't fit for me.

layout I wanted to achieve is like this, and I wanted to get scrolled in once.

  I'm the first view
  I'm the second view
  

First I want to say thanks to this issue and comments, which gave me bunch of ideas.

I was thinking of ListHeaderComponent places above the Flatlist, but since my Flatlist's direction was column, the header I wanted to place went on the left of the Flatlist :(

Then I had to try on VirtualizedList-backed thing. I just tried to pack all components in VirtualizedList, where renderItems gives index and there I could pass components conditionally to renderItems.

I could have worked this with Flatlist, but I haven't tried yet.
Finally it looks like this.

  {
      props.index===0 ? (1st view here) : props.index===1 ? (2nd view here) : (my flatlist)
    }}
    keyExtractor={item => item.key}
    getItemCount={2}
    getItem={ (data, index) => {
      return {
        id: Math.random().toString(12).substring(0),
      }
    }}
  />


(inside which lazyly renders↓)
  I'm the first view
  I'm the second view
    

and of course able to scroll the whole screen.