📸 React Native: Select and Save Media from Gallery or Camera

In mobile applications, users often need to select photos and videos from the gallery or capture new ones using the camera and save them. In React Native projects, we can use the react-native-image-picker and react-native-camera-roll libraries to accomplish this.

In this guide, we will cover: ✅ Selecting a photo or video from the gallery
✅ Capturing a photo using the camera
✅ Saving the captured photo to the gallery

📌 1. Installing Required Libraries

First, let's install the necessary libraries:

npm install react-native-image-picker react-native-camera-roll
# or
yarn add react-native-image-picker react-native-camera-roll

📢 For iOS: Install CocoaPods dependencies:

cd ios && pod install && cd ..

📜 2. Configuring Permissions

We need to add permissions to access the camera and gallery.

Android Permissions

Add the following lines to your android/app/src/main/AndroidManifest.xml file:

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

Additionally, for Android 10 (API 29) and above, add the following line for scoped storage access:

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

iOS Permissions

Add the following permissions to your Info.plist file:

<key>NSPhotoLibraryUsageDescription</key>
<string>Permission is required to save photos to the gallery.</string>
<key>NSCameraUsageDescription</key>
<string>Permission is required to use the camera.</string>
<key>NSMicrophoneUsageDescription</key>
<string>Permission is required to record audio for videos.</string>

🎯 3. Selecting a Photo or Video from the Gallery

Use the following function to allow the user to select media from the gallery:

import React, { useState } from 'react';
import { View, Button, Image, Text } from 'react-native';
import { launchImageLibrary } from 'react-native-image-picker';

const App = () => {
  const [media, setMedia] = useState(null);

  const selectMedia = () => {
    const options = {
      mediaType: 'mixed', // Change to 'photo' or 'video' as needed
      quality: 1,
      selectionLimit: 1,
    };

    launchImageLibrary(options, response => {
      if (response.didCancel) {
        console.log('User canceled selection');
      } else if (response.errorMessage) {
        console.log('Error:', response.errorMessage);
      } else {
        setMedia(response.assets[0]);
      }
    });
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Select from Gallery" onPress={selectMedia} />
      {media && (
        media.type.startsWith('image') ? (
          <Image source={{ uri: media.uri }} style={{ width: 200, height: 200, marginTop: 10 }} />
        ) : (
          <Text style={{ marginTop: 10 }}>Selected video: {media.fileName}</Text>
        )
      )}
    </View>
  );
};

export default App;

---

📷 4. Capturing a Photo and Saving It to the Gallery

Now, let's add steps to open the camera, take a photo, and save it to the gallery.

📸 Capturing a Photo

Use react-native-image-picker to open the camera:

import { launchCamera } from 'react-native-image-picker';
import { PermissionsAndroid, Platform } from 'react-native';
import CameraRoll from '@react-native-camera-roll/camera-roll';

const openCamera = async () => {
  const options = {
    mediaType: 'photo',
    quality: 1,
  };

  launchCamera(options, async response => {
    if (response.didCancel) {
      console.log('User canceled the camera');
    } else if (response.errorMessage) {
      console.log('Error:', response.errorMessage);
    } else {
      const photoUri = response.assets[0].uri;
      console.log('Captured photo:', photoUri);
      await savePhotoToGallery(photoUri);
    }
  });
};

💾 Saving the Captured Photo to the Gallery

Use react-native-camera-roll to save the photo to the gallery:

const savePhotoToGallery = async (uri) => {
  if (Platform.OS === 'android') {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
    );

    if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
      console.log('Permission to save to gallery was denied.');
      return;
    }
  }

  try {
    await CameraRoll.save(uri, { type: 'photo' });
    console.log('Photo saved successfully!');
  } catch (error) {
    console.log('Failed to save photo:', error);
  }
};

---

🎥 5. Complete App Code

Below is the full application code that includes both selecting media from the gallery and capturing and saving a photo:

import React, { useState } from 'react';
import { View, Button, Image, Text, PermissionsAndroid, Platform } from 'react-native';
import { launchImageLibrary, launchCamera } from 'react-native-image-picker';
import CameraRoll from '@react-native-camera-roll/camera-roll';

const App = () => {
  const [media, setMedia] = useState(null);

  const selectMedia = () => {
    launchImageLibrary({ mediaType: 'mixed', quality: 1 }, response => {
      if (!response.didCancel && !response.errorMessage) {
        setMedia(response.assets[0]);
      }
    });
  };

  const takePhoto = async () => {
    launchCamera({ mediaType: 'photo', quality: 1 }, async response => {
      if (!response.didCancel && !response.errorMessage) {
        const photoUri = response.assets[0].uri;
        setMedia(response.assets[0]);
        await savePhotoToGallery(photoUri);
      }
    });
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Select from Gallery" onPress={selectMedia} />
      <Button title="Take Photo" onPress={takePhoto} />
      {media && <Image source={{ uri: media.uri }} style={{ width: 200, height: 200, marginTop: 10 }} />}
    </View>
  );
};

export default App;

🚀 Now, you can select media from the gallery and save captured photos to the phone's gallery!