add photo button

Route.tsx

@@ -275,7 +275,7 @@ const Route = () => {
               component={CountryViewScreen}
               options={regionViewScreenOptions}
             />
-
+            <ScreenStack.Screen name={NAVIGATION_PAGES.ADD_PHOTO} component={AddPhotoScreen} />
             <ScreenStack.Screen name={NAVIGATION_PAGES.PROFILE_TAB} component={ProfileScreen} />
             <ScreenStack.Screen
               name={NAVIGATION_PAGES.EDIT_PERSONAL_INFO}
@@ -285,7 +285,6 @@ const Route = () => {
             <ScreenStack.Screen
               name={NAVIGATION_PAGES.MY_FRIENDS}
               component={MyFriendsScreen}
-              options={regionViewScreenOptions}
             />
           </ScreenStack.Navigator>
         )}
@@ -388,7 +387,6 @@ const Route = () => {
             <ScreenStack.Screen
               name={NAVIGATION_PAGES.MY_FRIENDS}
               component={MyFriendsScreen}
-              options={regionViewScreenOptions}
             />
           </ScreenStack.Navigator>
         )}

src/screens/InAppScreens/MapScreen/RegionViewScreen/index.tsx

@@ -12,6 +12,7 @@ import {
 import { CommonActions, useFocusEffect } from '@react-navigation/native';
 import { Colors } from 'src/theme';
 import { styles as ButtonStyles } from 'src/components/RegionPopup/style';
+import * as ImagePicker from 'expo-image-picker';
 
 import { usePostSetToggleItem } from '@api/series';
 import { ScrollView } from 'react-native-gesture-handler';
@@ -36,6 +37,8 @@ import EditSvg from 'assets/icons/travels-screens/pen-to-square.svg';
 import CalendarSvg from 'assets/icons/travels-screens/calendar.svg';
 import RotateSvg from 'assets/icons/travels-screens/rotate.svg';
 import MapSvg from 'assets/icons/travels-screens/map-location.svg';
+import AddImgSvg from 'assets/icons/travels-screens/add-img.svg';
+import { useGetTempQuery } from '@api/photos';
 
 const RegionViewScreen: FC<Props> = ({ navigation, route }) => {
   const regionId = route.params?.regionId;
@@ -67,6 +70,7 @@ const RegionViewScreen: FC<Props> = ({ navigation, route }) => {
     years: [],
     id: regionId
   });
+  const { data: tempData, refetch } = useGetTempQuery(token, token ? true : false);
 
   const {
     handleUpdateNM: updateNM,
@@ -271,6 +275,59 @@ const RegionViewScreen: FC<Props> = ({ navigation, route }) => {
     });
   };
 
+  const handleImagePick = async () => {
+    setIsLoading(true);
+
+    const photosData = {
+      id: regionId,
+      country: name[0],
+      name: name[1],
+      flag: '',
+      nm: type === 'nm',
+      dare: type === 'dare',
+      photos: []
+    };
+
+    await refetch().then(async (temp) => {
+      if (temp.data?.photos && temp.data?.photos.length > 0) {
+        setIsLoading(false);
+        navigation.navigate(
+          ...([
+            NAVIGATION_PAGES.ADD_PHOTO,
+            {
+              data: photosData,
+              images: [],
+              allRegions: [],
+              tempData: temp.data.photos
+            }
+          ] as never)
+        );
+      } else {
+        setIsLoading(false);
+
+        let result = await ImagePicker.launchImageLibraryAsync({
+          mediaTypes: ImagePicker.MediaTypeOptions.Images,
+          quality: 1,
+          allowsMultipleSelection: true,
+          exif: true
+        });
+
+        if (!result.canceled) {
+          navigation.navigate(
+            ...([
+              NAVIGATION_PAGES.ADD_PHOTO,
+              {
+                data: photosData,
+                images: result.assets,
+                allRegions: []
+              }
+            ] as never)
+          );
+        }
+      }
+    });
+  };
+
   return (
     <View style={styles.container}>
       <TouchableOpacity
@@ -333,6 +390,13 @@ const RegionViewScreen: FC<Props> = ({ navigation, route }) => {
             <Text style={styles.emptyImageText}>No image available at this location</Text>
           </View>
         )}
+        {regionData?.visited ? (
+          <TouchableOpacity onPress={handleImagePick} style={styles.addPhotoButton}>
+            <View style={styles.chevronWrapper}>
+              <AddImgSvg fill={Colors.WHITE} width={20} height={20} />
+            </View>
+          </TouchableOpacity>
+        ) : null}
 
         <View style={styles.wrapper}>
           <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>

src/screens/InAppScreens/MapScreen/RegionViewScreen/styles.tsx

@@ -14,7 +14,7 @@ export const styles = StyleSheet.create({
     borderRadius: 21,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: 'rgba(15, 63, 79, 0.6)'
+    backgroundColor: 'rgba(0, 0, 0, 0.3)'
   },
   backButton: {
     position: 'absolute',
@@ -202,4 +202,14 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     zIndex: 2
   },
+  addPhotoButton: {
+    position: 'absolute',
+    width: 50,
+    height: 50,
+    top: 160,
+    right: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 2
+  },
 });

src/screens/InAppScreens/TravelsScreen/AddPhotoScreen/index.tsx

@@ -191,7 +191,7 @@ const AddPhotoScreen = ({ route }: { route: any }) => {
     };
     saveTemp(tempData, {
       onSuccess: () => {
-        data ? navigation.pop(2) : navigation.goBack();
+        data && allRegions?.length ? navigation.pop(2) : navigation.goBack();
       }
     });
   };