5

Pinterest like masonry listview made in React Native

 4 years ago
source link: https://reactnativeexample.com/pinterest-like-masonry-listview-made-in-react-native/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

react-native-masonry-list

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

Installation

yarn add @react-native-seoul/masonry-list

import MasonryList from '@react-native-seoul/masonry-list';
React TSX

For deno user (Experimental)

import RNMasonryList from "https://deno.land/x/react_native_masonry_list/index.ts";

Preview

2-columns 3-columns 4-columns 116809803-f170e680-ab7a-11eb-8f16-e28a3ab0c741.gif 116815966-08bfcc00-ab9b-11eb-9b9f-5928484217d9.gif 116815949-f6459280-ab9a-11eb-8434-85f3cc834202.gif

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

YouTube

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

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;
React TSX

keyPrefix - Add prefix for keying child views. This is currently incremented by 1.

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

rednerItem - 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, 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)}
/>
React TSX

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.

GitHub

https://github.com/hyochan/react-native-masonry-list


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK