How to use react-native-maps without API Key and Google provider

Question

DOCUMENTATION: https://github.com/react-native-maps/react-native-maps#using-a-custom-tile-overlay

I want to use react-native-maps with custom tiles, and I do not want to use the Google provider.

After installation with the following command:

npm install react-native-maps --save

When I run the project, I get the following error:

API Key not found. Check that <meat-data android:name="com.google.android.geo.API_KEY" andorid:value="your API Key" /> is in the <application> element of AndroidManifest.xml

Here is the component in React Native:

import React from 'react';
import { Dimensions, StyleSheet, View } from 'react-native';
import MapView, { Marker } from 'react-native-maps';

const App = () => {
  return (
    <View style={{ flex: 1 }}>
      <MapView
        style={{ ...StyleSheet.absoluteFillObject, }}
        provider={undefined}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      >

        <UrlTile
          urlTemplate="http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
          zIndex={1}
        />

        <Marker coordinate={{
          latitude: 37.78825,
          longitude: -122.4324,
        }} pinColor="red" />

      </MapView>
    </View>
  )
}

Answer 1

Read the documentation present here - Documentation for maps

You need to sign up and setup the billing account and obtain an API KEY in order to start using the maps.