Building a Location Picker in React Native Maps (with Draggable Marker & Address Lookup) – ██FR█████ █INTELL███████████

This content originally appeared on DEV Community and was authored by Dainy Jose

Introduction

In my previous post, I covered how to integrate Google Maps and display the user’s live location.

Now let’s take it one step further — by creating a location picker where users can drag a marker or move the map to select an address. This feature is perfect for checkout pages, delivery address setup, or event creation screens.

Step 1: Setup

We’ll continue using:

npx expo install react-native-maps expo-location

Optional (for reverse geocoding):

npx expo install expo-location

Step 2: Display the Map with a Draggable Marker

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import MapView, { Marker } from 'react-native-maps';
import * as Location from 'expo-location';

export default function LocationPicker() {
  const [region, setRegion] = useState(null);
  const [address, setAddress] = useState('');

  useEffect(() => {
    (async () => {
      const { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') return;

      const current = await Location.getCurrentPositionAsync({});
      const { latitude, longitude } = current.coords;
      setRegion({
        latitude,
        longitude,
        latitudeDelta: 0.01,
        longitudeDelta: 0.01,
      });
      getAddress(latitude, longitude);
    })();
  }, []);

  const getAddress = async (lat: number, lng: number) => {
    const [place] = await Location.reverseGeocodeAsync({ latitude: lat, longitude: lng });
    if (place) {
      setAddress(`${place.name || ''}, ${place.city || ''}, ${place.region || ''}`);
    }
  };

  const onMarkerDragEnd = (e: any) => {
    const { latitude, longitude } = e.nativeEvent.coordinate;
    setRegion({ ...region, latitude, longitude });
    getAddress(latitude, longitude);
  };

  if (!region) return <Text>Loading map...</Text>;

  return (
    <View style={styles.container}>
      <MapView style={styles.map} region={region}>
        <Marker
          coordinate={region}
          draggable
          onDragEnd={onMarkerDragEnd}
          title="Selected Location"
        />
      </MapView>
      <View style={styles.infoBox}>
        <Text style={styles.label}>Selected Address:</Text>
        <Text style={styles.address}>{address || 'Move marker to select'}</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  map: { flex: 1 },
  infoBox: {
    position: 'absolute',
    bottom: 40,
    left: 20,
    right: 20,
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 10,
    shadowColor: '#000',
    shadowOpacity: 0.1,
    shadowRadius: 6,
  },
  label: { fontWeight: '600', marginBottom: 4 },
  address: { fontSize: 14, color: '#333' },
});

What this does:

Displays your current location.
Lets you drag the marker to a new position.
Updates the address in real time.

Step 3: Use Map Pan Instead of Marker Drag

If you prefer to keep the marker fixed and move the map instead:

<MapView
  style={styles.map}
  region={region}
  onRegionChangeComplete={(r) => {
    setRegion(r);
    getAddress(r.latitude, r.longitude);
  }}
>
  <Marker coordinate={region} />
</MapView>

This feels more natural for UX — the marker stays centered while the user pans the map.

Step 4: Save the Selected Location

Once the user confirms the spot, send it back to your backend or state management:

<Button
  title="Confirm Location"
  onPress={() => console.log('Saved location:', region, address)}
/>

Conclusion

And that’s it! You’ve now built a fully functional location picker in React Native using react-native-maps and Expo Location.

Key Takeaways:

Always handle permissions before rendering the map.

Use reverse geocoding to get human-readable addresses.

For better UX, fix the marker and move the map instead of dragging.

Next Up

In my next post, I’ll explore how to show nearby places and routes using Google Maps APIs in React Native. Stay tuned!

Written by Dainy Jose — React Native Mobile Application Developer with 3+ years of experience building cross-platform mobile apps using React Native (Expo, TypeScript, Redux).
Currently expanding backend knowledge through the MERN Stack (MongoDB, Express.js, React.js, Node.js) to create more efficient, full-stack mobile experiences.

Tech Stack: React Native · TypeScript · Redux · Expo · Firebase · Node.js · Express.js · MongoDB · REST API · JWT · Jest · Google Maps · Razorpay · PayU · Agile · SDLC · Git · Bitbucket · Jira

Connect with me:
Portfolio
LinkedIn
GitHub

This content originally appeared on DEV Community and was authored by Dainy Jose