Performant Masonry Grid Component For React Native

Description:

A high-performance, super smooth Masonry grid similar to the FlatList.

How to use it:

1. Install and import the component.

# Yarn
$ yarn add react-native-masonry-grid
# NPM
$ npm i react-native-masonry-grid

import MasonryFlatlist from 'react-native-masonry-grid';

2. Add items to the Masonry grid.

// data 
const DATA = [
  {
    name: 'Item 1',
    url: '1.png',
    height: 136,
  },{
    name: 'Item 2',
    url: '2.png',
    height: 236,
  },{
    name: 'Item 3',
    url: '3.png',
    height: 336,
  }
  // ...
]
<MasonryFlatlist
  data={DATA}
  numColumns={3} //number of columns
  columnWrapperStyle={styles.columnWrapperStyle}
  showsVerticalScrollIndicator={false}
  style={styles.masonryFlatlist}
  renderItem={({ item, index }) => {
    return <Card data={item} height={item.height} onPress={() => {}} />;
  }}
/>

3. Available component props.

interface Props extends ScrollViewProps {
  numColumns?: number;
  loading?: boolean;
  LoadingView?: React.ReactNode | React.ReactElement | null;
  columnWrapperStyle: StyleProp<ViewStyle>;
  ListHeaderComponent?: React.ReactNode | React.ReactElement | null;
  ListEmptyComponent?: typeof React.Fragment | React.ReactElement | null;
  ListFooterComponent?: React.ReactNode | React.ReactElement | null;
  ListHeaderComponentStyle?: StyleProp<ViewStyle>;
  contentContainerStyle?: StyleProp<ViewStyle>;
  containerStyle?: StyleProp<ViewStyle>;
  onRefresh?: RefreshControlProps['onRefresh'];
  onEndReached?: () => void;
  keyExtractor?: ((item: any, index: number) => string) | undefined;
  onEndReachedThreshold?: number;
  style?: StyleProp<ViewStyle>;
  data: any[];
  renderItem: ({ item, index }: { item: any; index: number }) => ReactElement;
}