install dependencies

for displaying maps in APP

npm install react-native-maps --save

for getting the location of the device

npx expo install expo-location

import

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

code

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

export default function App() {
  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);

  useEffect(() => {
    (async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        setErrorMsg('Permission to access location was denied');
        return;
      }

      let userLocation = await Location.getCurrentPositionAsync({});
      setLocation({
        latitude: userLocation.coords.latitude,
        longitude: userLocation.coords.longitude,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      });
    })();
  }, []);

  if (!location) {
    return null;
  }

  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        initialRegion={location}
      >
        <Marker
          coordinate={location}
          title={"You are here"}
          description={"This is your current location"}
        />
      </MapView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

• Output

Map Customizations

Map Types

• Standard: Default map view.
• Satellite: Satellite imagery.
• Hybrid: Combines satellite and standard views with labels.

<MapView
  style={styles.map}
  region={location}
  mapType="satellite"
>

Displaying User's Location

• User Location: Show the user’s current location as a blue dot.
• User Tracking Mode: Follow the user's movement on the map

<MapView
  style={styles.map}
  initialRegion={location}
  mapType="hybridFlyover"
  showsUserLocation={true}
  followsUserLocation={true}
>