feat: improve UX of location permission requests

dev-client/package.json

@@ -39,6 +39,7 @@
     "expo-dev-client": "~4.0.19",
     "expo-image-manipulator": "~12.0.5",
     "expo-image-picker": "~15.0.7",
+    "expo-location": "~17.0.1",
     "expo-media-library": "~16.0.4",
     "expo-screen-orientation": "~7.0.5",
     "expo-sensors": "~13.0.9",

dev-client/src/App.tsx

@@ -25,8 +25,7 @@
 // react-native-get-random-values needed for uuid - https://github.com/uuidjs/uuid#react-native--expo
 import 'react-native-get-random-values';
 
-import {useEffect, useState} from 'react';
-import {LogBox, PermissionsAndroid} from 'react-native';
+import {LogBox} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import {Provider} from 'react-redux';
 
@@ -37,6 +36,7 @@ import {NativeBaseProvider} from 'native-base';
 import 'terraso-mobile-client/translations';
 import 'terraso-mobile-client/config';
 
+import {useState} from 'react';
 import {PaperProvider, Portal} from 'react-native-paper';
 import {enableFreeze} from 'react-native-screens';
 
@@ -48,7 +48,6 @@ import {APP_CONFIG} from 'terraso-mobile-client/config';
 import {GeospatialProvider} from 'terraso-mobile-client/context/GeospatialContext';
 import {HeaderHeightContext} from 'terraso-mobile-client/context/HeaderHeightContext';
 import {HomeScreenContextProvider} from 'terraso-mobile-client/context/HomeScreenContext';
-import {checkAndroidPermissions} from 'terraso-mobile-client/native/checkAndroidPermissions';
 import {RootNavigator} from 'terraso-mobile-client/navigation/navigators/RootNavigator';
 import {Toasts} from 'terraso-mobile-client/screens/Toasts';
 import {createStore} from 'terraso-mobile-client/store';
@@ -75,12 +74,6 @@ LogBox.ignoreLogs([
 const store = createStore();
 
 function App(): React.JSX.Element {
-  useEffect(() =>
-    checkAndroidPermissions(
-      PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
-    ),
-  );
-
   const [headerHeight, setHeaderHeight] = useState(0);
 
   return (

dev-client/src/screens/HomeScreen/HomeScreen.tsx

@@ -26,6 +26,8 @@ import {
   useState,
 } from 'react';
 
+import {useForegroundPermissions} from 'expo-location';
+
 import BottomSheet, {BottomSheetModal} from '@gorhom/bottom-sheet';
 import Mapbox from '@rnmapbox/maps';
 
@@ -58,6 +60,16 @@ import {ScreenScaffold} from 'terraso-mobile-client/screens/ScreenScaffold';
 import {useDispatch, useSelector} from 'terraso-mobile-client/store';
 
 export const HomeScreen = memo(() => {
+  const [locationPermission, requestLocationPermission] =
+    useForegroundPermissions();
+  useEffect(() => {
+    if (!locationPermission?.granted) {
+      requestLocationPermission();
+    }
+    // disable depcheck because we only want to run on mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const infoBottomSheetRef = useRef<BottomSheetModal>(null);
   const siteListBottomSheetRef = useRef<BottomSheet>(null);
   const [mapStyleURL, setMapStyleURL] = useState(Mapbox.StyleURL.Street);

dev-client/src/screens/HomeScreen/components/MapSearch.tsx

@@ -21,12 +21,15 @@ import {Keyboard} from 'react-native';
 import Autocomplete from 'react-native-autocomplete-input';
 import {Searchbar} from 'react-native-paper';
 
+import {useForegroundPermissions} from 'expo-location';
+
 import {Pressable} from 'native-base';
 
 import {Coords} from 'terraso-client-shared/types';
 
 import {IconButton} from 'terraso-mobile-client/components/icons/IconButton';
 import {searchBarStyles} from 'terraso-mobile-client/components/ListFilter';
+import {PermissionsRequestModal} from 'terraso-mobile-client/components/modals/PermissionsRequestModal';
 import {
   Box,
   Column,
@@ -211,14 +214,22 @@ export default function MapSearch({zoomTo, zoomToUser, toggleMapLayer}: Props) {
             padding={2}
             onPress={toggleMapLayer}
           />
-          <IconButton
-            name="my-location"
-            _icon={{color: 'action.active'}}
-            bgColor="white"
-            padding={2}
-            borderRadius={15}
-            onPress={zoomToUser}
-          />
+          <PermissionsRequestModal
+            title={t('permissions.location_title')}
+            body={t('permissions.location_body')}
+            usePermissions={useForegroundPermissions}
+            permissionedAction={zoomToUser}>
+            {onRequest => (
+              <IconButton
+                name="my-location"
+                _icon={{color: 'action.active'}}
+                bgColor="white"
+                padding={2}
+                borderRadius={15}
+                onPress={onRequest}
+              />
+            )}
+          </PermissionsRequestModal>
         </Column>
       </Row>
     </Box>

dev-client/src/translations/en.json

@@ -451,7 +451,9 @@
     "camera_title": "LandPKS Soil ID needs to access your camera",
     "camera_body": "To use {{feature}}, grant LandPKS Soil ID access to your camera in device settings.",
     "gallery_title": "LandPKS Soil ID needs to access your photo gallery",
-    "gallery_body": "To use {{feature}}, grant LandPKS Soil ID access to your photo gallery in device settings."
+    "gallery_body": "To use {{feature}}, grant LandPKS Soil ID access to your photo gallery in device settings.",
+    "location_title": "LandPKS Soil ID needs to access your location",
+    "location_body": "For the best map experience, grant LandPKS Soil ID access to your location in device settings."
   },
   "errors": {
     "generic": "Error saving soil ID information."