React-native-maps white screen, Map not rendering

Question

I use MapView installed from react-native-maps to create map tha covers the home screen

import React, {useEffect} from 'react';
import {StyleSheet, View, PermissionsAndroid, Platform} from 'react-native';
import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';

const Home = () => {
  useEffect(() => {
    const requestLocationPermission = async () => {
      if (Platform.OS === 'android') {
        const granted = await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
          {
            title: 'Location Permission',
            message: 'This app needs access to your location to show maps.',
            buttonNeutral: 'Ask Me Later',
            buttonNegative: 'Cancel',
            buttonPositive: 'OK',
          },
        );
        if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
          console.log('Location permission denied');
        }
      }
    };

    requestLocationPermission();
  }, []);

  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        provider={PROVIDER_GOOGLE}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    width: '100%',
    height: '100%',
  },
});

export default Home;

Output

Check Map Permissions: Ensure that your app has the necessary permissions to access location services. Without these permissions, the map might not render properly.

Check for Errors: Open the console or log output of your development environment to check for any errors or warnings. These can provide clues about what might be going wrong.

Use a Map API Key: If you are using the Google Maps provider, ensure that you have a valid API key and that it is correctly configured. The absence of a key or an invalid key can cause the map to fail to load.

Answer 1

When integrating react-native-maps into your React Native application on Android, it's crucial to include your Google Maps API key in the AndroidManifest.xml file.

<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="YOUR_GOOGLE_MAPS_API_KEY" />