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
!
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
import PhotoPicker from "rn-photo-picker";
const pickedPhotos = [];
const App = () => (
<PhotoPicker
color="blue"
scale={1}
limit={3}
onLimitReach={() => Alert.alert("You can't pick more than 3 photos!")}
onChange={photos => {
pickedPhotos = photos;
}}
/>
);
How single photo object looks?
{
filename: "IMG_0005.JPG",
height: 2002,
isStored: true,
playableDuration: 0,
uri:
"assets-library://asset/asset.JPG?id=ED7AC36B-A150-4C38-BB8C-B6D696F4F2ED&ext=JPG",
width: 3000
}
Props
prop | type | description | example |
---|
scale | number | alllows You to make tiles and margins bigger or smaller | 1.5 |
limit | number | You can define how many photos user can pick | 5 |
color | string | color of the picked photos | "#eee" |
onLimitReached | function | what happens when user tries to pick more than he/she can | () => console.warn("limit reached") |
onChange | function | called when array of picked photos changes | (photos) => console.warn("picked photos:", photos) |
Tip: default spacing between tiles is 15
, if you need ie. 30
set scale to 2