A React Native component to create a Pinterest Masonry style list view in your app.

How to use it:

1. Install and import the component.

# Yarn
$ yarn add @react-native-seoul/masonry-list

# NPM
$ npm i @react-native-seoul/masonry-list

import MasonryList from '@react-native-seoul/masonry-list';

2. Add the Masonry List component to the app.

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

3. Available component props.

keyPrefix?: string;
loading?: boolean;
refreshing?: RefreshControlProps['refreshing'];
onRefresh?: RefreshControlProps['onRefresh'];
onEndReached?: () => void;
onEndReachedThreshold?: number;
style?: StyleProp<ScrollViewProps>;
data: T[];
renderItem: ({item: T, i: number}) => ReactElement;
LoadingView?: React.ComponentType<any> | React.ReactElement | null;
ListHeaderComponent?: React.ComponentType<any> | React.ReactElement | null;
ListEmptyComponent?: React.ComponentType<any> | React.ReactElement | null;
ListFooterComponent?: React.ComponentType<any> | React.ReactElement | null;
numColumns?: number;

Preview:

Download Details:

Author: hyochan

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/hyochan/react-native-masonry-list

License: MIT