take a picture with expo camera - react-native

Question

I am trying to take a picture for a react-native expo application, but I can't figure it out and the following answer on stack overflow isn't helping: How to snap pictures using expo react native camera?.
I got my code mostly from the expo demo on their site (https://docs.expo.io/versions/latest/sdk/camera/#takepictureasync) with the exception of I added a picture button I want to use to take a picture. Can someone please help me out?
I have already tried working with the above-mentioned stack overflow help, and it isn't working.
import React from 'react';
import { Text, View, TouchableOpacity, Image } from 'react-native';
import * as Permissions from 'expo-permissions';
import { Camera } from 'expo-camera';
export default class CameraExample extends React.Component {
state = {
hasCameraPermission: null,
type: Camera.Constants.Type.back,
};
async componentDidMount() {
const { status } = await Permissions.askAsync(Permissions.CAMERA);
this.setState({ hasCameraPermission: status === 'granted' });
}
render() {
const { hasCameraPermission } = this.state;
if (hasCameraPermission === null) {
return <View />;
} else if (hasCameraPermission === false) {
return <Text>No access to camera</Text>;
} else {
return (
<View style={{ flex: 1 }}>
<Camera style={{ flex: 1 }} type={this.state.type}>
<View
style={{
flex: 1,
backgroundColor: 'transparent',
flexDirection: 'row',
}}>
<TouchableOpacity
style={{
flex: 0.1,
alignSelf: 'flex-end',
alignItems: 'center',
}}
onPress={() => {
this.setState({
type:
this.state.type === Camera.Constants.Type.back
? Camera.Constants.Type.front
: Camera.Constants.Type.back,
});
}}>
<Text style={{ fontSize: 18, marginBottom: 10, color: 'white' }}> Flip </Text>
</TouchableOpacity>
<TouchableOpacity>
<Image source={require("./images/camera.jpeg")}
style={{width: 100,
height: 100}} /> /* this is my button for taking the picture*/
</TouchableOpacity>
</View>
</Camera>
</View>
);
}
}
}
I just want to snap a picture and display to the console for now.

Answer 1

in this part of your code, you need set a onPress action to "snap" a picture.
My suggestion is simple as to add a
<TouchableOpacity onPress={() => takePicture()}>
<Image source={require("./images/camera.jpeg")} style={{width: 100, height: 100}} />
</TouchableOpacity>
And add the Async function to receive the actual picture:
const takePicture = async () => {
if (this.camera) {
const options = {quality: 1, base64: true};
const data = await this.camera.takePictureAsync(options);
console.log(data);
}
};
Go to your terminal and you have there your log with Image BASE64 Image.
I hope this helped you :)