react-native-infinite-masonry

React Native Masonry component with Infinite Scrolling. For a fully working example check this repo. Also detailed explanations are presented in this medium post

Getting started

$ npm install react-native-infinite-masonry --save

or with yarn:

$ yarn add react-native-infinite-masonry

Usage

For a fully working example check this repo. Also a detailed explanation is presented in this medium post

1import Masonry from 'react-native-infinite-masonry';
2
3...
4
5export default function App() {
6
7  return (
8    <SafeAreaView style={styles.container}>
9      <Masonry
10        itemsProvider={dataItemProvider}
11        renderItem={Item}
12        pageSize={10}
13      />
14    </SafeAreaView>
15 );
16}
17

Two properties has to be set for this component to work properly, namely: itemsProvider and renderItem. The former is a function that returns data information used by the later to render items inside masonry. Find below an example for those properties.

1
2function Item(dataItem, key){
3
4  return (
5    <View
6      key={key}
7      style={{
8          ...styles.card,
9          height: dataItem.height
10      }}
11      >
12      <Image
13        style={styles.img}
14        source={{uri: dataItem.image_url}}
15        />
16    </View>
17    );
18}
19
20function dataItemProvider(pageSize=10){
21
22  return [...Array(pageSize).keys()].map((i) => {
23    return {
24      image_url: `https://i.picsum.photos/id/${parseInt(Math.random() * 200)}/300/400.jpg`,
25      height: parseInt(Math.max(0.3, Math.random()) * vpWidth),
26      key:i
27      };
28    });
29
30}
31