React Native Camera – Libraries Comparison

We all used React Native Camera (RNCamera) because it was the most polished and recommended by the React Native community, but it seems that it is standing still and does not plan any active development. Fortunately, a new library has emerged from around the corner that could patch the hole of useful camera libraries in the RN environment: RN Vision Camera.

What is React Native Camera?

React Native camera libraries comparison

At the moment there are only three sensible libraries for using the phone's camera in RN apps, these are:

• react-native-camera
  RNCamera is the most popular one, mature, but with limited possibilities.

• react-native-vision-camera
  RN Vision Camera is a new, fast-growing library with good potential and many possibilities.
• react-native-image-picker
  RN Image Picker is primarily to access photos stored on the device, but also allows you to take a new photo/video.

RNCamera

Pros:
- Large community, mature product.
- Easy setup with just one additional step (permissions).
- Can be used with Expo.
- Good documentation with recipes.
- Valuable props to set autofocus, flash, ratio, white balance, exposure, zoom, and video quality.
- It is possible to switch between front and back cameras.
- Additional features like face detection, barcode detection, and text recognition.

Cons:
- Library is actively looking for maintainers, which means it could be unsupported soon.
- Can’t switch between all of the available camera lenses.
- There is no built-in UI, so everything must be implemented e.g. snap button.

RN Vision Camera

Pros:
- Library is rapidly gaining popularity.
- Nice lifecycle mechanism that will keep the camera session if the app is in the background or the user is navigating to a different screen.
- The strongest point of the library — it can detect all device camera lenses and you can switch between them in the way you want.
- Each lens returns all possible formats you can use and additional props like min zoom, max zoom, it has torch, has flash, supports focus, supports raw capture, etc.
- There are some available presets that can be used (you can get lost with formats, it is usually around 60 of them available for each lens).
- It can take snapshots.
- Available frame processors — for example, it's possible to detect objects with the camera.
- Good documentation.

Cons:
- Some additional installation steps needed like raise min iOS version, raise target Android SDK version, etc.
- Quite a fresh tool in the market, it will probably need some time to mature and release a really stable version.
- There is no built-in UI.

RN Image Picker

Pros:
- Mature, popular, and maintained with a strong community.
- Simple to install and use.
- Can be used to pick already taken photos from the device.
- Can take a photo or even record video.
- Has a bunch of helpful props like max width, max height, media type, video quality, and duration limit.

Cons:
- Only semi-good documentation.
- Limited possibilities for taking photos and recording video (but of course it’s not the main purpose of this library).

Which RN camera library should you use?

For a simple app that will only use the camera to take a photo for a user avatar or record a short movie using default settings, the react-native-camera will be more than enough.

If you are building an app where the camera plays a bigger role and you need to get the most out of it, then go with react-native-vision-camera.

To select already taken photos that are stored in the phone’s gallery, use the react-native-image-picker.

Future

A strong point for react-native-vision-camera is the fact that react-native-camera is looking for maintainers, this will possibly make RN Vision Camera the default choice when it comes to a camera library for RN.

RN Vision Camera - implementation example (tutorial)

Below is an example of using the RN Vision Camera with basic tools to take a picture.

import React, { useRef, useState } from 'react';
import { StyleSheet, Alert } from 'react-native';
import { Camera, useCameraDevices } from 'react-native-vision-camera';
import BottomButtons from './components/BottomButtons/BottomButtons';
import ImagePreview from './components/ImagePreview/ImagePreview';
import TopButtons from './components/TopButtons/TopButtons';

function App() {
  const camera = useRef(null);

  const [previewImage, setPreviewImage] = useState(null);
  const [showPreview, setShowPreview] = useState(false);
  const [torchActive, setTorchActive] = useState(false);
  const [frontCamera, setFrontCamera] = useState(false);

  /* Here we use hook provided by library to take available devices (lenses) */
  const availableDevices = useCameraDevices();

  /* useCameraDevices hook returns an object with front/back properties,
     that you can use to switch between back and front camera */
  const currentDevice =
    frontCamera && availableDevices?.front ? availableDevices.front : availableDevices?.back;

  const takePhoto = async () => {
    try {
      const result = await camera.current?.takePhoto();
      if (result?.path) setPreviewImage(result.path);
    } catch (e) {
      Alert.alert(`Error: ${e}`);
    }
  };

  const flipCamera = () => setFrontCamera((prevState) => !prevState);
  const toggleTorch = () => setTorchActive((prevState) => !prevState);

  /* There is an additional check to prevent errors.
     Camera component needs a valid device prop,
     we need to stop rendering if the device is falsy value. */
  if (!currentDevice) return null;

  if (previewImage && showPreview) {
    return <ImagePreview path={previewImage} dismissPreview={() => setShowPreview(false)} />;
  }

  return (
    <React.Fragment>
      <Camera
        ref={camera}
        style={StyleSheet.absoluteFill}
        device={currentDevice}
        isActive={true}
        photo={true}
        torch={torchActive ? 'on' : 'off'}
      />
      <TopButtons torchActive={torchActive} toggleTorch={toggleTorch} />
      <BottomButtons
        showPreview={() => setShowPreview(true)}
        takePhoto={takePhoto}
        flipCamera={flipCamera}
      />
    </React.Fragment>
  );
}

export default App;

Is it hard to create a UI in RN Vision Camera?

As we can see, not that much effort is needed to create a well-known standard camera UI in your app. With a minimal amount of code we have added the following buttons on the screen:
- Capture (center)
- Preview latest photo (left)
- Switch to front camera and vice versa (right)
- Flash (top-right)

This is only a small piece of the functionality that RN Vision Camera offers. There are a lot more options that can be used like zooming, recording, switching to wide-angle and telephoto lens, selecting photo/video format, setting video frame rate, and more.

React Native Vision Camera – my opinion

RN Vision Camera is really impressive when it comes to the possibilities it offers.
I can recommend it if you are looking for a functional camera library to use in your application.
This will be my choice for the camera library in my next project.