React Native photo picker 📷⚛📱

Plug and play React Native photo picker component for picking photos from camera roll.

How it looks

Installation

yarn add rn-photo-picker

npm install rn-photo-picker

Linking library on ios

You need to link RCTCameraRoll from node-modules/react-native/Libraries !

https://facebook.github.io/react-native/docs/linking-libraries-ios.html - this should help You

Permissions

(copied from React Native documentation)

The user's permission is required in order to access the Camera Roll on devices running iOS 10 or later. Add the NSPhotoLibraryUsageDescription key in your Info.plist with a string that describes how your app will use this data. This key will appear as Privacy - Photo Library Usage Description in Xcode.

Usage

1import PhotoPicker from "rn-photo-picker";
2
3const pickedPhotos = [];
4const App = () => (
5  <PhotoPicker
6    color="blue"
7    scale={1}
8    limit={3}
9    onLimitReach={() => Alert.alert("You can't pick more than 3 photos!")}
10    onChange={photos => {
11      pickedPhotos = photos;
12    }}
13  />
14);

Props

prop	type	description	default
tileWidth	number	allows You to make tiles bigger or smaller	window.width / 3
margin	number	allows You to specify margin between tiles	15
limit	number	You can define how many	1
color	string	color of the picked photo	"rgb(200,200,200)"
onLimitReach	function	what happens when user tries to pick more than he/she can	() => Alert.alert("You can't pick more photos")
onChange	function	is executed when array of picked photos changes	e => console.log("%c " + JSON.stringify(e, null, 4),"background: #fff; color: #e51093")
onEmpty	function	is executed when there are no photos to display	() =>console.log("%c There are no photos!", "background: red; color: #fff")

Sample photo array

1[
2  {
3    timestamp: 1344462930.4,
4    group_name: "Camera Roll",
5    type: "ALAssetTypePhoto",
6    location: {
7      speed: 2.053334425692282,
8      latitude: 63.5314,
9      heading: 0,
10      longitude: -19.5112,
11      altitude: 0
12    },
13    image: {
14      playableDuration: 0,
15      isStored: true,
16      filename: "IMG_0005.JPG",
17      width: 3000,
18      height: 2002,
19      uri:
20        "assets-library://asset/asset.JPG?id=ED7AC36B-A150-4C38-BB8C-B6D696F4F2ED&ext=JPG"
21    }
22  },
23  {
24    timestamp: 1344461389.8,
25    group_name: "Camera Roll",
26    type: "ALAssetTypePhoto",
27    location: {
28      speed: 0.8999988197665498,
29      latitude: 64.752895,
30      heading: 0,
31      longitude: -14.53861166666667,
32      altitude: 0
33    },
34    image: {
35      playableDuration: 0,
36      isStored: true,
37      filename: "IMG_0004.JPG",
38      width: 1668,
39      height: 2500,
40      uri:
41        "assets-library://asset/asset.JPG?id=99D53A1F-FEEF-40E1-8BB3-7DD55A43C8B7&ext=JPG"
42    }
43  }
44];