google mapをonPressした時にマーカーをセットする

Question

現状

react native とfirebaseで地図アプリを作成しています。
下のyoutube動画を参考にしながら、google mapにマーカーをセットする動きを実現中です
リンク内容

質問

リンクの動画を参考しながら、地図をonPressした時にマーカーがセットされる実装がうまくいきません。react nativeではどのように実現するのでしょうか？

コード

import MapView, {PROVIDER_GOOGLE, Marker} from 'react-native-maps'; // remove PROVIDER_GOOGLE import if not using Google Maps
import React, {useState} from 'react';
import {View, StyleSheet, Alert} from 'react-native';

export default function App() {
  const [markers, setMarkers] = useState([]);

  return (
    <MapView
      provider={PROVIDER_GOOGLE} // remove if not using Google Maps
      style={styles.map}
      initialRegion={{
        latitude: 35.681236,
        longitude: 139.767125,
        latitudeDelta: 0.025,
        longitudeDelta: 0.0221,
      }}
      onPress={(e) => {
        setMarkers((current) => [
          ...current,
          {
            lat: e.latlng.lat(),
            lng: e.latLng.lng(),
            time: new Date(),
          },
        ]);
      }}>
      {markers.map((marker) => (
        <Marker
          key={marker.time.toISOString()}
          position={{lat: marker.lat, lng: marker.lng}}
        />
      ))}
    </MapView>
  );
}

Answer 1

参考動画はreactを対象としたものだと思いますが、react-native(というよりreact-native-maps)ではいくつかプロパティの指定が異なります。
一度公式に目を通しておくといいかもしれません。

• 公式

下記のようにすれば動くのではないでしょうか？

import MapView, {PROVIDER_GOOGLE, Marker} from 'react-native-maps'; 
import React, {useState} from 'react';
import {View, StyleSheet, Alert} from 'react-native';

export default function App() {
  const [markers, setMarkers] = useState([]);

  return (
    <MapView
      provider={PROVIDER_GOOGLE}
      style={styles.map}
      initialRegion={{
        latitude: 35.681236,
        longitude: 139.767125,
        latitudeDelta: 0.025,
        longitudeDelta: 0.0221,
      }}
      onPress={(e) => {
        setMarkers([
          ...markers,
          {
            // MapViewのonPressはe.nativeEvent.coordinateで緯度経度にアクセス可能
            lat: e.nativeEvent.coordinate.latitude,
            lng: e.nativeEvent.coordinate.longitude,
            time: new Date(),
          },
        ]);
      }}>
      {markers.map((marker) => (
        <Marker
          key={marker.time.toISOString()}
          coordinate={{latitude: marker.lat, longitude: marker.lng}}
        />
      ))}
    </MapView>
  );
}