I started a new react native project with expos script: npx create-expo-app@latest
I installed react-native-maps with npm: npm install react-native-maps
I checked that my google maps api has android sdk enabled.
I specified my API in two ways as mentioned in setup and troubleshooting sections of this page
First in android/app/src/main/AndroidManifest.xml:
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="Your Google maps API Key Here"/>
Second in google_maps_api.xml in android/app/src/main/res/values:
<resources>
<string name="google_maps_key" templateMergeStrategy="preserve" translatable="false">(api key here)</string>
</resources>
I also installed google play sevices in my android emulator.
I still get a beige/gray screen with MapView:
export default function HomeScreen() {
return (
<View style={{ width: 200, height: 200 }}>
<MapView
style={{ width: "100%", height: "100%" }}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
/>
</View>
);
}
What might be the problem here?