Trying to run PlantId API

Flourish/Gateways/PlantIdentification.js

@@ -0,0 +1,54 @@
+import React from "react";
+import fileUrl from "file-url";
+
+class PlantIdentification extends React.Component {
+    sendIdentification = (imageFilePath) => {
+        const files = [fileUrl(imageFilePath)];
+        const promises = files.map((file) => {
+            return new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.onload = (event) => {
+                    const res = event.target.result;
+                    console.log(res);
+                    resolve(res);
+                }
+                reader.readAsDataURL(file)
+            })
+        })
+
+        Promise.all(promises).then((base64files) => {
+            console.log(base64files)
+
+            const data = {
+                api_key: "ftgMU1minamhEWUAjMdlh2VVWMTYPGSkT5BioLhADeQNkqDBrN",
+                images: base64files,
+                modifiers: ["crops_fast", "similar_images"],
+                plant_language: "en",
+                plant_details: ["common_names",
+                    "url",
+                    "name_authority",
+                    "wiki_description",
+                    "taxonomy",
+                    "synonyms"]
+            };
+
+            fetch('https://api.plant.id/v2/identify', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data),
+            })
+                .then(response => response.json())
+                .then(data => {
+                    console.log('Success:', data);
+                    return(data)
+                })
+                .catch((error) => {
+                    console.error('Error:', error);
+                    return(error)
+                });
+        })
+
+    };
+}

Flourish/Tabs/PhotoTabScreen.js

@@ -2,11 +2,11 @@ import React, { useState, useEffect } from 'react';
 import { Button, View, Platform, StyleSheet, TouchableOpacity, Text, Image} from 'react-native';
 import * as ImagePicker from 'expo-image-picker';
 import { Camera} from 'expo-camera';
+const PlantId = require('../Gateways/PlantIdentification')
 
 export default function PhotoTabScreen() {
 
 
-
     const [hasPermission, setHasPermission] = useState(null);
     const [image, setImage] = useState(null);
 
@@ -40,6 +40,7 @@ export default function PhotoTabScreen() {
         console.log(result);
         if (!result.cancelled) {
             setImage(result.path);
+
         }};
 
         return (
@@ -87,15 +88,19 @@ export default function PhotoTabScreen() {
     return (
         <View style={{flex: 1, justifyContent: 'center', alignItems: 'stretch', }}>
             <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'} }>
-                <Camera style={{height: '100%', width: '100%', justifyContent: 'center', alignItems: 'center'}}/>
-                <View style={{flex: 1, flexDirection: 'row'}}>
-                    <View style = {{flex:3}}>
-                    <Library />
+                {image != null &&
+                    <View>
+                    <Camera style={{height: '100%', width: '100%', justifyContent: 'center', alignItems: 'center'}}/>
+                        <View style={{flex: 1, flexDirection: 'row'}}>
+                        <View style = {{flex:3}}>
+                        <Library />
+                        </View>
+                        <View style = {{flex:3}}>
+                        <TakePhoto />
+                        </View>
                     </View>
-                    <View style = {{flex:3}}>
-                    <TakePhoto />
                     </View>
-                </View>
+                }
             </View>
         </View>);
 }

Flourish/package.json

@@ -36,6 +36,7 @@
   "devDependencies": {
     "@babel/core": "~7.9.0",
     "@react-navigation/native": "^5.8.6",
+    "file-url": "^3.0.0",
     "react-native-vector-icons": "^7.1.0"
   },
   "private": true