Plug and play React Native photo picker component for picking photos from camera roll.
yarn add rn-photo-picker
npm install rn-photo-picker
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
(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.
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;
}}
/>
);
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") |
[
{
timestamp: 1344462930.4,
group_name: "Camera Roll",
type: "ALAssetTypePhoto",
location: {
speed: 2.053334425692282,
latitude: 63.5314,
heading: 0,
longitude: -19.5112,
altitude: 0
},
image: {
playableDuration: 0,
isStored: true,
filename: "IMG_0005.JPG",
width: 3000,
height: 2002,
uri:
"assets-library://asset/asset.JPG?id=ED7AC36B-A150-4C38-BB8C-B6D696F4F2ED&ext=JPG"
}
},
{
timestamp: 1344461389.8,
group_name: "Camera Roll",
type: "ALAssetTypePhoto",
location: {
speed: 0.8999988197665498,
latitude: 64.752895,
heading: 0,
longitude: -14.53861166666667,
altitude: 0
},
image: {
playableDuration: 0,
isStored: true,
filename: "IMG_0004.JPG",
width: 1668,
height: 2500,
uri:
"assets-library://asset/asset.JPG?id=99D53A1F-FEEF-40E1-8BB3-7DD55A43C8B7&ext=JPG"
}
}
];