React Native Camera View

Simple controls for react-native-camera

Dependent

• react-native-camera
• react-native-circular-progress
• react-native-fs
• react-native-svg
• react-native-video
• react-navigation (router framework, optional)

Usage

example with react-navigation 5.x

import 'react-native-gesture-handler';
import * as React from 'react';
import {Button, View, Image} from "react-native";
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import Video from "react-native-video";
 
import RNCameraView from "react-native-camera-view";
 
const Stack = createStackNavigator();
 
function Media({navigation, route}) {
    const [source, setSource] = React.useState(null);
 
    React.useEffect(() => {
        if (route.params && route.params.source) {
            setSource(route.params.source);
            console.log(route.params.source)
        }
    }, [route.params]);
 
    return (
        <View>
            <Button title={"Shot"} onPress={() => {
                navigation.push('Camera');
            }}/>
            {
                source && source.type === "image" ? <Image source={source} style={{width: 200, height: 200}}/> : null
            }
            {
                source && source.type === "video" ?
                    <Video source={source} style={{width: 200, height: 200}} controls/> : null
            }
        </View>
    );
}
 
function Camera({navigation}) {
    return (
        <RNCameraView
            onBack={(source) => {
                if (source) {
                    navigation.navigate("Media", {
                        source: {...source}
                    });
                } else {
                    navigation.goBack();
                }
            }}
        />
    );
}
 
function Home() {
    return (
        <Stack.Navigator>
            <Stack.Screen name="Media" component={Media}/>
            <Stack.Screen
                options={
                    {
                        headerShown: false
                    }
                }
                name="Camera" component={Camera}
            />
        </Stack.Navigator>
    );
}
 
 
export default function App() {
    return (
        <NavigationContainer>
            <Home/>
        </NavigationContainer>
    );
}

Props

videoQuality

This option specifies the quality of the video to be taken, default 480p.

import {VideoQuality} from "react-native-camera-view";
 
// VideoQuality["480p"]
// VideoQuality["1080p"]
// ...

videoDuration

default 10000 (10s);

videoBitrate

(int greater than 0) This option specifies a desired video bitrate. For example, 5 * 1000 * 1000 would be 5Mbps. default use medium bitrate for 480p.

 
/**
use high video bitrate
*/
 
import {HighBitrate} from "react-native-camera-view";
 
const videoWidth = 1920;
const videoHeight = 1080;
 
// easy way to calculate video bitrate
const videoBitrate = HighBitrate(videoWidth, videoHeight);

videoProps

component properties object for react-native-video.

imageProps

component properties object for Image.

recordOptions

supported options for recording.

maxImageWidth

default 1920, set 0 / null / undefined is not be effected.

imageQuality

(float between 0 to 1.0), default 1.0

takePictureOptions

supported options for taking picture.

cameraProps

component properties object for react-native-camera.

onBack

function to be called when confirm or cancel capturing.

import RNCameraView from "react-native-camera-view";
 
export default ()=>
{
    return (
        <RNCameraView 
            onBack={(result)=>{
                if(result){
                    const {uri,type} = result;
                    if(video === "video") {
                        // video
                    }
                    else {
                        // image
                    }
                }
                else {
                    // cancel
                }   
            }}
        />
    );
}

disableRecording

default false

disableTakingPicture

default false