CODEWITHSUNDEEP
react-native
Kishan
Kishan

Reputation: 13

React native access front camera

I am using "react-native camera" library to access the camera. So here is my code . 

 import React, { Component } from "react";
 import {
  AppRegistry,
  Dimensions,
  StyleSheet,
  Text,
  TouchableHighlight,
   View
 } from "react-native";
import Camera from "react-native-camera";
import { RNCamera, FaceDetector } from "react-native-camera";

 export default class App extends Component<Props> {
 render() {
   return (
  <View style={styles.container}>
    <Camera
      ref={cam => {
        this.camera = cam;
      }}
      style={styles.preview}
      aspect={Camera.constants.Aspect.fill}
    >
      <Text style={styles.capture} onPress= 
   {this.takePicture.bind(this)}>
        take photo
      </Text>
    </Camera>
  </View>
   );
 }

 takePicture() {
   const options = {};
   //options.location = ...
   this.camera
  .capture({ metadata: options })
  .then(data => console.log(data))
  .catch(err => console.error(err));
  }
  }

const styles = StyleSheet.create({
 container: {
 flex: 1,
 flexDirection: "row"
},
preview: {
  flex: 1,
  justifyContent: "flex-end",
  alignItems: "center"
},
 capture: {
  flex: 0,
  backgroundColor: "#fff",
  borderRadius: 5,
  color: "#000",
  padding: 10,
  margin: 40
  }
});

Here i am able to access the back camera and whenever i am clicking on take photo, it capture image and show that instantly. But i need two changes here.

  1. Using this code, the back camera is getting accessed but i want to access the front camera.

  2. Also, the image i captured, should not be shown instantly. I want a button , and whenever i click on that button, it navigates to different page and show all the images there.

Is it possible in react native ?? If yes, then please suggest me the changes that i require to make in this code

Upvotes: 1

Views: 5778

Answers (2)

Isaac
Isaac

Reputation: 12894

To answer your second question specifically, you have two options.

A) After taken the photo, store it as base64 uri into your state or redux, then whenever you need it, display the base64 uri as a image.

B) Utilize the package react-native-fs to access file system, storing the taken photo in iOS as cache, and retrieving it whenever needed.

Based on personal experience dealing with it, I would recommend option A

Upvotes: 2

SmoggeR_js
SmoggeR_js

Reputation: 3160

To switch your camera to back camera to front camera there exists a prop in Camera component called mirrorMode, if it is true it will show the front camera, otherwise, it will be the default mode that is back camera:

    <Camera
      ...
      mirrorImage={this.state.mirrorMode}
    >

You can create a state and a button that change the state to switch between that 2 cameras.

Upvotes: 1

Related Questions