title: How to snap pictures using expo react native camera?
body: <p>I have just started using React Native with Expo so I am kind of confused. So, I have made a camera component which I imported in the main screen. Everything looks good. But I can't take pictures. I cannot click the snap icon and save the image. Is there a component that I missed?
  I have only posted the <code>CameraComponent</code> class below.</p>
  
  <p><strong>Camera.js</strong></p>
  
  <pre><code>class CameraComponent extends Component {
  
    state = {
      hasCameraPermission: null,
      type: Camera.Constants.Type.back
    }
  
    async componentWillMount() {
      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, justifyContent: 'space-between' }}
              type={this.state.type}
            &gt;
              &lt;Header
                searchBar
                rounded
                style={{
                  position: 'absolute',
                  backgroundColor: 'transparent',
                  left: 0,
                  top: 0,
                  right: 0,
                  zIndex: 100,
                  alignItems: 'center'
                }}
              &gt;
                &lt;View style={{ flexDirection: 'row', flex: 4 }}&gt;
                  &lt;Ionicons name="md-camera" style={{ color: 'white' }} /&gt;
                  &lt;Item style={{ backgroundColor: 'transparent' }}&gt;
                    &lt;Icon name="ios-search" style={{ color: 'white', fontSize: 24, fontWeight: 'bold' }}&gt;&lt;/Icon&gt;
                  &lt;/Item&gt;
                &lt;/View&gt;
  
                &lt;View style={{ flexDirection: 'row', flex: 2, justifyContent: 'space-around' }}&gt;
                  &lt;Icon name="ios-flash" style={{ color: 'white', fontWeight: 'bold' }} /&gt;
                  &lt;Icon
                    onPress={() =&gt; {
                      this.setState({
                        type: this.state.type === Camera.Constants.Type.back ?                                        
                                              Camera.Constants.Type.front :
                                              Camera.Constants.Type.back
                      })
                    }}
                    name="ios-reverse-camera"
                    style={{ color: 'white', fontWeight: 'bold' }}
                  /&gt;
                &lt;/View&gt;
              &lt;/Header&gt;
  
              &lt;View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 30, marginBottom: 15, alignItems: 'flex-end' }}&gt;
                &lt;Ionicons name="ios-map" style={{ color: 'white', fontSize: 36 }}&gt;&lt;/Ionicons&gt;
                &lt;View&gt;&lt;/View&gt;
                &lt;View style={{ alignItems: 'center' }}&gt;
                  &lt;MaterialCommunityIcons name="circle-outline"   // This is the icon which should take and save image
                    style={{ color: 'white', fontSize: 100 }}
                  &gt;&lt;/MaterialCommunityIcons&gt;
                  &lt;Icon name="ios-images" style={{ color: 'white', fontSize: 36 }} /&gt;
                &lt;/View&gt;
              &lt;/View&gt;
            &lt;/Camera&gt;
          &lt;/View&gt;
        )
      }
    }
  }
  
  export default CameraComponent;
  </code></pre>
  
  <p>The icon in the center i;e circle icon should automatically take and save image.</p>