Create a Current Location Map for Mobile Devices with Expo and React Native

I’ve recently been working on developing a geofencing app, with the core focus on defining zones and triggering actions when a user enters them. However, I thought it would also be nice to show people where they currently are so they can easily navigate to other geofences in the area. A small, live-updating map tucked into the interface could help users orient themselves and make the app feel more interactive and engaging.

Recently, I built this current location map using Expo and react-native-maps.

Why Expo Makes This Easy

React Native alone can get the job done, but Expo smooths out the rough edges. With expo-location for permissions and GPS data, and react-native-maps for display, you can get a functional map on screen in minutes.

Expo takes care of the platform-specific location permission prompts for iOS and Android, while react-native-maps gives you the same MapView API across devices. That means less time worrying about setup and more time tweaking the experience.

The Core Map Component

Here’s the heart of the feature — our CurrentLocationMap component:

import * as Location from "expo-location";
import React, { useRef, useEffect, useState } from "react";
import { Dimensions, View, TouchableOpacity } from "react-native";
import MapView, { Marker, Region } from "react-native-maps";
import { MaterialIcons } from "@expo/vector-icons";

export const CurrentLocationMap = ({ currentLocation, geofenceDistances }) => {
  const mapRef = useRef<MapView>(null);
  const [region, setRegion] = useState<Region | null>(null);
  const [isAnimating, setIsAnimating] = useState(false);

  useEffect(() => {
    if (currentLocation && !isAnimating) {
      const newRegion: Region = {
        latitude: currentLocation.coords.latitude,
        longitude: currentLocation.coords.longitude,
        latitudeDelta: 0.01,
        longitudeDelta: 0.01,
      };
      setRegion(newRegion);
    }
  }, [currentLocation]);

  return (
    <View>
      <MapView
        ref={mapRef}
        style={{ height: 400, width: Dimensions.get("window").width - 40 }}
        region={region}
      >
        {currentLocation && (
          <Marker coordinate={currentLocation.coords} />
        )}
      </MapView>

      <TouchableOpacity
        style={{ position: "absolute", bottom: 20, right: 20 }}
        onPress={() => {
          if (currentLocation) {
            mapRef.current?.animateToRegion(region);
          }
        }}
      >
        <MaterialIcons name="my-location" size={32} color="black" />
      </TouchableOpacity>
    </View>
  );
};

Key Pieces

1. Permissions & Location. Before you can show the map, you’ll need to request foreground (or background) location permissions with expo-location. Once granted, you can subscribe to updates with Location.watchPositionAsync.
2. Region State. We store a region in state to control the map’s viewport. When the user’s location changes, we update this region.
3. “Center on Me” Button. The floating Material Icon button triggers animateToRegion, smoothly moving the map back to the user’s location. This is a nice quality-of-life feature for users who scroll away but want to snap back.
4. Geofences (Optional). If you have defined distances or zones, you can render them as circles on the map. That’s as easy as mapping over your geofence list and returning <Circle /> components.

Tips for a Smooth Experience

• Handle Permissions Gracefully – Show clear instructions if the user denies location access. Don’t just leave them staring at a blank map.
• Throttle Location Updates – Continuous GPS polling can drain battery. Adjust accuracy and update intervals to match your use case.
• Test on Real Devices – Simulators can fake location data, but there’s no substitute for walking around with your phone and seeing it in action.

Wrapping Up

Combining Expo and React Native makes building location-aware apps straightforward easy. By layering in a live map, a “center on me” button, and optional geofences, you can deliver a polished feature that feels instantly useful.

If you’ve been meaning to dip your toes into mobile mapping, this setup is a great place to start.