rn-masonry

Installation

npm install rn-masonry --save

A easy to use react-native component to render a masonry layout for local and remote images with support for dynamic column rendering, Custom view inside masonry.

Preview

Props

Masonry props

| Props | type | description | required | default | |:----------|:--------|:---------------------------------------------------------------------------------------------------------|:----------------------------------|:------------| | data | array | array of data for the data to be rendered | required |[] | renderView | func(props) | function to render the card based on the View| required | | cols | number | number of cols want to show | required | 2 | gridPadding | number | padding inside card | | 4 | gridMargin | number | space between two card | | 4 | onScroll | func | onScroll Event | |

MasonryImage props

| Props | type | description | required | default | |:----------|:--------|:---------------------------------------------------------------------------------------------------------|:----------------------------------|:------------| | source |object | source object like image | required | | resizeMode | string| resizeMode object like image | | cover | style |object| | |

source will only work on object (required('../img.jpg') will not work)

Usage example

import {
MasonryImage,Masonry
} from 'rn-masonry';





class CustomView extends Component {

  render() {

    return (
      <View style={[this.props.style,{backgroundColor:'#ccc'
      ,borderRadius:5}]}>
        <MasonryImage
          resizeMode={"cover"}
          gridWidth={this.props.gridWidth}
          style={{borderRadius:5}}
          source={{uri:this.props.data.uri}}>
        </MasonryImage>
        <Text>{this.props.data.title}</Text>
      </View>

    )
  }
}

class MasonryExample extends Component {
  renderView(props) {
    return (
      <CustomView
        {...props}
      />
    );
  }
  render() {
    SplashScreen.hide();
    let data=[]
    var image=[
        'http://image1.jpg',
        'http://image2.jpg',
        'http://image3.jpg'
    ]
    for (var i = 0; i < 50; i++) {
      data.push({"title":"Item "+i,uri:image[parseInt(Math.random()*5)%3]})
    }
    return (
      <View style={{flex:1}}>

        <View style={{flex:1}}>
          <Masonry
            cols={3}
            renderView={this.renderView}
            gridPadding={5}
            gridMargin={5}
            data={data}
            ></Masonry>
        </View>
      </View>

    )
  }
}

export default MasonryExample ;