christopherabouabdo / react-native-photo-grid

react-native-photo-grid

React Native component that handles the complexities of building a grid of photos with a flexible number of photos per row

Install

npm install react-native-photo-grid --save

Usage

import React from 'react-native';
import PhotoGrid from 'react-native-photo-grid';
let { Image, TouchableOpacity, Text } = React;

class BestGrid extends React.Component {

  constructor() {
    super();
    this.state = { items: [] };
  }

  componentDidMount() {
    // Build an array of 60 photos
    let items = Array.apply(null, Array(60)).map((v, i) => {
      return { id: i, src: 'http://placehold.it/200x200?text='+(i+1) }
    });
    this.setState({ items });
  }

  render() {
    return(
      <PhotoGrid
        data = { this.state.items }
        itemsPerRow = { 3 }
        itemMargin = { 1 }
        renderHeader = { this.renderHeader }
        renderItem = { this.renderItem }
      />
    );
  }

  renderHeader() {
    return(
      <Text>I'm on top!</Text>
    );
  }

  renderItem(item, itemSize) {
    return(
      <TouchableOpacity
        key = { item.id }
        style = {{ width: itemSize, height: itemSize }}
        onPress = { () => {
          // Do Something
        }}>
        <Image
          resizeMode = "cover"
          style = {{ flex: 1 }}
          source = {{ uri: item.src }}
        />
      </TouchableOpacity>
    )
  }

}

export default BestGrid;

react-native-photo-grid's Issues

Layout arrangement issue

Hi,

Me and my teammates found a small issues when using your library. Generally, it works perfect. But when the number of photos in each row is less than the required max number per row. The photos will be distributed evenly and leave some blank gap between photos. This Issue is caused by the " "justifyContent: 'space-between' " style u defined for the row in PhotoGrid.js.

It could be corrected by changing the style to "justifyContent: 'flex-start'" and then photos could be put from left to right without any gap.

OnPress error

OnPress adding function and get promise error, consoled out "this" and all states are gone not available.

renderItem(item, itemSize) { return ( <TouchableOpacity key={ item.user_id } style={{ width: itemSize, height: itemSize }} onPress={()=>{console.log('onPress',this)}} > <Image resizeMode="cover" style={{ flex: 1 }} source={{ uri:'/commune/profile_images/'+item.pic}} /> </TouchableOpacity> ) }

renderItem get index of element

I will be nice to get the index of element in renderItem in case where you get array of data without unique id for each element

 <PhotoGrid
        data={this.state.datas}
        itemsPerRow={itemsPerRow}
        itemMargin={1}
        renderHeader={this.renderOptionBar}
        renderItem={this.renderGridItem}
      />

   renderGridItem = (item, itemSize,index) => {
        return <View key={index}>
   
      </View>
   }

Add a gif image to readme file

It'd be nice to see how it looks on the read me.

breaks on reactNative 26 and react 15.0.2

hi,
very conveniant package!
Just one issue I ran into after updating RN.
It works great in rn 0.25 but breaks
on line 66 in Photogrid.js { items.map(item => this.props.renderItem(item, itemWidth)) }
with the error message:
Super expression must either be null or a function, not undefined
in rn 26.