React native camera

React native has the react-native-camera library which allows you to use cameras in your applications, projects to read QR codes and many other things. This library supports photographs, videos, face detection(Android & iOS), barcode scanning, text recognition(optional installation for iOS using CocoaPods).  You can install it using yarn or npm. 

yarn add react-native-camera@git+https://git@github.com/react-native-community/react-native-camera.git
npm install --save react-native-camera@git+https://git@github.com/react-native-community/react-native-camera.git
Like the apps you see in everyday life to use the camera you need to ask for camera permissions in Android.
<uses-permission android:name="android.permission.CAMERA" />
To use video recording features add the below lines of code to AndroidManifest.xml.

<uses-permission android:name="android.permission.RECORD_AUDIO"/>

  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

In the case of iOS update the info.plist with the usage description for the camera.
...
NSCameraUsageDescription
Your own description of the purpose

Required packages for our example are expo-camera and expo-av. Expo-camera is for capturing photos and videos. Expo-av is the module from which videos are imported to play our recorded video.

We will install both packages in the shell using one of the given commands.


$yarn add expo-camera expo-av
Or
$npm install expo-camera expo-av

Camera component is then added to the view in our project.


import React, { useState, useRef, useEffect } from "react";
import {
  StyleSheet,
  Dimensions,
  View,

  Text,
  TouchableOpacity,
  SafeAreaView,
} from "react-native";
    
import { Camera } from "expo-camera";    
import { Video } from "expo-av";
    const WINDOW_HEIGHT = Dimensions.get("window").height;
const closeButtonSize = Math.floor(WINDOW_HEIGHT * 0.03);
const captureSize = Math.floor(WINDOW_HEIGHT * 0.09);
    
export default function App() {
  
  const [hasPermission, setHasPermission] = useState(null);
  const [cameraType, setCameraType] = useState(Camera.Constants.Type.back);
   const [isPreview, setIsPreview] = useState(false);
  const [isCameraReady, setIsCameraReady] = useState(false);
    const [isVideoRecording, setIsVideoRecording] = useState(false);
  const [videoSource, setVideoSource] = useState(null);
  const cameraRef = useRef();
  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestPermissionsAsync();

      setHasPermission(status === "granted");
   
    })();

  }, []);

  const onCameraReady = () => {
    setIsCameraReady(true);

  };

  const takePicture = async () => {
    if (cameraRef.current) {
      const options = { quality: 0.5, base64: true, skipProcessing: true };
      const data = await cameraRef.current.takePictureAsync(options);
      const source = data.uri;
      if (source) {
        await cameraRef.current.pausePreview();
        setIsPreview(true);
        console.log("picture source", source);
      }
    }

  };
  
  const recordVideo = async () => {
    if (cameraRef.current) {
      try {

        const videoRecordPromise = cameraRef.current.recordAsync();
        if (videoRecordPromise) {
          setIsVideoRecording(true);
          const data = await videoRecordPromise;
          const source = data.uri;
          if (source) {
            setIsPreview(true);
            console.log("video source", source);
            setVideoSource(source);

          }

        }

      } catch (error) {
        console.warn(error);

      }

    }

  };

  const stopVideoRecording = () => {
    if (cameraRef.current) {
      setIsPreview(false);
      setIsVideoRecording(false);
      cameraRef.current.stopRecording();

    }

  };

  const switchCamera = () => {
    if (isPreview) {
      return;

    }
    setCameraType((prevCameraType) =>
      prevCameraType === Camera.Constants.Type.back
        ? Camera.Constants.Type.front
        : Camera.Constants.Type.back
    );

  };
  
  const cancelPreview = async () => {
    await cameraRef.current.resumePreview();
    setIsPreview(false);
    setVideoSource(null);

  };

  const renderCancelPreviewButton = () => (
    
      

      
    
  );
  const renderVideoPlayer = () => (      
   );
  const renderVideoRecordIndicator = () => (
    
      
      {"Recording..."}
    
  );
        
  const renderCaptureControl = () => (
    
      
        {"Flip"}
      
      
    
  );

  if (hasPermission === null) {
    return ;
  }

  if (hasPermission === false) {
    return No access to camera;
  }

  return (

    

       {
          console.log("cammera error", error);
        }}

      />

      
        {isVideoRecording && renderVideoRecordIndicator()}
        {videoSource && renderVideoPlayer()}
        {isPreview && renderCancelPreviewButton()}
        {!videoSource && !isPreview && renderCaptureControl()}
      
    

  );

}

const styles = StyleSheet.create({

  container: {
    ...StyleSheet.absoluteFillObject,
  },
    
  closeButton: {

    position: "absolute",
    top: 35,
    left:     5,
    height: closeButtonSize,
    width: closeButtonSize,
    borderRadius: Math.floor(closeButtonSize / ),
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#c4c5c4",
    opacity: 0.7,
    zIndex: ,

  },

  media: {
    ...StyleSheet.absoluteFillObject,
  },

  closeCross: {

    width: "68%",
    height:     ,
    backgroundColor: "black",
   
  },

  control: {

    position: "absolute",
    flexDirection: "row",
    bottom: 38,
    width: "    00%",
    alignItems: "center",
    justifyContent: "center",

  },

  capture: {
  
    backgroundColor: "#f5f6f5",
    borderRadius: 5,
    height: captureSize,
    width: captureSize,
    borderRadius: Math.floor(captureSize / ),
    marginHorizontal: 3    ,

  },

  recordIndicatorContainer: {
    flexDirection: "row",
    position: "absolute",  
    top: 5,
    alignSelf: "center",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "transparent",
    opacity: 0.7,
  },
  recordTitle: {
    fontSize:     4,
    color: "#ffffff",
    textAlign: "center",
  },
  recordDot: {
    borderRadius: 3,
    height: 6,
    width: 6,
    backgroundColor: "#ff0000",
    marginHorizontal: 5,
  },
  text: {
    color: "#fff",

  },
});

Now your camera is ready, now test it on an actual device.