@renzycode/react-native-fb-photo-grid NPM

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

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