React Native Expo Camera Example

Jun 08, 2022 . Admin

Hi Guys,

I will explain step by step tutorial expo camera in react native. We will use how to use react native expo camera. This post will give you simple example of how to create expo camera in react native. This post will give you simple example of react native expo camera example. Let's get started with how to implement expo camera in react native.

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...

#React Native