DEV Community

Dainy Jose
Dainy Jose

Posted on

Seamless Map Integration in React Native: A Complete Guide

#reactnative #map #android #ios

Introduction

Integrating maps into a React Native app sounds simple — until you face platform-specific quirks, location permission issues, and crashes (especially on Android).

In this post, I’ll walk you through how I integrated Google Maps into my React Native app using the Expo Bare Workflow, including handling permissions, displaying the user’s live location, and fixing common pitfalls like Android crashes when using showsUserLocation.

Step 1: Setting Up the Map

If you’re using Expo (Bare or Managed), the easiest way to start is with:

npx expo install react-native-maps
Enter fullscreen mode Exit fullscreen mode

Then, import the component:

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


Render a simple map:

export default function MapScreen() {
  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  map: { width: '100%', height: '100%' },
});
Enter fullscreen mode Exit fullscreen mode

That’s your base map ready.

Step 2: Request Location Permissions

To show the user’s live location, install Expo Location:

npx expo install expo-location
Enter fullscreen mode Exit fullscreen mode

Then request permission before displaying the map:

import * as Location from 'expo-location';
import { useEffect, useState } from 'react';

const [location, setLocation] = useState(null);

useEffect(() => {
  (async () => {
    let { status } = await Location.requestForegroundPermissionsAsync();
    if (status !== 'granted') {
      console.warn('Permission denied');
      return;
    }

    let current = await Location.getCurrentPositionAsync({});
    setLocation(current.coords);
  })();
}, []);
Enter fullscreen mode Exit fullscreen mode

Step 3: Display User’s Current Location

Once permission is granted, set your map’s region dynamically:

<MapView
  style={styles.map}
  region={{
    latitude: location?.latitude || 37.78825,
    longitude: location?.longitude || -122.4324,
    latitudeDelta: 0.01,
    longitudeDelta: 0.01,
  }}
  showsUserLocation={true}
  showsMyLocationButton={true}
/>
Enter fullscreen mode Exit fullscreen mode

Step 4: Fix Android Crash with showsUserLocation

If you notice your app crashes on Android when showsUserLocation={true}, it’s usually because:

  • The location permission isn’t granted before rendering the map, or

  • The native module initialization fails due to race conditions.

Fix:

Wrap your <MapView /> inside a condition that ensures location is loaded first:

{location && (
  <MapView
    style={styles.map}
    showsUserLocation={true}
    region={{
      latitude: location.latitude,
      longitude: location.longitude,
      latitudeDelta: 0.01,
      longitudeDelta: 0.01,
    }}
  />
)}
Enter fullscreen mode Exit fullscreen mode

This small conditional check prevents the crash on Android and ensures the map renders only after location access.

Step 5: Adding Markers

You can easily add markers for points of interest:

<Marker
  coordinate={{
    latitude: 37.78825,
    longitude: -122.4324,
  }}
  title="My Favorite Spot"
  description="This is where I test map features."
/>
Enter fullscreen mode Exit fullscreen mode

You can even loop through API data to dynamically render multiple markers.

Bonus: Custom Map Styling

You can use Google Map styles to match your app’s branding:

const customMapStyle = [
  {
    elementType: 'geometry',
    stylers: [{ color: '#212121' }],
  },
  {
    elementType: 'labels.text.fill',
    stylers: [{ color: '#757575' }],
  },
];

<MapView
  customMapStyle={customMapStyle}
  ...
/>
Enter fullscreen mode Exit fullscreen mode

Conclusion

Map integration in React Native can be tricky — especially when balancing permission flow and native dependencies — but once set up properly, it unlocks powerful location-based features for your users.

The key takeaways:
✅ Always request permissions before rendering the map

✅ Handle showsUserLocation carefully on Android

✅ Use dynamic regions for better UX

✅ Customize your map style to match your app

Coming Up Next

In my next post, I’ll cover “Building a Location Picker with React Native Maps” — where users can drag the map to set an address or store location.

✍️ Written by Dainy Jose — Mobile App Developer specialized in React Native and the MERN stack.

💼 Skills & Tools:

Mobile App Dev | MERN Stack | React Native | TypeScript | Redux | React.js | Node.js | MongoDB | MySQL | Express.js | REST API | JWT | Google Maps | Firebase | Jest | Agile | SDLC | Payments | Git | Bitbucket | Jira

📬 Connect with me:

🔗 LinkedIn
💻 GitHub
🌐 Portfolio

Top comments (0)