Cleanup code, Fix gallery icon bug

2 files changed, 25 insertions, 7 deletions

diff --git a/src/components/camera/GalleryIcon.tsx b/src/components/camera/GalleryIcon.tsx
index ab226323..c49ace7d 100644
--- a/src/components/camera/GalleryIcon.tsx
+++ b/src/components/camera/GalleryIcon.tsx
@@ -1,6 +1,6 @@
 import {useNavigation} from '@react-navigation/native';
 import React from 'react';
-import {Image, Text, TouchableOpacity} from 'react-native';
+import {Image, Text, TouchableOpacity, View} from 'react-native';
 import {ScreenType} from '../../types';
 import {navigateToImagePicker} from '../../utils/camera';
 import {styles} from './styles';
@@ -8,7 +8,7 @@ import {styles} from './styles';
 interface GalleryIconProps {
   screenType: ScreenType;
   title: string;
-  mostRecentPhoto: string;
+  mostRecentPhotoUri: string;
 }
 
 /*
@@ -18,20 +18,22 @@ interface GalleryIconProps {
 export const GalleryIcon: React.FC<GalleryIconProps> = ({
   screenType,
   title,
-  mostRecentPhoto,
+  mostRecentPhotoUri,
 }) => {
   const navigation = useNavigation();
   return (
     <TouchableOpacity
       onPress={() => navigateToImagePicker(navigation, screenType, title)}
       style={styles.saveButton}>
-      {mostRecentPhoto !== '' && (
+      {mostRecentPhotoUri !== '' ? (
         <Image
-          source={{uri: mostRecentPhoto}}
+          source={{uri: mostRecentPhotoUri}}
           width={40}
           height={40}
           style={styles.galleryIcon}
         />
+      ) : (
+        <View style={styles.galleryIconEmpty} />
       )}
       <Text style={styles.saveButtonLabel}>Gallery</Text>
     </TouchableOpacity>
diff --git a/src/components/camera/styles.tsx b/src/components/camera/styles.tsx
index e810ffda..33b47cc4 100644
--- a/src/components/camera/styles.tsx
+++ b/src/components/camera/styles.tsx
@@ -32,6 +32,22 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     borderRadius: 30,
   },
-  galleryIcon: {borderWidth: 2, borderColor: 'white', borderRadius: 5},
-  flashIcon: {zIndex: 2},
+  galleryIcon: {
+    borderWidth: 2,
+    borderColor: 'white',
+    borderRadius: 5,
+    width: 40,
+    height: 40,
+  },
+  galleryIconEmpty: {
+    borderWidth: 2,
+    borderColor: 'white',
+    borderRadius: 5,
+    width: 40,
+    height: 40,
+    backgroundColor: 'grey',
+  },
+  flashIcon: {
+    zIndex: 2,
+  },
 });