https://github.com/christopherabouabdo/react-native-photo-grid

https://github.com/christopherabouabdo/react-native-photo-grid

Last synced: 6 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/christopherabouabdo/react-native-photo-grid
• Owner: christopherabouabdo
• License: mit
• Created: 2016-02-03T00:30:24.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-05-17T17:58:36.000Z (over 7 years ago)
• Last Synced: 2024-08-16T17:53:30.458Z (4 months ago)
• Language: JavaScript
• Size: 4.88 KB
• Stars: 36
• Watchers: 1
• Forks: 14
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-photo-grid ★31 - React Native component that handles the complexities of building a grid of photos with a flexible number of photos per row. (Components / UI)
• awesome-react-native - react-native-photo-grid ★31 - React Native component that handles the complexities of building a grid of photos with a flexible number of photos per row. (Components / UI)
• awesome-react-native - react-native-photo-grid ★31 - React Native component that handles the complexities of building a grid of photos with a flexible number of photos per row. (Components / UI)
• awesome-react-native-ui - react-native-photo-grid ★9 - React Native component that handles the complexities of building a grid of photos with a flexible number of photos per row. (Components / UI)
• awesome-react-native - react-native-photo-grid ★31 - React Native component that handles the complexities of building a grid of photos with a flexible number of photos per row. (Components / UI)

README

        
# 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(

      

    );

  }

  renderHeader() {

    return(

      I'm on top!

    );

  }

  renderItem(item, itemSize) {

    return(

       {

          // Do Something

        }}>

        

      

    )

  }

}

export default BestGrid;

```