react-native-photo-grid

    0.0.2 • Public • Published

    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;
    

    Install

    npm i react-native-photo-grid

    DownloadsWeekly Downloads

    1

    Version

    0.0.2

    License

    MIT

    Last publish

    Collaborators

    • christopherabouabdo