
Masonry Like List View For React Native
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
Credit: Source link