rn-masonry v1.0.1

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

MasonryImage props

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 ;