How to implement React Native Camera for Android and iOS

Hi Guys, In this article, We are going to learn about How to implement React Native Camera for Android and iOS. How days, capturing and sharing moments through photos has become an integral part of our lives. React Native, offers a powerful tool for integrating camera functionality into your mobile app. We’ll explore how to use the react-native-camera library to implement camera features in both Android and iOS apps while handling necessary permissions.

Before we start, ensure that you have a basic understanding of React Native and that your development environment is set up. check this article to learn the basics of React Native setup.

1. Installing Dependencies

Install the following packages to get started with the implementation

npm install react-native-camera react-native-permissions

2. Setting Up Permissions 

Open the android/app/src/main/AndroidManifest.xml file and add the following required permission.

<!-- Required for Camera -->
<uses-permission android:name="android.permission.CAMERA" />

<!-- Add this only if you are planning to save picture in the camera roll -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<!-- Add this only if you are planning to use the microphone for video recording -->
<uses-permission android:name="android.permission.RECORD_AUDIO"/>

Insert the following lines in android/app/build.gradle

android {
  defaultConfig {
    ...
    missingDimensionStrategy 'react-native-camera', 'general' // <--- Add this
  }
}

For iOS, open your Info.plist and add the following key

<!-- Required to use camera -->
<key>NSCameraUsageDescription</key>
<string>First time message to user when the camera is accessed.</string>

<!-- Add this if you are planning to save picture in the camera roll -->
<key>NSPhotoLibraryAddUsageDescription</key>
<string>First time message to user when the photo library is accessed.</string>

<!-- Add this if you are planning to use the camera roll -->
<key>NSPhotoLibraryUsageDescription</key>
<string>First time message to user when the photo library is accessed.</string>

<!-- Add this if you are planning to use the microphone for video recording -->
<key>NSMicrophoneUsageDescription</key>
<string>First time message to user when the microphone is accessed.</string>

3. Implementing the Camera Component

Now, let’s create a camera component using react-native-camera

import React, { useRef, useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { request, PERMISSIONS } from 'react-native-permissions';
import { RNCamera } from 'react-native-camera';

const CameraScreen = () => {
  const cameraRef = useRef(null);
  const [isRecording, setIsRecording] = useState(false);

  const toggleRecording = async () => {
    if (cameraRef) {
      if (isRecording) {
        cameraRef.current.stopRecording();
      } else {
        const granted = await request(PERMISSIONS.ANDROID.RECORD_AUDIO);
        if (granted === 'granted') {
          const videoData = await cameraRef.current.recordAsync();
        }
      }
      setIsRecording(!isRecording);
    }
  };

  const takePicture = async () => {
    if (cameraRef) {
      const options = { quality: 0.5, base64: true };
      const data = await cameraRef.current.takePictureAsync(options);
    }
  };

  return (
    <View style={{ flex: 1 }}>
      <RNCamera
        ref={cameraRef}
        style={{ flex: 1 }}
        type={RNCamera.Constants.Type.back}
      />
      <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
        <TouchableOpacity onPress={takePicture}>
          <Text>Take Photo</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={toggleRecording}>
          <Text>{isRecording ? 'Stop' : 'Record'}</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default CameraScreen;

4. Using the Camera Component

You can use the CameraScreen component in your main application file.

import React from 'react';
import { StyleSheet, View } from 'react-native';
import CameraScreen from './CameraScreen';

const App = () => {
  return (
    <View style={styles.container}>
      <CameraScreen />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

Thank you 🙂