react-native-masonry-brick-list

this is a staggered List view for react native (pure Js)

Installation

$ npm install react-native-masonry-brick-list --save

Usage

just be sure that in your list id and span is specified

and use it as below

Props{data (array), renderItem (react Component), columns (int), rowHeight (int) }

1import BrickList from 'react-native-masonry-brick-list';
2import React, {Component} from 'react';
3import {View, Text} from 'react-native'
4
5
6type Props = {};
7export default class App extends Component<Props> {
8    constructor(props){
9        super(props);
10        this.state={
11            //Just id (unique) and span (1,2,3, ...) is required
12            data:[
13                {id: '1', name: "Red", color: "#f44336", span: 1},
14                {id: '2', name: "Pink", color: "#E91E63", span: 2},
15                {id: '3', name: "Purple", color: "#9C27B0", span: 3},
16                {id: '4', name: "Deep Purple", color: "#673AB7", span: 1},
17                {id: '5', name: "Indigo", color: "#3F51B5", span: 1},
18                {id: '6', name: "Blue", color: "#2196F3", span: 1},
19                {id: '7', name: "Light Blue", color: "#03A9F4", span: 3},
20                {id: '8', name: "Cyan", color: "#00BCD4", span: 2},
21                {id: '9', name: "Teal", color: "#009688", span: 1},
22                {id: '10', name: "Green", color: "#4CAF50", span: 1},
23                {id: '11', name: "Light Green", color: "#8BC34A", span: 2},
24                {id: '12', name: "Lime", color: "#CDDC39", span: 3},
25                {id: '13', name: "Yellow", color: "#FFEB3B", span: 2},
26                {id: '14', name: "Amber", color: "#FFC107", span: 1},
27                {id: '15', name: "Orange", color: "#FF5722", span: 3},
28            ],
29        }
30    }
31
32
33    render() {
34        return (
35            <BrickList
36            data = {this.state.data}
37            renderItem={(prop)=>renderView(prop)}
38            columns = {3}
39            />
40        );
41    }
42}
43//RenderAnyItem
44renderView=(prop)=>{
45    return(
46        <View key={prop.id} style={{
47            margin: 2,
48            borderRadius: 2,
49            backgroundColor: prop.color,
50            flex:1,
51            alignItems:'center',
52            justifyContent:'center',
53        }} >
54            <Text style={{color:'white'}}>{prop.name}</Text>
55        </View>
56    )
57};
58
59