Vision Camera React Native -Best way to add a camera to your app

As a professional React Native developer, I know that having the right camera in your app is essential. Not only does it provide users with a better experience, but it also gives you more control over the look and feel of your application. That’s why I’m such an advocate for using the React Native Vision Camera — not only is it one of the most reliable cameras available on mobile platforms today, but its features make creating high-quality applications much easier.

React Native Vision Camera has several features that set it apart from other options out there: advanced image processing capabilities allow developers to create custom effects and filters; real-time facial recognition makes authentication faster and more secure; auto focus ensures sharp images even in low light conditions; plus support for multiple formats like JPEG or PNG allows you to easily share photos across different devices or social media networks. With all these benefits combined, there’s no doubt about why this is my go-to camera when developing apps with React Native!

In the following section I am going to implement React Native Vision Camera in a React Native App.

Installation:

yarn add react-native-vision-camera
cd ios && npx pod-install

Getting Started | VisionCamera

Android

Open your project’s AndroidManifest.xmland add the following lines inside the <manifest> tag:
<uses-permission android:name=”android.permission.CAMERA” />

IOS

Open your project’s Info.plist and add the following lines inside the outermost <dict> tag:
<key>NSCameraUsageDescription</key><string>$(PRODUCT_NAME) needs access to your Camera.</string>

Permissions:

We create the ‘getPermission’ function, which is called in the ‘useEffect’ hook, to request permission to access the camera. If permission is denied, the user will be directed to the settings to grant access.

  useEffect(() => {
    async function getPermission() {
      const permission = await Camera.requestCameraPermission();
      console.log(`Camera permission status: ${permission}`);
      if (permission === 'denied') await Linking.openSettings();
    }
    getPermission();
  }, []);

Capture an Image:

The ‘capturePhoto’ function checks if the camera is available, and if it is, it captures/takes a photo then set/saves the url to the state.

  const capturePhoto = async () => {
    if (camera.current !== null) {
      const photo = await camera.current.takePhoto({});
      setImageSource(photo.path);
      setShowCamera(false);
      console.log(photo.path);
    }
  };

Adding the camera:

In the ‘Camera’ function, we use the ‘useCameraDevices’ hook to get access to the available camera devices and set the default device to the back camera. We also create a camera reference using the ‘useRef’ hook and use the ‘useState’ hook to store the image path.

... 
 const camera = useRef(null);
  const devices = useCameraDevices();
  const device = devices.back;    
... 

return (
<>
          <Camera
            ref={camera}
            style={StyleSheet.absoluteFill}
            device={device}
            isActive={showCamera}
            photo={true}
          />
</>
       )
....

This is how the final app looks after adding additional logic like previewing the capture imaged.

Here is the full code to implement the full logic.

React Native Vision Camera Code with Firebase upload

Code: