Add Camera Screen

src/components/cameraComponent.js

 import React from 'react';
 import {
   View,
-  Image,
   StatusBar,
   StyleSheet,
-  TouchableOpacity,
+  Image,
+  Dimensions,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import Camera from 'react-native-camera';
@@ -12,13 +12,15 @@ import Camera from 'react-native-camera';
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    marginTop: 50,
   },
   preview: {
     flex: 1,
     justifyContent: 'flex-end',
     alignItems: 'center',
   },
+  previewPic: {
+    flex: 1,
+  },
   overlay: {
     position: 'absolute',
     padding: 16,
@@ -62,38 +64,28 @@ class CameraComponent extends React.Component {
         orientation: Camera.constants.Orientation.auto,
       },
       isRecording: false,
+      imageURI: '',
     };
     this.switchCam = this.switchCam.bind(this);
     this.recording = this.recording.bind(this);
+    this.takePicture = this.takePicture.bind(this);
   }
-  get typeIcon() {
-    let icon;
+  typeIcon= () => {
     const { back, front } = Camera.constants.Type;
     if (this.state.camera.type === back) {
-      Icon.getImageSource('camera_front', 20, 'white').then((source) => { console.info(source); icon = source.uri; });
-      console.info(icon);
+      return 'camera-front';
       // icon = require('./assets/ic_camera_rear_white.png');
     } else if (this.state.camera.type === front) {
-      Icon.getImageSource('camera_rear', 20, 'white').then((source) => { console.info(source); icon = source.uri; });
-      // icon = require('./assets/ic_camera_front_white.png');
-      console.info(icon);
+      return 'camera-rear';
     }
-
-    return icon;
   }
 
-  get camButton() {
-    let img;
+  camButton= () => {
     if (!this.state.isRecording) {
-      Icon.getImageSource('videocam', 36, 'white').then((source) => { console.info(source); img = source.uri; });
-      // img = require('./assets/ic_videocam_36pt.png');
-      console.info(img);
+      return 'videocam';
     } else {
-      // img = require('./assets/ic_stop_36pt.png');
-      Icon.getImageSource('stop', 36, 'white').then((source) => { console.info(source); img = source.uri; });
-      console.info(img);
+      return 'stop';
     }
-    return img;
   }
   switchCam() {
     let newType;
@@ -131,34 +123,47 @@ class CameraComponent extends React.Component {
       console.log('stopped ');
     }
   }
+  takePicture() {
+    const options = { mode: Camera.constants.CaptureMode.still };
+    this.camera.capture({ metadata: options })
+      .then((data) => { console.log(data); this.setState({ imageURI: data.path }); })
+      .catch(err => console.error(err));
+  }
 
   render() {
-    return (
-      <View style={styles.container}>
-        <StatusBar animated hidden={false} />
-        <Camera
-          ref={(cam) => {
-            this.camera = cam;
-          }}
-          style={styles.preview}
-          aspect={this.state.camera.aspect}
-          captureTarget={this.state.camera.captureTarget}
-          type={this.state.camera.type}
-          defaultTouchToFocus
-          mirrorImage={false}
-        />
-        <View style={[styles.overlay, styles.topOverlay]}>
-          <TouchableOpacity style={styles.typeButton} onPress={this.switchCam}>
-            <Image source={this.typeIcon} />
-          </TouchableOpacity>
-        </View>
-        <View style={[styles.overlay, styles.bottomOverlay]}>
-          <TouchableOpacity style={styles.captureButton} onPress={this.recording}>
-            <Image source={this.camButton} />
-          </TouchableOpacity>
+    if (this.state.imageURI === '') {
+      return (
+        <View style={styles.container}>
+          <StatusBar animated hidden />
+          <Camera
+            ref={(cam) => {
+              this.camera = cam;
+            }}
+            style={styles.preview}
+            aspect={this.state.camera.aspect}
+            captureTarget={this.state.camera.captureTarget}
+            type={this.state.camera.type}
+            defaultTouchToFocus
+            mirrorImage={false}
+          />
+          <View style={[styles.overlay, styles.topOverlay]}>
+            <Icon.Button name={this.typeIcon()} size={36} backgroundColor="transparent" onPress={this.switchCam} />
+            <Icon.Button name={this.typeIcon()} size={36} backgroundColor="transparent" onPress={this.switchCam} />
+          </View>
+          <View style={[styles.overlay, styles.bottomOverlay]}>
+            <Icon.Button name="photo-camera" size={48} backgroundColor="transparent" onPress={this.takePicture} />
+            <Icon.Button name={this.camButton()} size={48} backgroundColor="transparent" onPress={this.recording} />
+          </View>
         </View>
-      </View>
-    );
+      );
+    } else {
+      return (
+        <Image
+          style={{ height: Dimensions.get('window').height, width: Dimensions.get('window').width }}
+          source={{ uri: this.state.imageURI, isStatic: true }}
+        />
+      );
+    }
   }
 }
 export default CameraComponent;