How to implement such design in react native-CodePudding

I have to implement such a design in my project. I have no idea how to implement such a design.

Are there any packages available for implementing such a design?

I am using the FlatList component for rendering list items.

I am doing the project in react-native

Working Environment:-

react-native: 0.64.1

CodePudding user response：

Try using react-native-masonry-list

<MasonryList
  data={filteredItems}
  keyExtractor={(item, index): string => index.toString()}
  numColumns={2}
  showsVerticalScrollIndicator={false}
  renderItem={({item}) => <CardItem />}
  refreshing={isLoadingNext}
  onRefresh={() => refetch({first: ITEM_CNT})}
  onEndReachedThreshold={0.1}
  onEndReached={() => loadNext(ITEM_CNT)}
/>

For custom implementation, this article would help you

CodePudding user response：

Just use flatliat like below: But be aware of the last item you should add flex:1/2


<FlatList 
  data={data}
  numColumns={2}
  keyExtractor={(item, index) => item.id }
  renderItem={(item) => <Card/>/> }
/>