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:
Prerequisites:
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:
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 w3wiki</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: