camera.js

preview photo

import React, { useState } from "react";
import { StyleSheet, TouchableOpacity, Text, ImageBackground } from "react-native";
import { RNCamera } from "react-native-camera";

export default Camera = () => {
  const [imageUri, setImageUri] = useState(null);
  takePicture = async () => {
    try {
      if (this.camera) {
        const options = {
          quality: 0.5,
          base64: true,
          forceUpOrientation: true,
          fixOrientation: true
        };
        const { uri } = await this.camera.takePictureAsync(options);
        setImageUri(uri);
      }
    } catch (err) {
      alert(err.message);
    }
  }
  return (
    imageUri ?
      <ImageBackground style={styles.preview} source={{ uri: imageUri }}>
      </ImageBackground>
      :
      <RNCamera
        ref={camera => { this.camera = camera; }}
        style={styles.camera}
        type={RNCamera.Constants.Type.front}
        autoFocus={RNCamera.Constants.AutoFocus.on}
        flashMode={RNCamera.Constants.FlashMode.off}
        permissionDialogTitle={"Permission to use camera"}
        permissionDialogMessage={"We need your permission to use your camera phone"}
      >
        <TouchableOpacity onPress={takePicture} style={styles.button}>
          <Text>PICTURE</Text>
        </TouchableOpacity>
      </RNCamera>
  )
}
const styles = StyleSheet.create({
  camera: {
    flex: 1
  },
  button: {
    alignSelf: "center",
    backgroundColor: "blue",
    color: "#fff"
  },
  preview: {
    width: "100%",
    height: "100%",
    flex: 1
  }
});