React-Native Map App

Create the app

With Expo:

bashnpx create-expo-app my-map-app cd my-map-app npx expo install react-native-maps npx expo install expo-location npm start

3. Core features your app needs

Your app’s first version should probably include:

• Display a map
• Get the user’s current location
• Let the user tap to drop a pin
• Store pinned locations in state
• Optionally save pins permanently with local storage or a backend

4. Basic map screen example

Here’s a simple starter example:

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

export default function App() {
  const [region, setRegion] = useState(null);
  const [pins, setPins] = useState([]);

  useEffect(() => {
    (async () => {
      let { status } =
        await Location.requestForegroundPermissionsAsync();

      if (status !== 'granted') {
        Alert.alert(
          'Permission denied',
          'Location access is needed to show your position.'
        );
        return;
      }

      let location = await Location.getCurrentPositionAsync({});

      setRegion({
        latitude: location.coords.latitude,
        longitude: location.coords.longitude,
        latitudeDelta: 0.05,
        longitudeDelta: 0.05,
      });
    })();
  }, []);

  const handleMapPress = (event) => {
    const { coordinate } = event.nativeEvent;

    setPins((prevPins) => [
      ...prevPins,
      {
        id: Date.now().toString(),
        latitude: coordinate.latitude,
        longitude: coordinate.longitude,
      },
    ]);
  };

  if (!region) {
    return <View style={styles.container} />;
  }

  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        initialRegion={region}
        onPress={handleMapPress}
        showsUserLocation
      >
        {pins.map((pin) => (
          <Marker
            key={pin.id}
            coordinate={{
              latitude: pin.latitude,
              longitude: pin.longitude,
            }}
          />
        ))}
      </MapView>
    </View>
  );
}

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

  map: {
    flex: 1,
  },
});

5. What this does

• Asks for location permission
• Centers the map on the user’s current location
• Adds a marker wherever the user taps

6. Next things you’ll likely want

After this basic version, add:

Save pins locally

Use AsyncStorage:

bashnpx expo install @react-native-async-storage/async-storage

Then save/load the pins array.

Add pin details

Each pin could include:

• title
• description
• category
• date added

Let users delete or edit pins

You can show a modal when a marker is pressed.

Use a backend

If you want syncing across devices, use:

• Firebase
• Supabase
• Your own API

7. Important map setup notes

Depending on platform, maps may need extra setup:

• iOS: location permissions in config
• Android: location permissions and sometimes Google Maps API key for production features

If you use Expo, much of this is simpler, but you should still check:

• Expo Location docs
• react-native-maps docs

8. A simple app structure

A clean starter structure could be:

bashmy-map-app/ components/
MapScreen.js
PinModal.js
services/
storage.js
App.js

9. Recommended MVP

A very practical minimum version:

• Full-screen map
• Tap to add pin
• Tap marker to view details
• Save pins locally
• Button to center on current location