What is the right way of integrating maps on react native?

Moderator: Reach-Native-gp

Post Reply
Anisha Sharma
Posts: 11
Joined: Fri May 08, 2020 12:30 pm

What is the right way of integrating maps on react native?

Post by Anisha Sharma »

React Native is a Cross-Platform Native App building framework. And it has the react-native-maps that is currently the only map library that is still supported by the framework. react-native-maps is a library by Airbnb and one of the most popular choice.
To have your maps run on both iOS and Android, we will have to set up Apple Maps for iOS and Google Maps for Android. [Please note: Google Maps can be set up for iOS as well.]

Step 1: Installing and Setting up React Native
  • Run npm install -g react-native-cli in your command line
  • Create project by react-native init ReactNativeDemoMaps
Step 2: To run the app
  • For Android: react-native run-android
  • For iOS: react-native run-ios
Step 3: Linking react-native-maps library/package
  • To install react-native-maps, run npm install --save react-native-maps. Let the package install completely.
  • To link the package with your app, run react-native link react-native-maps
Setting up React Native Maps for Apple(iOS) with Apple Maps
  • Select your rendering component where you want to display the maps.
  • On selected component, add the given piece of code: import MapView from 'react-native-maps'
  • Next, add: export default class App extends Component<Props> {render() {return( <MapView style={{flex: 1}} region={{latitude: 40.234653, longitude: 72.561200, latitudeDelat: 0.0922, longitudeDelta: 0.0421}} showsUserLocation={true} /> ); }}
Setting up React Native Maps for Android with Google Maps
  • Start by running react-native run-android
  • Go to android/app/build.gradle file
  • Replace compile project(' :react-native-maps') with:
    implementation(project(':react-native-maps'))
    { exclude group: 'com.google.android.gms',
    module: 'play-services-base' exclude group: 'com.google.android.gms',
    module: 'play-services-maps' }
    implementation 'com.google.android.gms:play-services-base:17.0.0'
    implementation 'com.google.android.gms:play-services-maps:17.0.0'
  • Add the API key for your Google Maps in the Android Manifest:
    <application> <meta-data android:name="com.google.android.geo.API_KEY" android:value="YOUR_API_KEY"/></application>
Following the above steps will help you successfully set up and render Map View in both iOS and Android using the react-native-maps.

Post Reply