Search for a command to run...
Hello there! I develop cross-platform mobile apps with React-native. Before I started mobile application development, I was developing web applications. Here I am sharing blog posts for the work I have done and the solutions to the problems I have encountered.
No comments yet. Be the first to comment.
On this page
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
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 ..
We need to add permissions to access the camera and gallery.
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"/>
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>
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;
Now, let's add steps to open the camera, take a photo, and save it to the gallery.
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);
}
});
};
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);
}
};
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!