Allow Users to select Photo from Camera Roll to Field Notes

__tests__/AddNoteScreen.test.tsx

@@ -3,13 +3,42 @@ import Adapter from 'enzyme-adapter-react-16';
 
 Enzyme.configure({ adapter: new Adapter() });
 
-import React from 'react';
+import React, { SetStateAction, useState } from 'react';
+import { TouchableOpacity, Alert } from 'react-native';
 import { shallow } from "enzyme";
+import { requestMediaLibraryPermissionsAsync, launchImageLibraryAsync } from "expo-image-picker";
+import handleNewMedia from "../lib/components/photoScroller";
+
 import AddNoteScreen from '../lib/screens/AddNoteScreen';
+import PhotoScroller from "../lib/components/photoScroller";
+import { Media } from '../lib/models/media_class';
+
 
 describe("AddNoteScreen", () => {
   it("renders without crashing", () => {
     const wrapper = shallow(<AddNoteScreen />);
     expect(wrapper).toMatchSnapshot();
   });
 });
+
+describe('PhotoScroller\'s handleNewMedia method', () => {
+  it('Show an alert when pressed with Take a photo or Choose a photo from camera roll', () => {
+
+    const wrapper = shallow(<PhotoScroller newMedia={[]} setNewMedia={function (value: SetStateAction<Media[]>): void {
+      throw new Error('Function not implemented.');
+    } } active={true} />);
+    const button = wrapper.find('[testID="photoScrollerButton"]');
+
+    const mockAlert = jest.spyOn(Alert, 'alert');
+    button.props().onPress();
+
+    wrapper.find(TouchableOpacity).prop('onPress')();
+
+    expect(mockAlert).toHaveBeenCalledWith(
+      'Select Media',
+      'Choose the source for your media:',
+      expect.any(Array),
+      { cancelable: false }
+    );
+  });
+});

app.json

@@ -17,24 +17,22 @@
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "beta.edu.slu.cs.oss.lrda",
-      "config": {
-        "googleMapsApiKey": ""
-      },
-      "buildNumber" : "5"
+      "buildNumber": "5"
     },
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
-      },
-      "config": {
-        "googleMaps": {
-          "apiKey": "AIzaSyBwi5lzjEmTzGZPRFwx6dIZK7EOwV6VEKw"
-        }
       }
     },
     "web": {
       "favicon": "./assets/favicon.png"
+    },
+    "runtimeVersion": {
+      "policy": "sdkVersion"
+    },
+    "updates": {
+      "url": "https://u.expo.dev/86ab2744-3978-4375-95c3-ff3918037148"
     }
   }
 }

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 }) {
@@ -337,6 +375,7 @@ const PhotoScroller = forwardRef(
           {playing && renderImageView()}
           <View style={{ flexDirection: "row" }}>
             <TouchableOpacity
+              testID="photoScrollerButton"
               style={[
                 PhotoStyles.image,
                 {

lib/screens/AddNoteScreen.tsx

@@ -145,6 +145,7 @@ const AddNoteScreen: React.FC<AddNoteScreenProps> = ({ navigation, route }) => {
             setIsLocation(false);
             setIsTime(false);
           }}
+          testID="images-icon"
         >
           <Ionicons name="images-outline" size={30} color="black" />
         </TouchableOpacity>

package.json

@@ -50,6 +50,7 @@
     "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",