Camera access (expo-camera) in React Native

Introduction

We use the camera in apps to take pictures or record videos. It helps users capture moments or scan things easily.

When you want users to take a photo inside your app, like for a profile picture.

When your app needs to scan QR codes or barcodes.

When users want to record videos directly from your app.

When you want to build a photo editing or sharing app.

When you want to add augmented reality features that use the camera view.

Syntax

React Native

import { Camera } from 'expo-camera';
import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';

const [hasPermission, setHasPermission] = useState(null);
const [cameraRef, setCameraRef] = useState(null);

useEffect(() => {
  (async () => {
    const { status } = await Camera.requestCameraPermissionsAsync();
    setHasPermission(status === 'granted');
  })();
}, []);

return (
  hasPermission === null ? <View /> :
  hasPermission === false ? <Text>No access to camera</Text> :
  <Camera ref={ref => setCameraRef(ref)} style={{ flex: 1 }} />
);

Camera.requestCameraPermissionsAsync() asks the user to allow camera use.

You must check permission before showing the camera to avoid errors.

Examples

Request camera permission and check if user allowed it.

React Native

const { status } = await Camera.requestCameraPermissionsAsync();
if (status === 'granted') {
  // Permission granted
}

Show the camera preview filling the screen.

React Native

<Camera style={{ flex: 1 }} />

Take a picture using the camera reference.

React Native

const takePicture = async () => {
  if (cameraRef) {
    const photo = await cameraRef.takePictureAsync();
    console.log(photo.uri);
  }
};

Sample App

This app asks for camera permission, shows the camera preview, and has a button to take a picture. When you tap the button, it takes a photo and shows the file path below.

React Native

import React, { useState, useEffect } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { Camera } from 'expo-camera';

export default function App() {
  const [hasPermission, setHasPermission] = useState(null);
  const [cameraRef, setCameraRef] = useState(null);
  const [photoUri, setPhotoUri] = useState(null);

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  const takePicture = async () => {
    if (cameraRef) {
      const photo = await cameraRef.takePictureAsync();
      setPhotoUri(photo.uri);
    }
  };

  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }

  return (
    <View style={{ flex: 1 }}>
      <Camera style={{ flex: 4 }} ref={ref => setCameraRef(ref)} />
      <TouchableOpacity
        onPress={takePicture}
        style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#2196F3' }}
        accessibilityLabel="Take picture button"
      >
        <Text style={{ color: 'white', fontSize: 18 }}>Take Picture</Text>
      </TouchableOpacity>
      {photoUri && <Text style={{ padding: 10 }}>Photo saved at: {photoUri}</Text>}
    </View>
  );
}

Important Notes

Always ask for camera permission before using the camera.

Use the camera reference to control the camera and take pictures.

Remember to handle the case when permission is denied to inform the user.

Summary

Camera access lets your app take photos or videos inside the app.

Request permission first, then show the camera preview.

Use the camera reference to take pictures and get their file paths.