[Bug]: v11 LocationPuck topImage/bearingImage crashes with Buffer not large enough for pixels

[DavidAmyot]

Mapbox Implementation

Mapbox

Mapbox Version

11.0.0

React Native Version

0.76.5

Platform

Android

@rnmapbox/maps version

10.1.33

Standalone component to reproduce

import React from "react";
import { FC } from "react";
import { StyleSheet } from "react-native";

import Mapbox, { LocationPuck, MapView } from "@rnmapbox/maps";

import headingArrow from "@assets/images/arrow.png";

Mapbox.setAccessToken("sk.someAccessToken");

const SomeScreen: FC = () => {
  return (
    <>
      <MapView style={StyleSheet.absoluteFillObject}>
        <Mapbox.Images images={{ headingArrow }} />

        <LocationPuck
          puckBearingEnabled
          puckBearing="heading"

          // Setting either `topImage` or `bearingImage` causes the error
          topImage="headingArrow"     // RNMapbox v11: `topImage` causes the error
          bearingImage="headingArrow" // RNMapbox v11: `bearingImage` causes the error
        />
      </MapView>
    </>
  );
};

export default SomeScreen;

Observed behavior and steps to reproduce

⚠ Issue DOES NOT HAPPEN when using v10.

Contextual information

• I use the latest expo version.
• Expo-doctor is free of any warnings or errors.
• Tested with fresh expo local development builds every time.
• Tested with new architecture enabled and disabled.
• Tested with a Samsung Galaxy Tab Active4 Pro 5G tablet that is new and freshly formatted, works for everything else.
• Before every new local development builds, completely uninstalled the app from the device.
• I was actually using const headingArrow = require("@assets/images/arrow.png");, but the linter closed the issue because of the require so I had to change it to import.

Steps to reproduce

1. Enable v11 with RNMapboxMapsVersion: "11.0.0" and locationWhenInUsePermission: "Show current location on map." in app.config.ts.
2. Inside MapView, define image asset with <Mapbox.Images images={{ someImage: someIcon }} /> as the first child of MapView.
3. With the LocationPuck component, use either topImage or bearingImage with the defined image string, so with the previous point taken into account: topImage="someImage" or bearingImage="someImage".
4. Render the screen.
5. Notice error crash.

Observed behavior

One thing I noticed is that it can work for a brief amount of time before the next rerender with the following scenario:

1. Add the LocationPuck component in the screen WITHOUT topImage or bearingImage in the MapView screen.
2. Navigate to the screen that renders the MapView, everything should work perfectly fine.
3. Add topImage or bearingImage to LocationPuck.
4. Notice that the LocationPuck works and the icon is rendered perfectly fine, heading also works when moving the device around.
5. Either cause a rerender or simply go back to the previous screen and come back to the screen with the MapView and notice the error crash.

So if you render the component at first without the topImage or bearingImage and then you add topImage or bearingImage, it will work until the MapView or screen is rerendered. However, if you add it right away before going to the screen with the MapView, you will get the error straight away.

Things I tried

• For defining the image, I tried the following:
  -<Mapbox.Images images={{ headingArrow: require("@assets/images/arrow.png") }} />.
  -<Mapbox.Images images={{ headingArrow: require("../../assets/images/arrow.png") }} />.
  -<Mapbox.Images images={{ headingArrow: "https://cdn-icons-png.flaticon.com/128/879/879658.png" }} />.
  -<Mapbox.Images images={{ headingArrow: headingIcon }} /> (headingIcon being defined in a const before the return).
• I tried using v10 and it works perfectly fine.
• I tried multiple different png images.
• I tried using a remote link for the image.
• I tried with the new architecture enabled and disabled (no differences).
• I tried with different png image sizes, namely 48x48, 64x64, 72x72, 96x96, 100x100 and 512x512.

Error

 ERROR  Your app just crashed. See the error below.
java.lang.RuntimeException: Buffer not large enough for pixels
  android.graphics.Bitmap.copyPixelsFromBuffer(Bitmap.java:670)
  com.rnmapbox.rnmbx.v11compat.image.ImageKt.toImageHolder(Image.kt:84)
  com.rnmapbox.rnmbx.components.location.RNMBXNativeUserLocation.subscribe$lambda$9(RNMBXNativeUserLocation.kt:238)
  com.rnmapbox.rnmbx.components.location.RNMBXNativeUserLocation.$r8$lambda$ux2KRWbmdbrF7MBkObgxs4m3kzo(Unknown Source:0)
  com.rnmapbox.rnmbx.components.location.RNMBXNativeUserLocation$$ExternalSyntheticLambda0.resolved(D8$$SyntheticClass:0)
  com.rnmapbox.rnmbx.components.images.Subscription.resolved(ImageManager.kt:19)
  com.rnmapbox.rnmbx.components.images.ImageManager.resolve(ImageManager.kt:42)
  com.rnmapbox.rnmbx.components.images.ImageManager.resolve(ImageManager.kt:47)
  com.rnmapbox.rnmbx.utils.DownloadMapImageTask$downloadImage$1$1.invokeSuspend(DownloadMapImageTask.kt:86)
  kotlin.coroutines.jvm.internal.BaseContinuationImpl.resumeWith(ContinuationImpl.kt:33)
  kotlinx.coroutines.DispatchedTask.run(DispatchedTask.kt:104)
  android.os.Handler.handleCallback(Handler.java:958)
  android.os.Handler.dispatchMessage(Handler.java:99)
  android.os.Looper.loopOnce(Looper.java:230)
  android.os.Looper.loop(Looper.java:319)
  android.app.ActivityThread.main(ActivityThread.java:8934)
  java.lang.reflect.Method.invoke(Native Method)
  com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:578)
  com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1103)

Screenshots

Expected behavior

No response

Notes / preliminary analysis

No response

Additional links and references

No response