Pictures from camera roll can now be selected and added to field notes

oss-slu · Sep 19, 2023 · 34fab2e · 34fab2e
1 parent dc57daf
commit 34fab2e
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 64 deletions.
diff --git a/lib/components/photoGallery.tsx b/lib/components/photoGallery.tsx
diff --git a/lib/components/photoScroller.tsx b/lib/components/photoScroller.tsx
@@ -4,11 +4,13 @@ import React, {
   forwardRef,
   useImperativeHandle,
 } from "react";
-import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+import { View, Text, StyleSheet, TouchableOpacity, Alert } from "react-native";
 import {
   launchCameraAsync,
+  launchImageLibraryAsync,
   MediaTypeOptions,
   requestCameraPermissionsAsync,
+  requestMediaLibraryPermissionsAsync
 } from "expo-image-picker";
 import { Ionicons } from "@expo/vector-icons";
 import { ResizeMode, Video } from "expo-av";
@@ -214,22 +216,58 @@ const PhotoScroller = forwardRef(
     };
 
     const handleNewMedia = async () => {
-      const { status } = await requestCameraPermissionsAsync();
-      if (status !== "granted") {
-        alert("Sorry, we need camera permissions to make this work!");
-        return;
-      }
-      const cameraResult = await launchCameraAsync({
-        mediaTypes: MediaTypeOptions.All,
-        allowsEditing: false,
-        aspect: [3, 4],
-        quality: 0.75,
-        videoMaxDuration: 300,
-      });
-
-      if (!cameraResult.canceled) {
-        handleImageSelection(cameraResult);
-      }
+      Alert.alert(
+        'Select Media',
+        'Choose the source for your media:',
+        [
+          {
+            text: 'Cancel',
+            style: 'cancel',
+          },
+          {
+            text: 'Take Photo',
+            onPress: async () => {
+              const { status } = await requestCameraPermissionsAsync();
+              if (status !== 'granted') {
+                alert('Sorry, we need camera permissions to make this work!');
+                return;
+              }
+              const cameraResult = await launchCameraAsync({
+                mediaTypes: MediaTypeOptions.All,
+                allowsEditing: false,
+                aspect: [3, 4],
+                quality: 0.75,
+                videoMaxDuration: 300,
+              });
+              if (!cameraResult.canceled) {
+                handleImageSelection(cameraResult);
+              }
+            },
+          },
+          {
+            text: 'Choose from Camera Roll',
+            onPress: async () => {
+              const { status } = await requestMediaLibraryPermissionsAsync();
+              if (status !== 'granted') {
+                alert('Sorry, we need camera roll permissions to make this work!');
+                return;
+              }
+              const galleryResult = await launchImageLibraryAsync({
+                mediaTypes: MediaTypeOptions.All,
+                allowsEditing: false,
+                aspect: [3, 4],
+                quality: 0.75,
+                videoMaxDuration: 300,
+              });
+              if (!galleryResult.canceled) {
+                // Pass the selected image to handleImageSelection
+                handleImageSelection(galleryResult);
+              }
+            },
+          },
+        ],
+        { cancelable: false }
+      );
     };
 
     function Footer({ imageIndex }: { imageIndex: number }) {

diff --git a/lib/screens/AddNoteScreen.tsx b/lib/screens/AddNoteScreen.tsx
@@ -194,6 +194,7 @@ const AddNoteScreen: React.FC<AddNoteScreenProps> = ({ navigation, route }) => {
         </TouchableOpacity>
       </View>
       <View style={{ backgroundColor: "white" }}>
+        <PhotoScroller active={viewMedia} newMedia={newMedia} setNewMedia={setNewMedia} />
         <PhotoScroller active={viewMedia} newMedia={newMedia} setNewMedia={setNewMedia} />
         {viewAudio && (
           <AudioContainer newAudio={newAudio} setNewAudio={setNewAudio} />

diff --git a/yarn-error.log b/yarn-error.log
@@ -1,5 +1,5 @@
 Arguments: 
-  /usr/local/bin/node /usr/local/Cellar/yarn/1.22.19/libexec/bin/yarn.js install
+  /usr/local/bin/node /usr/local/Cellar/yarn/1.22.19/libexec/bin/yarn.js add @types/react-native-image-picker --dev
 
 PATH: 
   /Users/Anddrew/anaconda3/bin:/Users/Anddrew/anaconda3/condabin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/share/dotnet:~/.dotnet/tools:/Library/Apple/usr/bin:/Library/Frameworks/Mono.framework/Versions/Current/Commands:/Applications/Xamarin Workbooks.app/Contents/SharedSupport/path-bin:/Users/Anddrew/.cargo/bin
@@ -14,8 +14,17 @@ Platform:
   darwin x64
 
 Trace: 
-  Error: getaddrinfo ENOTFOUND registry.yarnpkg.com
-      at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:107:26)
+  Error: https://registry.yarnpkg.com/@types%2freact-native-image-picker: Not found
+      at params.callback [as _callback] (/usr/local/Cellar/yarn/1.22.19/libexec/lib/cli.js:66145:18)
+      at self.callback (/usr/local/Cellar/yarn/1.22.19/libexec/lib/cli.js:140890:22)
+      at Request.emit (node:events:513:28)
+      at Request.<anonymous> (/usr/local/Cellar/yarn/1.22.19/libexec/lib/cli.js:141862:10)
+      at Request.emit (node:events:513:28)
+      at IncomingMessage.<anonymous> (/usr/local/Cellar/yarn/1.22.19/libexec/lib/cli.js:141784:12)
+      at Object.onceWrapper (node:events:627:28)
+      at IncomingMessage.emit (node:events:525:35)
+      at endReadableNT (node:internal/streams/readable:1359:12)
+      at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
 
 npm manifest: 
   {
@@ -70,6 +79,7 @@ npm manifest:
       "react-native": "^0.72.4",
       "react-native-draggable-flatlist": "^4.0.1",
       "react-native-gesture-handler": "~2.9.0",
+      "react-native-image-picker": "^7.0.0",
       "react-native-image-viewing": "^0.2.2",
       "react-native-keyboard-aware-scroll-view": "^0.9.5",
       "react-native-maps": "0.30.2",
@@ -7564,6 +7574,11 @@ Lockfile:
       lodash "^4.17.21"
       prop-types "^15.7.2"
 
+  react-native-image-picker@^7.0.0:
+    version "7.0.0"
+    resolved "https://registry.yarnpkg.com/react-native-image-picker/-/react-native-image-picker-7.0.0.tgz#0a03b777751e7ae3f1a7190ddf33a6c9c52db135"
+    integrity sha512-eiDj0mJUPivranQJX/pwkGf/Ar9QrQ+BF3y0D8frHU3S7U86IGOnOzHN7Wh6ofXEnafRij0TpmRCdrSebBMV+Q==
+
   react-native-image-viewing@^0.2.2:
     version "0.2.2"
     resolved "https://registry.yarnpkg.com/react-native-image-viewing/-/react-native-image-viewing-0.2.2.tgz#fb26e57d7d3d9ce4559a3af3d244387c0367242b"