How to Show Photos of your Device as a Gallery in React Native

Apps such as image editing apps or social apps allow users to use their own photos. In this react native tutorial, I am going to show you a camera roll example where the images of your device are listed as a grid.

CameraRoll is a react native API that gives access to the user’s photos and videos. First of all, let’s see how to set up a CameraRoll in your react native project.

Install CameraRoll using any of the following commands.

npm install @react-native-camera-roll/camera-roll --save

or

yarn add @react-native-camera-roll/camera-roll

Now you should have permission to access photos on both iOS and Android devices. In Android, add the following permission in AndroidManifest.xml file.

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

In the case of iOS, add two keys namely NSPhotoLibraryUsageDescription and NSPhotoLibraryAddUsageDescription in Info.plist file with strings as values that define how you are going to use the data.

You have to invoke CameraRoll.getPhotos() method to retrieve photos of the device. It returns a promise where you get all data related to the photos and videos.

import {CameraRoll} from '@react-native-camera-roll/camera-roll';

CameraRoll.getPhotos({
        first: 50,
        assetType: 'Photos',
      })
      .then(res => {
        this.setState({ data: res.edges });
      })
      .catch((error) => {
         console.log(error);
      });

Following is the complete react native camera roll example where the latest fifty photos of the user’s device are shown as a grid using FlatList.

import React, {useEffect, useState} from 'react';
import {
  View,
  Image,
  FlatList,
  PermissionsAndroid,
  Platform,
} from 'react-native';
import {CameraRoll} from '@react-native-camera-roll/camera-roll';

const App = () => {
  const [data, setData] = useState('');

  useEffect(() => {
    askPermission();
  }, []);

  const getPhotos = () => {
    CameraRoll.getPhotos({
      first: 50,
      assetType: 'Photos',
    })
      .then(res => {
        setData(res.edges);
      })
      .catch(error => {
        console.log(error);
      });
  };

  const askPermission = async () => {
    if (Platform.OS === 'android') {
      const result = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
        {
          title: 'Permission Explanation',
          message: 'ReactNativeForYou would like to access your photos!',
        },
      );
      if (result !== 'granted') {
        console.log('Access to pictures was denied');
        return;
      } else {
        getPhotos();
      }
    } else {
      getPhotos();
    }
  };

  return (
    <View>
      <FlatList
        data={data}
        numColumns={3}
        renderItem={({item}) => (
          <Image
            style={{
              width: '33%',
              height: 150,
            }}
            source={{uri: item.node.image.uri}}
          />
        )}
      />
    </View>
  );
};

export default App;

Following is the output of this react native tutorial.

I hope you find this react native tutorial helpful. Thank you for reading.