React Native MapView not showing on iOS standalone build

Viewed 683

I am using MapView from react-native-maps. I've gone ahead and built standalone apps for both iOS and Android.

I've followed Expo's documentation regarding MapView with standalone apps.

After building the project, the standalone Android version works perfectly fine but iOS only slightly works. As you can see in the picture the Marker shows but not the underlying map. Any ideas why?

iOS Image:

enter image description here

MapView Code:

<MapView
  style={styles.map}
  customMapStyle={mapStyle}
  provider={PROVIDER_GOOGLE}
  initialRegion={region}
  showsMyLocationButton={false}
  followsUserLocation={true}
  showsUserLocation
  radius={Dimensions.get("window").width * 0.08}
  minZoomLevel={3}
  maxZoomLevel={20}
  rotateEnabled={false}
  pitchEnabled={false}
  onPress={() => Keyboard.dismiss()}
>
  {locations &&
    locations
      .filter((location) => location.data.status === "live")
      .map((location, index) => {
        return (
          <Marker
            coordinate={{
              latitude: location.data.lat,
              longitude: location.data.long,
            }}
            onPress={() =>
              navigation.navigate("LocationScreen", { location })
            }
            key={index}
          >
            <View style={styles.markerContainer}>
              <Text
                style={styles.text}
                numberOfLines={1}
                adjustsFontSizeToFit
              >
                {location.data.name}
              </Text>
            </View>
          </Marker>
        );
      })}
</MapView>
1 Answers

Silly mistake! I had the correct API Key for android.config.googleMaps.apiKey, but incorrect key for ios.config.googleMapsApiKey in my app.json file.

Always check twice!

Related