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

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}
  />