expo location permissions work on android, but not on iOS - ios

Question

I have a react-native app that uses expo.
The location permissions work on android, but not on iOS.
On a real iPhone (iOS version 14.4.2), it does nothing. On a simulator, I get this error message:
[Unhandled promise rejection: Error: LOCATION_FOREGROUND permission is required to do this operation.]
at node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:103:50 in promiseMethodWrapper
at node_modules/#unimodules/react-native-adapter/build/NativeModulesProxy.native.js:15:23 in moduleName.methodInfo.name
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:293333:90 in watchPositionAsync$
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:293327:37 in watchPositionAsync
Update: I tried it on another Android device and it did not work, so maybe it works on my main Android phone because the permissions were already granted when running a previous version? There is a bug report about permissions breaking between Expo version 40 and 41 https://github.com/expo/expo/issues/12581
Here is what I'm using:
app.json:
{
"expo": {
"name": "Andiamo",
"slug": "andiamo_places",
"version": "1.0.0",
"orientation": "default",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"bundleIdentifier": "com.andiamoplaces.andiamotravelapp",
"supportsTablet": true,
"infoPlist": {
"NSLocationUsageDescription":
"The app needs permission to access your location, if you want to be located on the map.",
"NSLocationWhenInUseUsageDescription": "The app needs permission to access your location, if you want to be located on the map",
"NSLocationAlwaysUsageDescription": "The app needs permission to access your location, if you want to be located on the map",
"NSLocationAlwaysAndWhenInUseUsageDescription": "The app needs permission to access your location, if you want to be located on the map",
"NSPhotoLibraryUsageDescription": "The app needs permission to your camera roll, if you want to upload pictures.",
"NSCameraUsageDescription": "The app needs permission to your camera, if you want to take pictures from the app."
}
},
"android": {
"package": "com.andiamoplaces.andiamotravelapp",
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
},
"permissions": [
"CAMERA",
"LOCATION"
]
},
"web": {
"favicon": "./assets/favicon.png"
},
"description": ""
}
}
package.json:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"postinstall": "jetifier -r"
},
"dependencies": {
"#expo/vector-icons": "^12.0.0",
"#react-native-community/clipboard": "^1.5.1",
"#react-native-community/datetimepicker": "3.2.0",
"#react-native-community/masked-view": "0.1.10",
"#react-navigation/native": "^3.8.4",
"#use-expo/font": "^2.0.0",
"cross-fetch": "^3.1.4",
"expo": "^41.0.0",
"expo-camera": "~11.0.2",
"expo-cli": "^4.4.4",
"expo-clipboard": "~1.0.2",
"expo-facebook": "~11.0.5",
"expo-font": "~9.1.0",
"expo-image-manipulator": "~9.1.0",
"expo-image-picker": "~10.1.4",
"expo-location": "~12.0.4",
"expo-media-library": "~12.0.2",
"expo-permissions": "~12.0.1",
"expo-status-bar": "~1.0.4",
"firebase": "8.2.3",
"geolib": "^3.3.1",
"global": "^4.4.0",
"luxon": "^1.26.0",
"native-base": "^2.15.2",
"react": "16.13.1",
"react-devtools": "^4.13.2",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
"react-native-color-picker": "^0.6.0",
"react-native-draggable-flatlist": "^2.6.1",
"react-native-gesture-handler": "~1.10.2",
"react-native-ionicons": "^4.6.5",
"react-native-maps": "0.27.1",
"react-native-material-menu": "^1.2.0",
"react-native-modal": "^11.10.0",
"react-native-pell-rich-editor": "^1.7.0",
"react-native-popup-menu": "^0.15.10",
"react-native-prompt-crossplatform": "^1.6.1",
"react-native-ratings": "^8.0.4",
"react-native-reanimated": "~2.1.0",
"react-native-safe-area-context": "3.2.0",
"react-native-safe-area-view": "^1.1.1",
"react-native-screens": "~3.0.0",
"react-native-simple-radio-button": "^2.7.4",
"react-native-switch": "^2.0.0",
"react-native-switch-selector": "^2.1.4",
"react-native-vector-icons": "^8.1.0",
"react-native-web": "~0.13.12",
"react-native-webview": "11.2.3",
"react-native-youtube-iframe": "^2.0.1",
"react-navigation": "^4.4.4",
"react-navigation-drawer": "^2.7.1",
"react-navigation-stack": "^2.10.4",
"react-navigation-tabs": "^2.11.1",
"react-redux": "^7.2.4",
"redux": "^4.1.0",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"#babel/core": "~7.9.0",
"jetifier": "^1.6.8"
},
"private": true
}
code:
startUserLocationUpdates = async () => {
const returns = await Location.watchPositionAsync(
{
accuracy: Location.Accuracy.BestForNavigation,
timeInterval: 1000,
// distanceInterval: 0,
},
(loc) => {
if (this.props.ShowLocation) this.centerMapTo(loc.coords.latitude, loc.coords.longitude);
this.props.onSetCurrentLocation({ latitude: loc.coords.latitude, longitude: loc.coords.longitude });
}
);
this._removeLocationUpdates = returns.remove;
};

Answer 1

An updated version of the Permissions with formatted code.
if (Platform.OS !== "web") {
const { status } = await Location.requestForegroundPermissionsAsync();
if (status !== "granted") {
Alert.alert(
"Insufficient permissions!",
"Sorry, we need location permissions to make this work!",
[{ text: "Okay" }]
);
return;
}
}
In fact, I've had the opposite scenario; iOS was working fine, but Android did not without the code above.
<uses-permission android:name=... in the AndroidManifest.xml is being automatically by Expo, so you don't need to care about it and modify anything.