take a picture with expo camera

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.

score 3 · Answer 1 · answered Dec 07 '19 at 13:30

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 :)

take a picture with expo camera

1 Answers1