successfully render image after confirming

package.json

@@ -9,6 +9,7 @@
     "eject": "expo eject"
   },
   "dependencies": {
+    "base-64": "^0.1.0",
     "expo": "^33.0.0",
     "react": "16.8.3",
     "react-dom": "^16.8.6",

screens/ConfirmScreen.js

@@ -1,6 +1,17 @@
 import React from 'react';
+import {decode as atob, encode as btoa} from 'base-64';
 import { StyleSheet, Text, View, TouchableOpacity, Dimensions, Image, Button } from 'react-native';
 
+
+function arrayBufferToBase64(buffer) {
+  var binary = '';
+  var bytes = [].slice.call(new Uint8Array(buffer));
+
+  bytes.forEach((b) => binary += String.fromCharCode(b));
+
+  return window.btoa(binary);
+};
+
 class ConfirmScreen extends React.PureComponent {
   static navigationOptions = {
     title: 'Select Region to Scan',
@@ -17,12 +28,32 @@ class ConfirmScreen extends React.PureComponent {
     super(props);
 
     this.state = {
-      coordinates: null
+      grayscale: null
     }
   }
 
-  processImage = () => {
-    console.log(photo);
+  processImage = (photo) => {
+
+    fetch('https://tranquil-atoll-18580.herokuapp.com/scan', {
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      }, 
+      method: 'POST',
+      body: JSON.stringify({
+        'image': photo.base64
+      })
+    })
+    .then(response => response.json())
+    .then((response) => {
+
+      console.log(response);
+
+      const image = response.image;
+
+      this.props.navigation.navigate('Result', {image});
+    })
+    .catch(error => console.log(error));
   }
 
   render() {
@@ -38,7 +69,7 @@ class ConfirmScreen extends React.PureComponent {
           }} 
           source={{uri}} />
           <TouchableOpacity style={styles.confirmBtn}>
-            <Button style={{padding: "2.5 5"}} title="Confirm Selection" onPress={this.processImage} />
+            <Button style={{padding: "2.5 5"}} title="Confirm Selection" onPress={this.processImage(photo)} />
           </TouchableOpacity>
       </View>
     );

screens/HomeScreen.js

@@ -36,7 +36,7 @@ class HomeScreen extends React.PureComponent {
 
   snap = async() => {
     if(this.camera) {
-      let photo  = await this.camera.takePictureAsync();
+      let photo  = await this.camera.takePictureAsync({ base64: true});
       this.props.navigation.navigate('Confirmation', {photo});
     }
   }

screens/Results.js

@@ -1,16 +1,28 @@
 import React from 'react';
-import { StyleSheet, Text, View, TouchableOpacity, Dimensions } from 'react-native';
+import { StyleSheet, Image, View, TouchableOpacity, Dimensions } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 
-export default ResultImage = ({ snap }) => (
-  <View style={styles.buttonContainer}>
-    <TouchableOpacity
-      style={styles.cameraIcon}
-      onPress={snap}>
-      <Text style={styles.text}><MaterialCommunityIcons name="circle-slice-8" size={48} color="white"/></Text>
-    </TouchableOpacity>
-  </View>
-);
+
+class Result extends React.PureComponent{
+  constructor(props){
+    super(props);
+  }
+
+  render() {
+    const { navigation } = this.props;
+    const photo = navigation.getParam('image', {});
+    return(
+      <View style={styles.buttonContainer}>
+        <Image 
+        source={{uri: `data:image/jpeg;base64,${photo}`}} 
+        style={{flex:1, width: Dimensions.get('window').width, height: Dimensions.get('window').width * 4 / 3}} 
+        resizeMode="contain" />
+      </View>
+    )
+  }
+}
+
+export default Result
 
 const styles = StyleSheet.create({
   cameraIcon: {