Skip to content
Staggered Or Masonary List View For React Native Written in pure js
Branch: master
Clone or download
Latest commit 72c879b Sep 17, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitattributes
.gitignore
LICENSE Initial commit Sep 12, 2018
README.md
index.js Update index.js Sep 16, 2018
package.json fixed package.json Sep 17, 2018
screen.gif

README.md

react-native-masonry-brick-list npm version Maintainability Test Coverage

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) }

import BrickList from 'react-native-masonry-brick-list';
import React, {Component} from 'react';
import {View, Text} from 'react-native'


type Props = {};
export default class App extends Component<Props> {
    constructor(props){
        super(props);
        this.state={
            //Just id (unique) and span (1,2,3, ...) is required
            data:[
                {id: '1', name: "Red", color: "#f44336", span: 1},
                {id: '2', name: "Pink", color: "#E91E63", span: 2},
                {id: '3', name: "Purple", color: "#9C27B0", span: 3},
                {id: '4', name: "Deep Purple", color: "#673AB7", span: 1},
                {id: '5', name: "Indigo", color: "#3F51B5", span: 1},
                {id: '6', name: "Blue", color: "#2196F3", span: 1},
                {id: '7', name: "Light Blue", color: "#03A9F4", span: 3},
                {id: '8', name: "Cyan", color: "#00BCD4", span: 2},
                {id: '9', name: "Teal", color: "#009688", span: 1},
                {id: '10', name: "Green", color: "#4CAF50", span: 1},
                {id: '11', name: "Light Green", color: "#8BC34A", span: 2},
                {id: '12', name: "Lime", color: "#CDDC39", span: 3},
                {id: '13', name: "Yellow", color: "#FFEB3B", span: 2},
                {id: '14', name: "Amber", color: "#FFC107", span: 1},
                {id: '15', name: "Orange", color: "#FF5722", span: 3},
            ],
        }
    }


    render() {
        return (
            <BrickList
            data = {this.state.data}
            renderItem={(prop)=>renderView(prop)}
            columns = {3}
            />
        );
    }
}
//RenderAnyItem
renderView=(prop)=>{
    return(
        <View key={prop.id} style={{
            margin: 2,
            borderRadius: 2,
            backgroundColor: prop.color,
            flex:1,
            alignItems:'center',
            justifyContent:'center',
        }} >
            <Text style={{color:'white'}}>{prop.name}</Text>
        </View>
    )
};

You can’t perform that action at this time.