@react-native-seoul/masonry-list
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.1 • Public • Published

    react-native-masonry-list

    Pinterest like listview made in React Native. It just behaves like the FlatList so it is easy to use.

    Npm Version Downloads CI codecov code style: prettier LICENSE PRs Welcome supports iOS supports Android supports web runs with expo

    Notice

    If you want react-native-reanimated version, you may checkout reanimated-masonry-list. This repo is created with issue #14.

    Installation

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

    Preview

    2-columns 3-columns 4-columns

    You can use as many columns as you want. It is flexible!

    YouTube

    See how to use it

    Blog

    How it is made

    Description

    Current MasonryList extends ScrollView and can pass down its props. Indeed, this looks similar to FlatList to provide good developer experience. Look how this is used and compare to the FlatList.

    The FlatList won't offer you to draw MansonryList because when you provide numColumns bigger than 1, the native view will switch to FlatList to GridView which will render its children with identical height only.

    Our MasonryList view component is able to render all child views with all different sizes.

    Props

    innerRef?: MutableRefObject<ScrollView | undefined>;
    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;
    keyExtractor?: ((item: T | any, index: number) => string) | undefined;

    innerRef - Expose ScrollView instance with ref, example usage: ref.current.scrollTo.

    loading - Currently in loading status.

    refreshing - Currently in refreshing status.

    onRefresh - Callback when refresh has been triggered.

    onEndReached - Callback when end is reached just like the onEndReached in FlatList

    style - Style props for ScrollView which is the container view.

    data - The array of the data for the view to render in renderItem

    renderItem - Render custom view with the data passed down.

    LoadingView - Custom loading view when the view is in loading status.

    ListHeaderComponent - Header component

    ListFooterComponent - Footer component

    ListEmptyComponent - Component to render when the data is empty.

    numColumns - Number of columns you want to render. Default to 2.

    Usage

    <MasonryList
      data={filteredItems}
      keyExtractor={(item): string => item.id}
      numColumns={2}
      showsVerticalScrollIndicator={false}
      renderItem={({item}) => <CardItem />}
      refreshing={isLoadingNext}
      onRefresh={() => refetch({first: ITEM_CNT})}
      onEndReachedThreshold={0.1}
      onEndReached={() => loadNext(ITEM_CNT)}
    />

    Run Example

    1. Clone the repository.

      git clone https://github.com/hyochan/react-native-masonry-list.git
      
    2. Navigate to example project

      cd RNMasonryExample
      
    3. Install packages and run it as you do in react-native project.

    LICENSE

    FOSSA Status

    Install

    npm i @react-native-seoul/masonry-list

    DownloadsWeekly Downloads

    4,504

    Version

    1.3.1

    License

    MIT

    Unpacked Size

    14.7 kB

    Total Files

    7

    Last publish

    Collaborators

    • dooboolab