title: take a picture with expo camera
body: <p>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: <a href="https://stackoverflow.com/questions/52707002/how-to-snap-pictures-using-expo-react-native-camera">How to snap pictures using expo react native camera?</a>.  </p>
  
  <p>I got my code mostly from the expo demo on their site (<a href="https://docs.expo.io/versions/latest/sdk/camera/#takepictureasync" rel="nofollow noreferrer">https://docs.expo.io/versions/latest/sdk/camera/#takepictureasync</a>) with the exception of I added a picture button I want to use to take a picture.  Can someone please help me out?  </p>
  
  <p>I have already tried working with the above-mentioned stack overflow help, and it isn't working.  </p>
  
  <pre><code>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 &lt;View /&gt;;
      } else if (hasCameraPermission === false) {
        return &lt;Text&gt;No access to camera&lt;/Text&gt;;
      } else {
        return (
          &lt;View style={{ flex: 1 }}&gt;
            &lt;Camera style={{ flex: 1 }} type={this.state.type}&gt;
              &lt;View
                style={{
                  flex: 1,
                  backgroundColor: 'transparent',
                  flexDirection: 'row',
                }}&gt;
                &lt;TouchableOpacity
                  style={{
                    flex: 0.1,
                    alignSelf: 'flex-end',
                    alignItems: 'center',
                  }}
                  onPress={() =&gt; {
                    this.setState({
                      type:
                        this.state.type === Camera.Constants.Type.back
                          ? Camera.Constants.Type.front
                          : Camera.Constants.Type.back,
                    });
                  }}&gt;
                  &lt;Text style={{ fontSize: 18, marginBottom: 10, color: 'white' }}&gt; Flip &lt;/Text&gt;
                &lt;/TouchableOpacity&gt;
                &lt;TouchableOpacity&gt; 
                &lt;Image source={require("./images/camera.jpeg")}
                style={{width: 100,
                height: 100}} /&gt; /* this is my button for taking the picture*/
                &lt;/TouchableOpacity&gt;
              &lt;/View&gt;
            &lt;/Camera&gt;
          &lt;/View&gt;
        );
      }
    }
  }
  </code></pre>
  
  <p>I just want to snap a picture and display to the console for now.</p>