react-native video camera example

Question

I am new to react-native. I would like to open the camera on Pressable onPress event. Can anyone please give me the example of react-native-vision-camera. I have read the document. but really I don't know how to use the component. I have tried find-out the example, but no clue. because I want to customize the video camera. for example, I want to show 1234 while recording. that's why I will go with react-native-vision-camera. I tried that package. but I couldn't able to open the camera. I am not sure what I am wrong and the documentation is also not clear for me. So I asked for help here. Can anyone please help ?

Upload.js

import React, {
    useState,
    useEffect,
    useRef
} from 'react';
import { Provider as PaperProvider } from 'react-native-paper';
import { Avatar, Button, Card, Title, Chip, Paragraph } from 'react-native-paper';
import {
    SafeAreaView,
    ScrollView,
    StatusBar,
    StyleSheet,
    Text,
    useColorScheme,
    View,
    Image,
    ImageBackground,
    Pressable,
    Dimensions,
    PermissionsAndroid,
    Platform,
    TouchableOpacity
} from 'react-native';

import { Container } from 'native-base';
import Header from '../../Components/Header'
import colors from '../../Themes/Colors';
import Routes from '../../Navigation/Routes';
import useTranslation from '../../i18n';
import { IconX, ICON_TYPE } from '../../Icons';
import { ButtonX } from '../../Components';
import HeaderDoc from '../../Components/HeaderDoc';
import {
    launchCamera,
    launchImageLibrary
  } from 'react-native-image-picker';
import { useStoreActions, useStoreState } from 'easy-peasy';
import { org_id } from '../../Config';
import { Camera, useCameraDevices } from 'react-native-vision-camera';
import ImagePicker from 'react-native-image-crop-picker';
import ApplicantDetails from './ApplicationDetails';
import { CameraComponent } from './CameraComponent';

const UploadDoc = ({ navigation, route }) => {
    const { t } = useTranslation();
    const isDarkMode = useColorScheme() === 'dark';
    const tagList = ['a', 'b', 'c', 'D', 'E', 'F'];
    const [fileData, setfileData] = useState('');
    const [fileUri, setfileUri] = useState('');

    const camera = useRef(null);

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

    return (
        <SafeAreaView style={{ flex: 1, backgroundColor: colors.white }}>
            <HeaderDoc title={'Upload Documents'} page={'1'} navigation={navigation} />
            <View style={{ flex: 1, flexDirection: 'column' }}>
                <ScrollView
                    showsVerticalScrollIndicator={false}
                    contentContainerStyle={{ marginBottom: 130, backgroundColor: colors.white }}>
                    <View style={{ marginHorizontal: 20, marginTop: 10, marginBottom: 50 }}>
                        <Pressable
                            style={{width: 100, height: 30, backgroundColor: colors.primary, justifyContent: 'center',alignSelf: 'center',alignItems: 'center'}}
                            onPress={()=> CameraComponent()}>
                                <Text style={{color: colors.white}}>Take Photo</Text>
                            </Pressable>
                    </View>

                </ScrollView>
            </View>
        </SafeAreaView>
    );
};

export default UploadDoc;

CameraComponent.js

import React, {
  useState,
  useEffect,
  useRef
} from 'react';
import {
  StyleSheet,
  TouchableOpacity,
} from 'react-native';

import {Camera, useCameraDevices} from 'react-native-vision-camera';

export const CameraComponent = () => {
  console.log("asmasas")

  useEffect(() => {
    (async () => {
const newCameraPermission = await Camera.requestCameraPermission()
  const newMicrophonePermission = await Camera.requestMicrophonePermission()
})();
  },[])

  const devices = useCameraDevices()
    const device = devices.back
  
    if (device == null) return null;
    return (
      <Camera
        style={StyleSheet.absoluteFill}
        device={device}
        isActive={true}
        photo={true}
      />
    )
  
  }

Answer 1

First of all i assume youre using bare react native and not expo

Next then first you have to install the package via npm i or yarn install .

Then ill tell you for android

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

<!-- optionally, if you want to record audio: -->
<uses-permission android:name="android.permission.RECORD_AUDIO" />

You have to add these in AndroidManifest.xml

Next get permission status by using

next then in your comp

App.js

export const App = () => {

    useEffect(() => {
  const newCameraPermission = await Camera.requestCameraPermission()
    const newMicrophonePermission = await Camera.requestMicrophonePermission()
    },[])

    const devices = useCameraDevices()
      const device = devices.back
    
      if (device == null) return <LoadingView />
      return (
        <Camera
          style={StyleSheet.absoluteFill}
          device={device}
          isActive={true}
        />
      )
    
    }

Hop it helps