What goes in: viewRef: MapViewNativeComponentType when using React Native Maps in .current.fitToSuppliedMarkers

Question

useEffect(() => {
if(!origin || !destination) return;

mapRef.current.fitToSuppliedMarkers(["origin", "destination"], {
  edgePadding: { top: 50, right: 50, bottom: 50, left: 50}
})
}, [origin, destination]);

So I'm following a tutorial and I can't seem to find what goes before you give the origin and destination to the fitToSuppliedMarkers, it is asking for this: viewRef: MapViewNativeComponentType, but I don't know what that is, can someone tell me what goes in there?

I'm using VS Code, with the genymotion emulator with the google play services installed and coding for Android OS 10 using Windows 11.

I tried searching for the error and for documentation on the react native components for the mapview but none of them are working for me.

Answer 1

you have to specify what type of map the MapView component is. To solve it you can put this for example:

useEffect(() => {
    if(!origin || !destination) return;

    // Zoom & fit to markers
    mapRef.current.fitToSuppliedMarkers('mutedStandard',['origin','destination'],{
        edgePadding: { top: 50, right: 50, bottom: 50, left: 50}
    });
}, [origin, destination]);

Remember to put the same mapType of your MapView component:

<MapView
ref={mapRef}
mapType='mutedStandard'
enter code here ...
/>