Create a Camera App using React-Native

//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,
	},
});