React Native Maps Configuration - A Comprehensive '23 iOS Guide

In this article, we'll revisit our 2020 post about crafting interactive maps with React Native. Our previous demonstration showcased how to set up and display the Airbnb-style map using React Native. You can find the original post in Spanish React Native y AirBnB Google Maps

For this demonstration, we will use react-native-maps, a package created by Airbnb and now maintained by the community. As mobile application developers, we frequently use in-hour integrations.

Initial Setup:

Step 1: Start by installing the react-native-maps library from npm:

Step 2: The choice of platform dictates the map implementation. On Android, Google Maps is a necessity, requiring an API key for the Android SDK.

For iOS, users have the flexibility to choose between Google Maps or the native Apple Maps implementation.

Step 3: After installing the npm package, proceed to install the associated pod:

Step 4: To enable Google Maps on iOS, procure the Google API key and integrate the following changes to your AppDelegate.m file:

Remember to replace YOUR_API_KEY. If you need assistance, please see our previous guide.

Next...

We need to start the Podfile configuration. For developers working on an Apple silicon Mac without Rosetta, include the following line:

To incorporate React Native Maps into your project, you need to add the necessary dependencies:

Before running pod install post-configuration, ensure yåour Podfile's deployment target is >= 13.0 at the top of your Podfile.

Working with react-native-map:

Once the previous configuration is complete, we can start using the react-native-map package. Referring to the documentation, the first step is to render the map with a default region. We can utilize the MapView component for this purpose:

const initialRegion = {
  latitude: 37.78825,
  longitude: -122.4324,
  latitudeDelta: 0.0922,
  longitudeDelta: 0.0421,
};

Then, apply it as follows:

<MapView style={styles.map} initialRegion={initialRegion} />

And voila! You've got your map set up and ready for customization.

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

const initialRegion = {
  latitude: 37.78825,
  longitude: -122.4324,
  latitudeDelta: 0.0922,
  longitudeDelta: 0.0421,
};

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

const App: React.FC = () => {
  return (
    <View style={styles.container}>
      <MapView style={styles.map} initialRegion={initialRegion} />
    </View>
  );
};

export default App;

For a visual representation of how your map should look at this stage:

Final Thoughts and Additional Notes

If you're interested in further refining the default component, several additional map properties can assist you in customizing the map. Here's a basic example showcasing how to initiate such customizations:

<MapView style={styles.map} initialRegion={initialRegion} />

In the above example, we've enabled features such as zoom, user location display, and the user location button. These enhancements greatly improve the user's interactive experience with the map.

Remember, React Native Maps is a powerful library that offers a multitude of options to create interactive maps, catering to a variety of user needs. It's up to you to explore and utilize these properties to create a map that best fits your application's requirements.