HeatmapLayer

import { MapView, ShapeSource, HeatmapLayer } from '@rnmapbox/maps';

const points = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [-122.4, 37.8],
      },
      properties: { intensity: 0.5 },
    },
    // ... more points
  ],
};

function Map() {
  return (
    <MapView>
      <ShapeSource id="points" shape={points}>
        <HeatmapLayer
          id="heatmap"
          style={{
            heatmapRadius: 40,
            heatmapWeight: ['get', 'intensity'],
            heatmapIntensity: 1,
            heatmapColor: [
              'interpolate',
              ['linear'],
              ['heatmap-density'],
              0, 'rgba(33,102,172,0)',
              0.2, 'rgb(103,169,207)',
              0.4, 'rgb(209,229,240)',
              0.6, 'rgb(253,219,199)',
              0.8, 'rgb(239,138,98)',
              1, 'rgb(178,24,43)',
            ],
            heatmapOpacity: 0.8,
          }}
        />
      </ShapeSource>
    </MapView>
  );
}