React native Question posted in
The official React Native documentation can be found here.

Where can I find the AndroidManifest.xml in my React Native Application?

I have created a mobile app using Expo and get this error when trying to use react-native-maps on an Android emulator.

Image from Android emulator

I modified the app.json file as follows to include the api key as follows:

"android": {
  "adaptiveIcon": {
    "foregroundImage": "./assets/adaptive-icon.png",
    "backgroundColor": "#FFFFFF"
  },
  "package": "com.sjroy5.worksideclient",
  "config": {
    "googleMaps": {
      "apiKey": "AIzaSyDyhqHd1Zk266sB-HNeBXlO2dUs0XQuUxQ"
    }
  },
  "versionCode": 2
},

Maps work just fine on my IOS device. Any suggestions?

Tags:

2

Answers


  1. 0

    The AndroidManifest.xml file is located at the following paths

    android > app > src > debug > AndroidManifest.xml

    AND

    android > app > src > main > AndroidManifest.xml

    Just editing the manifest file in the main should be enough.

    Login or Signup to reply.
  2. 0

    1. The issue you’re facing is due to the fact that the config object in your app.json file is not the correct place to put the Google Maps API key. The config object is used to configure various Expo services, but it doesn’t directly configure the react-native-maps package.

    2. Add the provider prop to the MapView component and set it to MapView.PROVIDER_GOOGLE. Finally, pass the apiKey prop to the MapView component and set it to your Google Maps API key.

      import MapView from 'react-native-maps';

<MapView
 provider={MapView.PROVIDER_GOOGLE}
 style={styles.map}
 region={{
  latitude: 37.7749,
  longitude: -122.4194,
  latitudeDelta: 0.0922,
  longitudeDelta: 0.0421,
}}
apiKey="AIzaSyDyhqHd1Zk266sB-HNeBXlO2dUs0XQuUxQ"
/>

    3. If you want to keep your API key in a separate file for better security, you can do so by creating a .env file in the root of your project and adding your API key to it.

      GOOGLE_MAPS_API_KEY = AIzaSyDyhqHd1Zk266sB-HNeBXlO2dUs0XQuUxQ

    4. install the expo-constants package

      expo install expo-constants

    5. import the Constants object from expo-constants and use it to access the API key

      import Constants from 'expo-constants';

<MapView
  provider={MapView.PROVIDER_GOOGLE}
  style={styles.map}
  region={{
    latitude: 37.7749,
    longitude: -122.4194,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  }}
 apiKey={Constants.manifest.extra.GOOGLE_MAPS_API_KEY}
/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search