How to fix brown map with a logo of google using the (react-native-maps)

Question

I'm new developing react-native, I have modules of tracking all the users based on there location (lat and long) now. I started installing the npm install react-native-maps --save, well the installation is good, now I started Build configuration on Android

Note:I use my mobile phone to run the application

Question:

1.Is this working in all devices?

2.Is it issue on API key?

3.Is it problem version of react-native-maps?

I just follow the configuration in the documentation. https://github.com/react-native-community/react-native-maps/blob/master/docs/installation.md

Now i started creating my credentials in the

https://console.cloud.google.com

Now in my AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.tracker">

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

<application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:roundIcon="@mipmap/ic_launcher_round"
  android:allowBackup="false"
  android:theme="@style/AppTheme">
  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:windowSoftInputMode="adjustResize">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
   <meta-data android:name="com.google.android.geo.API_KEY" android:value="Keep Secret first"/>
</application>

In my app.js

IMPORT

import MapView from 'react-native-maps';

RETURN

<View style={styles.container}>
    <MapView style = {styles.mapcontainer}
      showsUserLocation={true}
      showsMyLocationButton={false}
      zoomEnabled = {true}
      initialRegion={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }} >
    </MapView>
  </View>

CSS

    const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  mapcontainer: {
    flex: 1,
    ...StyleSheet.absoluteFillObject
  },
 });

Now the result is this,

The debugger look like this

I hope someone can help me with the problem. Thanks

Logcat

Answer 1

I think this issue because of SHA1 please add package name and SHA1 key on google api console.

SHA1 key generate from android studio. Get Key from here....

Add Package name and SHA 1 key here....