feat: improve UX of location permission requests

techmatters · Jul 4, 2024 · 61b0575 · 61b0575
1 parent 22d8653
commit 61b0575
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 55 deletions.
diff --git a/dev-client/package-lock.json b/dev-client/package-lock.json
diff --git a/dev-client/package.json b/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.5",
+    "expo-location": "~17.0.1",
     "expo-media-library": "~16.0.3",
     "expo-screen-orientation": "~7.0.5",
     "expo-sensors": "~13.0.8",

diff --git a/dev-client/src/App.tsx b/dev-client/src/App.tsx
@@ -47,7 +47,6 @@ import * as Sentry from '@sentry/react-native';
 import {APP_CONFIG} from 'terraso-mobile-client/config';
 import {GeospatialProvider} from 'terraso-mobile-client/context/GeospatialContext';
 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';
@@ -74,12 +73,6 @@ LogBox.ignoreLogs([
 const store = createStore();
 
 function App(): React.JSX.Element {
-  useEffect(() =>
-    checkAndroidPermissions(
-      PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
-    ),
-  );
-
   return (
     <GestureHandlerRootView style={style}>
       <Provider store={store}>

diff --git a/dev-client/src/native/checkAndroidPermissions.ts b/dev-client/src/native/checkAndroidPermissions.ts
diff --git a/dev-client/src/screens/HomeScreen/HomeScreen.tsx b/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,14 @@ 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();
+    }
+  }, []);
+
   const infoBottomSheetRef = useRef<BottomSheetModal>(null);
   const siteListBottomSheetRef = useRef<BottomSheet>(null);
   const [mapStyleURL, setMapStyleURL] = useState(Mapbox.StyleURL.Street);

diff --git a/dev-client/src/screens/HomeScreen/components/MapSearch.tsx b/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,
@@ -208,14 +211,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>