expo: [expo-MapView] Can't get custom map style to work in Expo app
🐛 Bug Report
Can’t get custom map styling to work for my Expo iOS app. Example code below
Environment
Expo CLI 3.13.1 environment info:
System:
OS: macOS 10.15
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 10.15.1 - /usr/local/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
IDEs:
Xcode: 11.2/11B52 - /usr/bin/xcodebuild
npmPackages:
expo: ^36.0.0 => 36.0.2
react: 16.9.0 => 16.9.0
react-native: https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz => 0.61.4
npmGlobalPackages:
expo-cli: 3.13.1
app target: iOS TestFlight app
Steps to Reproduce
In the Map component:
import MapView, { PROVIDER_GOOGLE } from "react-native-maps"
export const Map = () => {
return (
<MapView
customMapStyle={mapStyle}
provider={PROVIDER_GOOGLE}
/>
)
}
const mapStyle = [ ...generated JSON from https://mapstyle.withgoogle.com ]
and in my app.json:
"expo": {
....
"ios": {
....
"config": {
"googleMapsApiKey": MY_API_KEY,
}
},
}
}
Expected Behavior
I’ve made sure i’ve enabled the Google Maps SDK for iOS service in the developer console, and have an unrestricted API key that allows both these services.
Actual Behavior
Result is the Google Maps map shows but without the custom styling
Reproducible Demo
Ask me for the testflight link. Anybody know anything about this? Haven’t yet managed to test on Android so i’m not sure if it’s something to do with iOS, or both, (or just something wrong in my code)
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 20 (9 by maintainers)
Thanks for taking a look at the new guide in that PR! Hopefully it helps others who run into the same issue 👍
Good news! I finally can say that the bug is fixed. How? I’ve had to create a new Api Key that is a RESTRICT KEY for iOS with the bundleIdentifier. Thanks for everything @cruzach !