Onboarding permissions fix

android/app/src/main/AndroidManifest.xml

@@ -4,6 +4,7 @@
   <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
   <uses-permission android:name="android.permission.CAMERA"/>
   <uses-permission android:name="android.permission.RECORD_AUDIO"/>
+  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
   <uses-permission android:name="com.android.vending.BILLING" />
   <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="false" android:theme="@style/AppTheme">
     <meta-data android:name="com.google.android.geo.API_KEY" android:value="@string/GOOGLE_MAPS_API_KEY"/>

ios/Zentacle.xcodeproj/project.pbxproj

@@ -546,15 +546,15 @@
 				CODE_SIGN_ENTITLEMENTS = Zentacle/Zentacle.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 71;
+				CURRENT_PROJECT_VERSION = 73;
 				DEVELOPMENT_TEAM = 9C8EQ3DGNG;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Zentacle/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 2.0.4;
+				MARKETING_VERSION = 2.0.6;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -580,14 +580,14 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 71;
+				CURRENT_PROJECT_VERSION = 73;
 				DEVELOPMENT_TEAM = 9C8EQ3DGNG;
 				INFOPLIST_FILE = Zentacle/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 2.0.4;
+				MARKETING_VERSION = 2.0.6;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",

package.json

@@ -50,7 +50,7 @@
     "react-native-linear-gradient": "^2.5.6",
     "react-native-maps": "^0.30.1",
     "react-native-modal": "^13.0.0",
-    "react-native-permissions": "^3.2.0",
+    "react-native-permissions": "^3.6.1",
     "react-native-purchases": "^5.0.0-beta.1",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-screens": "^3.10.1",

src/Components/ui/ImageFormComponent.tsx

@@ -8,11 +8,13 @@ import {
   ImageStyle,
   Text,
   Pressable,
+  Platform,
 } from 'react-native';
 import type { FieldRenderProps } from 'react-final-form';
 import type { FunctionComponent } from 'react';
 import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
 import { useTranslation } from 'react-i18next';
+import { PERMISSIONS, RESULTS, check, request } from 'react-native-permissions';
 
 import ImagePickerModal from '_components/reusables/ImagePickerModal';
 import UploadAvatarIcon from '_assets/UploadAvatarIcon.png';
@@ -51,33 +53,118 @@ const ImageFormComponent: FunctionComponent<ImageFormComponentProps> = ({
   const closeCameraModal = () => {
     setCameraModalVisibility(false);
   };
+
+  const checkPhotoLibraryPermissions = async (): Promise<boolean> => {
+    if (Platform.OS === 'ios') {
+      const photo_library_permissions = await check(
+        PERMISSIONS.IOS.PHOTO_LIBRARY,
+      );
+      if (photo_library_permissions === RESULTS.GRANTED) {
+        // proceed
+        return true;
+      } else {
+        const request_photo_library_permissions = await request(
+          PERMISSIONS.IOS.PHOTO_LIBRARY,
+        );
+
+        if (request_photo_library_permissions === RESULTS.GRANTED) {
+          return true;
+        }
+        return false;
+      }
+    } else {
+      const photo_library_permissions = await check(
+        PERMISSIONS.ANDROID.READ_MEDIA_IMAGES,
+      );
+      if (photo_library_permissions === RESULTS.GRANTED) {
+        // proceed
+        return true;
+      } else {
+        const request_photo_library_permissions = await request(
+          PERMISSIONS.ANDROID.READ_MEDIA_IMAGES,
+        );
+
+        if (request_photo_library_permissions === RESULTS.GRANTED) {
+          // take image
+          return true;
+        }
+        return false;
+      }
+    }
+  };
+
+  const checkCameraPermissions = async (): Promise<boolean> => {
+    if (Platform.OS === 'ios') {
+      const camera_permissions = await check(PERMISSIONS.IOS.CAMERA);
+      if (camera_permissions === RESULTS.GRANTED) {
+        // proceed
+        return true;
+      } else {
+        const request_camera_permissions = await request(
+          PERMISSIONS.IOS.CAMERA,
+        );
+
+        if (request_camera_permissions === RESULTS.GRANTED) {
+          return true;
+        }
+        return false;
+      }
+    } else {
+      const camera_permissions = await check(PERMISSIONS.ANDROID.CAMERA);
+      if (camera_permissions === RESULTS.GRANTED) {
+        // proceed
+        return true;
+      } else {
+        const request_camera_permissions = await request(
+          PERMISSIONS.ANDROID.CAMERA,
+        );
+
+        if (request_camera_permissions === RESULTS.GRANTED) {
+          // take image
+          return true;
+        }
+        return false;
+      }
+    }
+  };
+
   const handleLaunchCamera = async () => {
-    const result = await launchCamera({
-      mediaType: 'photo',
-    });
-
-    closeCameraModal();
-    if (result.assets && result.assets[0].uri) {
-      onChange({
-        uri: result.assets[0].uri,
-        type: result.assets[0].type,
-        name: result.assets[0].fileName,
+    const cameraPermissions = await checkCameraPermissions();
+    if (cameraPermissions) {
+      const result = await launchCamera({
+        mediaType: 'photo',
       });
+
+      closeCameraModal();
+      if (result.assets && result.assets[0].uri) {
+        onChange({
+          uri: result.assets[0].uri,
+          type: result.assets[0].type,
+          name: result.assets[0].fileName,
+        });
+      }
+    } else {
+      closeCameraModal();
     }
   };
 
   const handleLaunchPhotoLibrary = async () => {
-    const result = await launchImageLibrary({
-      mediaType: 'photo',
-    });
-
-    closeCameraModal();
-    if (result.assets && result.assets[0].uri) {
-      onChange({
-        uri: result.assets[0].uri,
-        type: result.assets[0].type,
-        name: result.assets[0].fileName,
+    const photoLibraryPermissions = await checkPhotoLibraryPermissions();
+    if (photoLibraryPermissions) {
+      const result = await launchImageLibrary({
+        mediaType: 'photo',
       });
+
+      closeCameraModal();
+      if (result.assets && result.assets[0].uri) {
+        onChange({
+          uri: result.assets[0].uri,
+          type: result.assets[0].type,
+          name: result.assets[0].fileName,
+        });
+      }
+    } else {
+      closeCameraModal();
     }
   };
 

src/Navigation/Onboarding.tsx

@@ -8,7 +8,6 @@ import { selectUser } from '_redux/slices/user';
 
 import ChooseUserName from '_screens/Onboarding/ChooseUserName';
 import ChooseAvatar from '_screens/Onboarding/ChooseAvatar';
-import CameraPermissions from '_screens/Onboarding/CameraPermissions';
 import LocationPermissions from '_screens/Onboarding/LocationPermissions';
 import MeasurementType from '_screens/Onboarding/MeasurementType';
 import ActivityType from '_screens/Onboarding/ActivityType';
@@ -23,9 +22,7 @@ const OnboardingNavigator: React.FC = () => {
     createNativeStackNavigator<OnboardingStackParamList>();
   return (
     <OnboardingStack.Navigator
-      initialRouteName={
-        userHasUsername ? 'CameraPermissions' : 'ChooseUserName'
-      }
+      initialRouteName={userHasUsername ? 'ChooseAvatar' : 'ChooseUserName'}
       screenOptions={{
         headerShown: false,
       }}>
@@ -34,10 +31,6 @@ const OnboardingNavigator: React.FC = () => {
         component={ChooseUserName}
       />
       <OnboardingStack.Screen name="ChooseAvatar" component={ChooseAvatar} />
-      <OnboardingStack.Screen
-        name="CameraPermissions"
-        component={CameraPermissions}
-      />
       <OnboardingStack.Screen
         name="LocationPermissions"
         component={LocationPermissions}