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

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

or

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

Usage

1import React from 'react';
2import { View } from 'react-native';
3import FBPhotoGrid from '@renzycode/react-native-fb-photo-grid';
4
5const photos = [
6  'https://example.com/photo1.jpg',
7  'https://example.com/photo2.jpg',
8  'https://example.com/photo3.jpg',
9];
10
11const App = () => (
12  <View>
13    <FBPhotoGrid
14      height={400}
15      gutterColor="#fff"
16      photos={photos}
17      gutterSize={2}
18      onTouchPhoto={(photoUri, index) => console.log(photoUri, index)}
19    />
20  </View>
21);
22
23export 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