Description:
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:
