How do you make a map for mobile?

[I-keep-trying]

Here is the code from my map component, which works fine on desktop, but nearly unusable on mobile. It renders on mobile, but it cannot pan or zoom.

import React, { useState } from 'react'
import { isMobile } from 'react-device-detect'
import ReactMapGL from 'react-map-gl'

const MapView = ({ lat, lng }) => {
  const [viewport, setViewport] = useState({
    latitude: 45,
    longitude: 73,
    zoom: 7,
  })

  const mapStyle = {
    width: '100%',
    height: 350,
  }

  const eventRecognizerOptions = isMobile // from the example in the docs, does not do anything.
    ? {
        pan: { threshold: 10 },
        tap: { threshold: 5 },
      }
    : {}

  return (
    <div>
      {!isNaN(lat) ? (
        <ReactMapGL
          eventRecognizerOptions={eventRecognizerOptions}
          mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
          mapStyle="mapbox://styles/mapbox/streets-v11"
          {...mapStyle}
          {...viewport}
          onViewportChange={(viewport) => {
            setViewport({ ...viewport, latitude: lat, longitude: lng })
          }}
        />
      ) : (
        <div>Loading...</div>
      )}
    </div>
  )
}

export default MapView

In your documentation, under eventRecognizerOptions, it says 'Set options for gesture recognition' with references to different Hammer options. The provided example, however, does not use Hammer at all.

Do I need to learn Hammer in order to create a mobile version of the map? How do I access the 'Hammer.Pinch' object or component? It cannot be used as it is now, at all. When I try to zoom by pinching, it crashes completely:

[Pessimistress]

This has nothing to do with recognizerOptions. You are overwriting the longitude and latitude in onViewportChange with fixed values, which blocks pan/zoom. Check any of the examples on https://visgl.github.io/react-map-gl/examples.