How to show two different FlatList on one page in react native-CodePudding

I have to show two different FlatList one has only single column and another has two columns on same screen and I want to show it in a manner once first list data has completed only then it will show the next list at the bottom of that.

I have tried but first list is capturing half screen and second is capturing the another half. I want to resolve that.

Image reference for layout : https://prnt.sc/z1lEI29sYqhN

List 1:

 <FlatList
    data={topics}
    renderItem={({item, index}) => (
 )}
    numColumns={1}
    keyExtractor={(item, index) => index.toString()}
    contentContainerStyle={{marginTop: height * 0.01, height: 'auto', flex: 0 }}
    showsVerticalScrollIndicator={false}
  />

List 2:

<FlatList
    data={topics}
    renderItem={({item, index}) => (
 )}
    numColumns={2}
    keyExtractor={(item, index) => index.toString()}
    contentContainerStyle={{marginTop: height * 0.01, height: 'auto', flex: 0 }}
    showsVerticalScrollIndicator={false}
  />

CodePudding user response：

MarginTop is not a good way to do this, CSS Tricks - flex-box.

CodePudding user response：

<View style={{flex:1}}>
    <FlatList1 style={{flex:8}} />
    <FlatList2 style={{flex:2}} />
</View>

This should do the trick if I understood your problem correctly