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:

jsximport 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