Create a Camera App using React-Native

A camera app using react native is a mobile application that is designed to capture photos or videos using the built-in camera functionality of a mobile device. In this article, you will learn how you can create a camera app with simple steps.

Output Preview: Let us have a look at how the final application will look like:

Preview of the app

Prerequisites:

• React Native
• React Native State
• React Native Props

Approach to create Camera app:

• The app uses the React useState hook to manage state variables.
• hasCameraPermission is a state variable to track camera permission status.
• camera is a state variable to hold the reference to the camera component.
• The app uses the Camera component from the ‘expo-camera’ library.
• When the “Take Picture” button is pressed, the takePicture function is called. The function captures a picture using the takePictureAsync method of the camera and sets the image URI in the state.
• If an image is captured (image state is not null), it is displayed along with a “Retake” button. The “Retake” button allows users to discard the captured image and go back to the camera preview.

Steps to Create React Native Application:

Step 1: Create a react native application by using this command in the command prompt

React-native init CameraApp

Step 2: Install required dependencies.

npm i expo-camera

Step 3: We will use some Icons in our app so, we will install dependency for icon.

npm i react-native-vector-icons
npm i react-native-fontawesome

Project Structure:

Structure of the app

The updated dependencies in package.json file will look like:

"dependencies": {
    "mobx": "4.1.0",
    "mobx-react": "5.0.0",
    "@expo/vector-icons": "^13.0.0",
    "react-native-elements": "0.18.5",
    "expo-camera": "~13.4.4"
}

Example: Write the below source code into the App.js file.

Javascript

//App.js

import React, { useState, useEffect } from "react";
import {
    StyleSheet,
    Text,
    View,
    Button,
    Image,
    TouchableOpacity,
} from "react-native";
import { Camera } from "expo-camera";

export default function App() {
    const [hasCameraPermission, setHasCameraPermission] = useState(null);
    const [camera, setCamera] = useState(null);
    const [image, setImage] = useState(null);

    useEffect(() => {
        (async () => {
            const cameraStatus = await Camera.requestPermissionsAsync();
            setHasCameraPermission(cameraStatus.status === "granted");
        })();
    }, []);

    const takePicture = async () => {
        if (camera) {
            const data = await camera.takePictureAsync(null);
            setImage(data.uri);
        }
    };

    const retakePicture = () => {
        setImage(null);
    };

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

    return (
        <View style={styles.container}>
            <Text style={styles.Heading}>Camera App</Text>
            <Text style={styles.SubHeading}>By GeeksforGeeks</Text>
            <View style={styles.box}>
                {!image ? (
                    <View style={styles.cameraContainer}>
                        <Camera
                            ref={(ref) => setCamera(ref)}
                            style={styles.fixedRatio}
                            type={Camera.Constants.Type.back}
                            ratio={"1:1"}
                        />
                    </View>
                ) : (
                    <View style={styles.imageContainer}>
                        <Image
                            source={{ uri: image }}
                            style={styles.previewImage}
                        />
                        <TouchableOpacity
                            style={styles.retakeButton}
                            onPress={retakePicture}
                        >
                            <Text style={styles.retakeButtonText}>Retake</Text>
                        </TouchableOpacity>
                    </View>
                )}
            </View>
            {!image && (
                <TouchableOpacity
                    style={styles.takePictureButton}
                    onPress={takePicture}
                >
                    <Text style={styles.takePictureButtonText}>
                        Take Picture
                    </Text>
                </TouchableOpacity>
            )}
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    Heading: {
        fontSize: 40,
        fontWeight: "bold",
        padding: 20,
        color: "green",
    },
    SubHeading: {
        fontSize: 20,
        fontWeight: "bold",
        marginLeft: 120,
        marginTop: -20,
    },
    box: {
        flex: 0.7,
        borderWidth: 2,
        borderColor: "black",
        margin: 10,
        overflow: "hidden",
        borderRadius: 10,
    },
    cameraContainer: {
        flex: 1,
        aspectRatio: 1,
    },
    fixedRatio: {
        flex: 1,
        aspectRatio: 1,
    },
    takePictureButton: {
        backgroundColor: "blue",
        padding: 20,
        borderRadius: 10,
        alignSelf: "center",
        position: "absolute",
        bottom: 30,
    },
    takePictureButtonText: {
        color: "white",
        fontSize: 18,
    },
    imageContainer: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
    },
    previewImage: {
        flex: 1,
        width: "100%",
        resizeMode: "cover",
    },
    retakeButton: {
        position: "absolute",
        bottom: 30,
        backgroundColor: "red",
        padding: 20,
        borderRadius: 10,
    },
    retakeButtonText: {
        color: "white",
        fontSize: 18,
    },
});

Step to Run the Project:

Step 1: Depending on your operating system, type the following command

• For android:

React-native run-android

• For IOS:

React-native run-ios

Output:

Output of the app