Question 35241 in React native Question posted in
The official React Native documentation can be found here.

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

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0 
    <View style={{flex:1}}>
    <FlatList1 style={{flex:8}} />
    <FlatList2 style={{flex:2}} />
</View>

    This should do the trick if I understood your problem correctly

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search