CameraScreen.js

import React from 'react';
import { Text, View, TouchableOpacity, VibrationVibration, Dimensions } from 'react-native';
import { Camera, Permissions, FileSystem } from 'expo';
import { Ionicons, Entypo } from '@expo/vector-icons';

const { width, height } = Dimensions.get('window');


export default class CameraScreen extends React.Component {
  state = {
    hasCameraPermission: null,
    type: Camera.Constants.Type.back,
    flash: 'off',


  };

  async componentWillMount() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ hasCameraPermission: status === 'granted' });
  }

  componentDidMount(){
    FileSystem.makeDirectoryAsync(FileSystem.documentDirectory + 'photos')
    .catch( error => {
      console.log(error, 'Directory exists');
    })
  }

  flip(stateType){
    this.setState({
      type: stateType === Camera.Constants.Type.back
        ? Camera.Constants.Type.front
        : Camera.Constants.Type.back,
    });
  }

  toogleFlash(){
    this.setState({
      flash: flashModeOrder[this.state.flash]
    });
  }


  async takePicture(){
    if(this.camera){
      // this.camera.takePictureAsync()
      // .then( data => {
      //   FileSystem.moveAsync({
      //     from: data.uri,
      //     to: `${FileSystem.documentDirectory}photos/Photo_${this.state.photoId}.jpg`,
      //   })
      //   .then(() => {
      //     this.setState({
      //       photoId: this.state.photoId + 1,
      //     });
          Vibration.vibrate();
        // })
      // })
    }
  }


  render() {
    const { hasCameraPermission, type } = this.state;
    if (hasCameraPermission === null) {
      return <View />;
    } else if (hasCameraPermission === false) {
      return <Text>No access to camera</Text>;
    } else {
      return (
          <Camera 
             ref={ ref => { this.camera = ref } }
             style={{ 
               flex: 1,
               width: width
               }} 
             type={this.state.type}
             flashMode={ this.state.flash }
             >
              {/* <TouchableOpacity
                style={{
                  flex: 0.2,
                  alignSelf: 'flex-end',
                  alignItems: 'center',
                }}
                onPress={() => {
                  this.flip(type);
                }}>
                
                
                <Ionicons name="ios-reverse-camera-outline" size={42}  
                  style={{ marginBottom: 10, color: 'white' }} 
                  />
              </TouchableOpacity>




              <TouchableOpacity
                style={{
                  flex: 0.6,
                  alignSelf: 'flex-end',
                  alignItems: 'center',
                  justifyContent: 'flex-end'
                }}
                onPress={() => {
                  this.takePicture()
                }}>
                
                
                <Entypo name="circle" size={100}  
                  style={{ marginBottom: 10, color: 'white' }} 
                  />
              </TouchableOpacity> 


              <TouchableOpacity
                style={{
                  flex: 0.6,
                  alignSelf: 'flex-end',
                  alignItems: 'center',
                  justifyContent: 'flex-end'
                }}
                onPress={() => {
                  this.toogleFlash()
                }}>
                
                
                <Entypo name="flash" size={42}  
                  style={{ marginBottom: 10, color: 'white' }} 
                  />
              </TouchableOpacity>  */}
    
          </Camera>
      );
    }
  }
}