react-native-cameraroll-image-picker

Image Picker with cameraroll

Getting started

$ npm install @react-native-community/cameraroll --save $ npm install react-native-cameraroll-image-picker --save && npx pod-install

Permissions

iOS

ios/Podfile

  target 'routine' do
    config = use_native_modules!

    permissions_path = '../node_modules/react-native-permissions/ios'
    pod 'Permission-PhotoLibrary', :path => "#{permissions_path}/PhotoLibrary/Permission-PhotoLibrary.podspec"

    ...

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.

If you are targeting devices running iOS 11 or later, you will also need to add the NSPhotoLibraryAddUsageDescription key in your Info.plist. Use this key to define a string that describes how your app will use this data. By adding this key to your Info.plist, you will be able to request write-only access permission from the user. If you try to save to the camera roll without this permission, your app will exit.

Android

Permission is required to read and write to the external storage.

On Expo, follow the guide here for requesting the permission.

On react-native-cli or ejected apps, adding the following lines will add the capability for the app to request the permission. Find more info on Android Permissions here.

<manifest>
...
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
...
<application>

Components

• ImagePicker

Methods

• getAlbums

Reference

Components

ImagePicker

component accepts the following props...

Parameters:

| Name | Type | Required | Description | | ------ | ------ | -------- | ------------------------------------------------ | | params | object | No | Expects a params with the shape described below. |

• ref : {any} : you can use getAlbum method.
• initialNumToRender : {number} : Number of photos to load first. [default 50]
• groupTypes : {string} : Specifies which group types to filter the results to. Valid values are:
  • Album
  • All // default
  • Event
  • Faces
  • Library
  • PhotoStream
  • SavedPhotos
• assetType : {string} : Specifies filter on asset type. Valid values are:
  • All
  • Videos
  • Photos // default
• maximum : {number} : Maximum number of selectable images. [default 15]
• imagesPerRow : {number} : number of spaces. [default 3]
• imageMargin : {number} : gap between images. [default 1]
• containerWidth : {number} : screen width. [default Dimension screen width]
• backgroundColor : {string} : backgroundColor [default white]
• emptyText : {string} : Text to be displayed when the image is empty. [default null]
• emptyTextStyle : {object} : Text style to show if image is empty. [default null]
• loader : {element} : Loading Component [default null]
• album : {string} : current album [default All]
• albums : {array} : album list [default []]
• isMultiSelect : {boolean} : Whether to allow multiple selections or not. [default false]
• onChangePhotosEvent : {(e: { selected: { name: string; type: string; uri: string; }[]; item: { name: string; type: string; uri: string; }; index: number; isChecked: boolean; }) => void} : event when the selected image changes.
• onMaxSelectedEvent : {() => void} : Event when image selection is no longer possible.
• getAlbumsData : {(albums: { label: string; value: string; count: number; }[]) => void} : Import album list.
• onChangeAlbumEvent : {(album: string) => void} : Event when the selected album is changed.

import ImagePicker from "react-native-cameraroll-image-picker";

return (
  <ImagePicker
    initialNumToRender={50}
    album={"All"}
    maximum={5}
    onChangePhotosEvent={(e) => setSelected(e?.selected)}
    isMultiSelect={true}
  />
);

Methods

getAlbums()

import ImagePicker, { getAlbums } from "react-native-cameraroll-image-picker";

await getAlbums();

Returns a Promise with a list of albums

Returns:

Array of Album object

• label: {string};
• value: {string};
• count: {number};

Example

import React, { useEffect, useState } from "react";
import { SafeAreaView, View } from "react-native";
import ImagePicker, { getAlbums } from "react-native-cameraroll-image-picker";
import styled from "styled-components/native";
import ImagePickerHeader from "@/styles/ui/Header/ImagePickerHeader";

const ImagePickerView = ({ navigation: { goBack }, route }) => {
  const [albums, setAlbums] = useState([{ label: "All", value: "All" }]);
  const [currentAlbum, setCurrentAlbum] = useState("All");
  const [selected, setSelected] = useState < any > [];

  const handleSelectAlbum = (album) => {
    setCurrentAlbum(album);
  };

  const handleCompleteSelect = async () => {
    if (!selected?.[0]?.uri) return;
    console.log(selected);
  };

  useEffect(() => {
    (async function handleGetAlbums() {
      const result = await getAlbums();
      setAlbums(result);
    })();
  }, []);

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Container>
        <ImagePickerHeader
          onSelectAlbum={handleSelectAlbum}
          onCompleteSelect={handleCompleteSelect}
          albums={albums}
          currentAlbum={currentAlbum}
          goBack={goBack}
        />
        <View style={{ flex: 1 }}>
          <ImagePicker
            initialNumToRender={50}
            album={currentAlbum}
            maximum={1}
            onChangePhotosEvent={(e) => setSelected(e?.selected)}
          />
        </View>
      </Container>
    </SafeAreaView>
  );
};

const Container = styled.View`
  flex: 1;
  background-color: white;
`;

export default ImagePickerView;