Camera App in React Native

Today, I'm going to show how to create a simple application using react native that lets the user access camera API to click a picture and display it on the screen.

Start a new React Native project.

npx creact-expo-app camera-app

This will create a folder named 'camera-app' containing all the code required to create a native application.

Next import the required libraries.

import React, { useState, useEffect } from 'react';
import { View, Text, Button, Image, StyleSheet } from 'react-native';
import * as ImagePicker from 'expo-image-picker';

Create a functional component named CameraApp;

const CameraApp = () => {
  const [image, setImage] = useState(null);

  const takePicture = async () => {
    const photo = await ImagePicker.launchCameraAsync({ allowsEditing: true });

    if (!photo.cancelled) {
      setImage(photo.uri);
    }
  };

  return (
    <View style={styles.container}>
      <Button title="Take Picture" onPress={takePicture} />
      {image && <Image source={{ uri: image }} style={styles.image} />}
    </View>
  );
};

Add styles by creating a new stylesheet method. Name it as styles.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 300,
    height: 300,
    marginTop: 20,
  },
});

export default CameraApp;

Run this application by opening the Expo Snack environment attached below.