How to Use Camera in React Native: Simple Guide

To use the camera in React Native, install a camera library like react-native-camera or expo-camera. Then request camera permissions and render the Camera component to capture photos or videos.

Syntax

Using the react-native-camera library, you import the RNCamera component and place it in your JSX. You must request camera permissions before rendering the camera view. The RNCamera component accepts props like type to choose front or back camera and methods to capture photos.

javascript

import { RNCamera } from 'react-native-camera';

function CameraView() {
  return (
    <RNCamera
      style={{ flex: 1 }}
      type={RNCamera.Constants.Type.back}
      captureAudio={false}
    />
  );
}

Output

A full-screen camera preview showing the back camera feed.

Example

This example shows a simple React Native component using react-native-camera to display the camera preview and a button to take a picture. It handles permissions and saves the photo URI.

javascript

import React, { useRef, useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, PermissionsAndroid, Platform } from 'react-native';
import { RNCamera } from 'react-native-camera';

export default function CameraExample() {
  const cameraRef = useRef(null);
  const [photoUri, setPhotoUri] = useState(null);

  async function requestCameraPermission() {
    if (Platform.OS === 'android') {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.CAMERA,
        { title: 'Camera Permission', message: 'App needs camera access' }
      );
      return granted === PermissionsAndroid.RESULTS.GRANTED;
    }
    return true;
  }

  async function takePicture() {
    const hasPermission = await requestCameraPermission();
    if (hasPermission && cameraRef.current) {
      const options = { quality: 0.5, base64: false };
      const data = await cameraRef.current.takePictureAsync(options);
      setPhotoUri(data.uri);
    }
  }

  return (
    <View style={{ flex: 1 }}>
      <RNCamera
        ref={cameraRef}
        style={styles.preview}
        type={RNCamera.Constants.Type.back}
        captureAudio={false}
      />
      <TouchableOpacity style={styles.capture} onPress={takePicture}>
        <Text style={{ fontSize: 14 }}> SNAP </Text>
      </TouchableOpacity>
      {photoUri && <Text style={styles.text}>Photo saved at: {photoUri}</Text>}
    </View>
  );
}

const styles = StyleSheet.create({
  preview: { flex: 1, justifyContent: 'flex-end', alignItems: 'center' },
  capture: { flex: 0, backgroundColor: '#fff', padding: 15, alignSelf: 'center', margin: 20 },
  text: { textAlign: 'center', margin: 10 }
});

Output

Shows camera preview with a SNAP button; pressing it takes a photo and displays the saved photo URI below.

Common Pitfalls

• Not requesting camera permissions before using the camera causes the app to crash or show a blank screen.
• Forgetting to set captureAudio={false} if you only want photos can cause permission issues.
• Not handling permission denial gracefully leads to poor user experience.
• Using deprecated or unmaintained camera libraries can cause compatibility problems.

javascript

/* Wrong: No permission request */
<RNCamera style={{ flex: 1 }} />

/* Right: Request permission before rendering camera */
async function requestPermission() {
  // request permission code
}

if (hasPermission) {
  return <RNCamera style={{ flex: 1 }} />;
} else {
  return <Text>No access to camera</Text>;
}

Quick Reference

Key points to remember:

• Install react-native-camera or use expo-camera if using Expo.
• Always request camera permissions before use.
• Use RNCamera component to show camera preview.
• Call takePictureAsync() to capture photos.
• Handle permission denial gracefully.

Key Takeaways

Always request camera permissions before accessing the camera in React Native.

Use the RNCamera component from react-native-camera to display the camera preview.

Call takePictureAsync() on the camera ref to capture photos.

Handle permission denial to avoid app crashes or blank screens.

Consider using expo-camera if you are working within the Expo ecosystem.