nested list components in react native

Question

I have a general question regarding nested list components in react native.

I stumble very often across this error message:

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

This error appears when I try to place a FlatList inside a ScrollView component. I know that I could fix the error easily if I would just replace the FlatList with a ScrollView and have a ScrollView inside a ScrollView but here is the problem:

I need a list component which displays a dynamic number of custom components inside it, thats why I chosen FlatList. I can take a List of Objects and for every object inside of it create a number of components inside my List Component.

Here the example I want to accomplish:

const DATA = [{id: 121212, name: "Alpha"}, {id: 23131, name: "Beta"}, {id: 3544452, name: "Gamma"}, {id: 1234512, name: "Delta"}, ...]

<View>
   <ScrollView>
      <Any other component thats not important/>
      <SPECIALLIST //Thats the component I look for, the special list that doesnt throw any error anymore
         <CustomComponent id={DATA[0][0]}/>
         <CustomComponent id={DATA[1][0]}/>
         <CustomComponent id={DATA[2][0]}/>
         ...
         ...
         //create as many CustomComponents as items inside the DATA array, so basicly a DYNAMIC amount of components
      />
      <Any other component thats not important/>
   </ScrollView>
</View>

Does anybody know what kind of ListComponent I could use as my SPECIALLIST in order to avoid the error message and create a list inside a list, that can hold a dynamic amount of any kind of component?

Does this answer your question? React-Native another VirtualizedList-backed container — Nisharg Shah
this data objects is unformatted, maybe it should be const DATA = [{id: 121212, name: "Alpha"}, {id: 23131, name: "Beta"}, {id: 3544452, name: "Gamma"}, {id: 1234512, name: "Delta"}, ...] — rodrigo agostinho
@NishargShah Im sorry but no. It didnt resolve my problem really. I mean its quite nice that now I know how to disable error messages but this did not resolve my problem. — Kubaghetto the fresh Testobun
@rodrigoagostinho you are correct sir! I will correct that quick — Kubaghetto the fresh Testobun

Kubaghetto the fresh Testobun Kubaghetto the fresh Testobun · Accepted Answer · 2020-12-27T21:18:48

I found an answer myself. I found a youtube tutorial and noticed that a guy was using the map() command combined with a flatlist, and this is the solution I was looking for and which worked for me:

const DATA = [{id: 121212, name: "Alpha"}, {id: 23131, name: "Beta"}, {id: 3544452, name: "Gamma"}, {id: 1234512, name: "Delta"}, ...]    

<View>
       <ScrollView>
          <Any other component thats not important/>
          <ScrollView>
             {DATA.map(item => (
                <CustomComponent setid={item.id} setname={item.same}/>
                    ))}
          <Any other component thats not important/>
       </ScrollView>
    </View>

With the map() command I was able to achieve my goal: creating a ScrollView(1) inside a ScrollView(2) and place into the ScrollView(1) a dynamic amount of components, depending on how long my DATA array is.

nested list components in react native

1 Answers