How to Create Expo Camera in React Native?

Published On: 08/06/2022 | Category: React Native

Hi Guys,

Now, let's see article of how to implement expo camera in react native. I explained simply step by step how to create expo camera in react native. we will help you to give example of expo camera in react native. I’m going to show you about react native expo camera example. Alright, let’s dive into the steps.

expo-camera provides a React component that renders a preview for the device's front or back camera. The camera's parameters like zoom, auto focus, white balance and flash mode are adjustable. With the use of Camera, one can also take photos and record videos that are then saved to the app's cache. Morever, the component is also capable of detecting faces and bar codes appearing in the preview.

Step 1: Download Project

In the first step run the following command to create a project.

expo init ExampleApp
Step 2: Install Expo Camera

First, you need to install them in your project:

expo install expo-camera
Step 3: App.js

In this step, You will open the App.js file and put the code.

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { Camera, CameraType } from 'expo-camera';

const App = () => {
    const [hasPermission, setHasPermission] = useState(null);
    const [type, setType] = useState(CameraType.back);

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

    if (hasPermission === null) {
        return <View />;

    if (hasPermission === false) {
        return <Text>No access to camera</Text>;

    return (
        <View style={styles.container}>
            <Camera style={} type={type} ratio="16:9">
                <View style={styles.buttonContainer}>
                        onPress={() => {
                            setType(type === CameraType.back ? CameraType.front : CameraType.back);
                        <Text style={styles.text}> Flip </Text>

const styles = StyleSheet.create({
    container: {
        flex: 1,
    camera: {
        flex: 1,
    buttonContainer: {
        flex: 1,
        backgroundColor: 'transparent',
        flexDirection: 'row',
        margin: 20,
    button: {
        flex: 0.1,
        alignSelf: 'flex-end',
        alignItems: 'center',
    text: {
        fontSize: 18,
        color: 'white',

export default App;
Run Project

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

Output :

It will help you...