React native access front camera - react-native

Question

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.
Using this code, the back camera is getting accessed but i want to access the front camera.
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

Answer 1

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

Answer 2

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.