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 i @react-native-seoul/masonry-list
import MasonryList from '@react-native-seoul/masonry-list';

2. Add the Masonry List component to the app.

  keyExtractor={(item, index): string => index.toString()}
  renderItem={({item}) => <CardItem />}
  onRefresh={() => refetch({first: ITEM_CNT})}
  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;


Masonry Like List View For React Native

Download Details:

Author: hyochan

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website:

License: MIT

You Might Be Interested In:

Add Comment