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.

Last update: May 2, 2022

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;

GitHub

https://github.com/christopherabouabdo/react-native-photo-grid
Comments
  • 1. 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.

    Reviewed by Hushim at 2017-12-09 08:14
  • 2. 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>
       }
    
    Reviewed by alainib at 2017-11-24 15:31
  • 3. 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> ) }

    Reviewed by evinw at 2017-04-14 21:14
  • 4. Removing style from ListView

    Simple changes the. The link for mock images was not working for me and the "style" property is not valid for ListView. You would have to use contentContainerStyle, which would not be the desired effect, so I just removed it.

    Reviewed by charlle at 2017-01-07 19:36
  • 5. 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.

    Reviewed by folivi at 2016-06-06 09:36
A FAB button component for Android and iOS, customizable, simple and as per material design specs.

react-native-fab A FAB button component for Android and iOS, customizable, simple and as per material design specs. See Google Material Design for mor

Feb 12, 2022
Automatic linking of URLs, phone numbers, emails, handles, etc. in strings for React Native
Automatic linking of URLs, phone numbers, emails, handles, etc. in strings for React Native

React Native AutoLink Auto-Linking component for React Native. Parses text and wraps URLs, phone numbers, emails, social handles, hashtags, and more w

May 9, 2022
keyboard-aware-view is a react-native package that handles the view position based on input position and keyboard so that the text input doesn't get hidden behind the keyboard.

keyboard-aware-view is a react-native package that handles the view position based on input position and keyboard so that the text input doesn't get hidden behind the keyboard.

Apr 1, 2022
A photo picture viewer for React Native
A photo  picture viewer for React Native

React Native Photo Viewer A photo viewer for react native build on top of NYTPhotoViewer and FrescoImageViewer Key features: Double-tap to zoom Captio

May 12, 2022
React Native component for select phone number from address book.
React Native component for select phone number from address book.

react-native-phone-picker React Native component for select phone number from address book 用于React Native的通讯录手机号选取模块 Usage npm install react-native-ph

Dec 11, 2021
React native Minus(-) (Number) Plus(+) Component
React native Minus(-) (Number) Plus(+) Component

React native Minus(-) (Number) Plus(+) Component Installation To install a stable release use: yarn yarn add react-native-counters npm npm i react-nat

Apr 20, 2022
ScrollView with infinte paged scrolling (no looping). The number of pages rendered before and after current page can be customized. Pages are rendered when user scrolled.
ScrollView with infinte paged scrolling (no looping). The number of pages rendered before and after current page can be customized. Pages are rendered when user scrolled.

react-native-infinite-scrollview ScrollView with infinte paged scrolling (no looping). The number of pages rendered before and after current page can

Dec 23, 2021
🤞🏻 Map Boolean As Floating Number, Functional

???? Map Boolean As Floating Number, Functional Preview | Example start yarn add progress-it or npm install progress-it import progress from "progres

Apr 22, 2022
Flexible and lightweight React Native component for UITableView made with pure CSS
Flexible and lightweight React Native component for UITableView made with pure CSS

react-native-tableview-simple ?? This component is used in my production app Game ideas. Make sure to check it out! ?? This cross-platform component i

Apr 27, 2022
react-native-wheel-picker-android ★186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker.
react-native-wheel-picker-android ★186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker.

React native wheel picker V2 A simple Wheel Picker for Android (For IOs is using Picker from react-native) Example You can clone the repo and run exam

May 8, 2022
A Cross Platform(Android & iOS) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.
A Cross Platform(Android & iOS) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.

react-native-actions-sheet A highly customizable cross platform ActionSheet for react native. Screenshots Features Cross Platform (iOS and Android) Na

May 17, 2022
Simple and flexible Radio button for React Native App
Simple and flexible Radio button for React Native App

React Native Flexi Radio Button Simple and flexible Radio button for React Native App Installation npm i react-native-flexi-radio-button --save Usage

Mar 22, 2022
RN-TourGuide - A flexible tourguide for your react native app
RN-TourGuide - A flexible tourguide for your react native app

??Make an interactive step by step tour guide for your react-native app (a rewrite of react-native-copilot)

May 9, 2022
A simple search box with animation, inspired from ios search bar. Lightweight, fast, flexible.

React Native Search Box A simple search box with animation, inspired from ios search bar. Lightweight, fast, flexible, customizable. Support both iOS/

Apr 24, 2022
React Native Grid/Collection View component
React Native Grid/Collection View component

react-native-grid-view THIS PROJECT IS NO LONGER MAINTAINED, PLEASE GRAB THE SOURCE CODE AND TAKE OWNERSHIP IN YOUR OWN PROJECT IF YOU FIND IT USEFUL.

Apr 15, 2022
:black_square_button: React native grid component

?? react-native-grid-component Easy to use grid component for your react-native project. Supports iOS and Android. Based on react-native framework by

May 12, 2022
**[DEPRECATED]** The 24-column grid component for react-native

react-native-grid The 24-column grid component for react-native Installation $ npm install react-native-grid Example 'use strict'; import React from

Aug 20, 2019
Touchable component for React Native that enables more advanced styling by setting an active state. Most useful for building your own touchable/button components on top of.

react-native-TouchableSetActive Touchable component for React Native that enables more advanced styling by setting an active state. Most useful for bu

Mar 11, 2020
Easy React Native Layout & Grid for the Dumb
Easy React Native Layout & Grid for the Dumb

React Native Easy Grid ?? This is NOT-JUST-ANOTHER-GRID-LAYOUT library! We are trying to simplify flexbox with easier approach. Installation npm insta

May 3, 2022