react-native-fb-photo-grid

A React Native component to display photos in a grid like Facebook's newsfeed.

• 🔥 Display photos in a Facebook-style grid
• 🔥 Responsive layout
• 🔥 Customizable grid and gutter sizes
• 🔥 Accessible child to parent function

Example: https://github.com/renzycode/react-native-fb-photo-grid-example

Installation

yarn add @renzycode/react-native-fb-photo-grid

or

npm install --save @renzycode/react-native-fb-photo-grid

Usage

import React from 'react';
import { View } from 'react-native';
import FBPhotoGrid from '@renzycode/react-native-fb-photo-grid';

const photos = [
  'https://example.com/photo1.jpg',
  'https://example.com/photo2.jpg',
  'https://example.com/photo3.jpg',
];

const App = () => (
  <View>
    <FBPhotoGrid
      height={400}
      gutterColor="#fff"
      photos={photos}
      gutterSize={2}
      onTouchPhoto={(photoUri, index) => console.log(photoUri, index)}
    />
  </View>
);

export default App;

Props

| Prop name | Description | Type | Default | Required | | ------------------------ | --------------------------------------------------------------------------------------------------- | --------------------------------------------- | ------- | -------- | | Height | Height of the photo grid | number | 400 | false | | gutterColor | Background color of the grid | string | #fff | false | | photos | Array of photo URIs | string[] | [] | true | | gutterSize | Size of space between photos | number | 0 | false | | onTouchPhoto | Callback function when a photo is touched | (photoUri: string, index: number) => void | ()=>{} | false |

License

MIT