[Bug]: React Native Heatmaps Not Working and Causes Crash

[gavinruihanyu]

Mapbox Implementation

Mapbox

Mapbox Version

default

React Native Version

0.74

Platform

Android

@rnmapbox/maps version

10.0.0-beta.11

Standalone component to reproduce

import React from "react";
import { Button, StyleSheet, TouchableOpacity, View, Text } from "react-native";
import Mapbox from "@rnmapbox/maps";
import { HeatmapLayer, ShapeSource, CircleLayer } from "@rnmapbox/maps";

Mapbox.setAccessToken("");

const App = () => {
  return (

<Mapbox.MapView
          styleURL="mapbox://styles/gavinruihanyu/cll3vsy9s006w01r8aptc3y9b"
          projection="globe"
          rotateEnabled={true}
          scaleBarEnabled={false}
          logoEnabled={false}
        >
          {/*Add the GeoJSON source and heatmap layer*/}
          <ShapeSource
            id="earthquakes"
            url="https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson"
          >
            {console.log("Setting up HeatmapLayer") /* THIS IS THE CULPRIT*/}
            <HeatmapLayer id="hello" sourceID="earthquakes" />
            {/* <CircleLayer
              id="earthquakeCircle"
              sourceID="earthquakes"
              style={{
                circleRadius: 4,
                circleColor: "blue",
                circleOpacity: 0.6,
              }}
            /> */}
          </ShapeSource>
        </Mapbox.MapView>
  );
}

export default App;

Observed behavior and steps to reproduce

The Behavior:
When launching an app bundled with either Metro or EAS Expo, the rendering of HeatmapLayer appears to cause the application to crash. This is happening on Android without double checking IOS.

Upon launch of the app, we initially render the globe:

However the application crashes immediately with no error logs or logs of any kind.

There does not seem to be a deletion of the running instance of the app considering that the app can still be accessed via:

Reproduction:
The application was both tested via bundling EAS Expo and React Native Cli Metro.
The error was only able to be reproduced in Android.
Virtualization was used for both cases. -> need to check if it crashes on an Android device

My team discovered that upon calling <HeatmapLayer id="earthquakesHeat" sourceID="earthquakes" /> we obtain the "crash". However, calling <HeatmapLayer sourceID="earthquakes" /> (without the ID param) we obtain a globe without the heatmap render. However it does not crash when there is no ID param.

Exact reproduction method:

1. Create either an Expo EAS or a react-native Metro Project.
2. Use any android emulator using virtualization (any chipset, all failed thus far)
3. Run the following code mentioned above

Expected behavior

No response

Notes / preliminary analysis

No response

Additional links and references

No response