ReactNative map view: Marker is not showing on IOS

Question

I am building an IOS application using ReactNative. My app needs to display the location (a marker) on the Apple Map view. I am using React Native map View. I can display the map. But it is not displaying the marker.

This is my code.

<SafeAreaView style={{flex: 1}}>
            <MapView
                style={{ flex: 1 }}
                region={{
                    "latitude": 37.785834, "longitude": -122.406417,
                    latitudeDelta: 0.009,
                    longitudeDelta: 0.009
                }}
            />
            <Marker title={"Test"} key={1} coordinate={{ "latitude": 37.785834, "longitude": -122.406417 }} />
        </SafeAreaView>

It displays the map. It is not displaying the marker on the map. How can I fix it?

Answer 1

Marker should be inside the MapView not outside.

Here is the sample:

import React from "react";
import { Dimensions, View } from "react-native";

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

export default function App() {
  return (
    <View style={{ flex: 1, alignItems: "center" }}>
      <MapView
        style={{
          width: Dimensions.get("window").width,
          height: Dimensions.get("window").height,
        }}
        provider={PROVIDER_GOOGLE}
      >
        <Marker coordinate={{ latitude: 45, longitude: 8 }} />
      </MapView>
    </View>
  );
}