[Bug]: Crash on Android when array properties contain expressions for individual values

[davor-bauk-sh]

Mapbox Implementation

Mapbox

Mapbox Version

10.19.0

React Native Version

0.76.0

Platform

Android

@rnmapbox/maps version

10.1.37

Standalone component to reproduce

import React from 'react';
import {
  MapView,
  ShapeSource,
  SymbolLayer,
  Camera,
} from '@rnmapbox/maps';

const labels = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Point',
      coordinates: [-74.00597, 40.71427],
      properties: {
        text: 'A',
        icon: 'my-icon',
      },
    },
    {
      type: 'Point',
      coordinates: [-74.00597, 40.71427],
      properties: {
        text: 'A',
      },
    },
  ],
};

const labelsStyle = {
  textField: ['get', 'text'],
  textOffset: [
    ['case', ['has', 'icon'], 10, 0],
    0,
  ],
};

class BugReportExample extends React.Component {
  render() {
    return (
      <MapView style={{flex: 1}}>
        <Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
        <ShapeSource id="idStreetLayer" shape={labels}>
          <SymbolLayer id="idStreetLayer" style={labelsStyle} />
        </ShapeSource>
      </MapView>
    );
  }
}

Observed behavior and steps to reproduce

Using expressions for individual values in array properties like textOffset and iconTextFitPadding works in iOS but causes the following crash in Android:

com.facebook.react.bridge.UnexpectedNativeTypeException: Value for value cannot be cast from ReadableNative Array to double 
  at 
com.facebook.react.bridge.ReadableNativeMap.getDouble (ReadableNativeMap.kt:204)
  at 
com.rnmapbox.rnmbx.components.styles.RNMBXStyleValue.getFloatArray(RNMBXStyleValue.kt:85)
  at 
com.rnmapbox.rnmbx.components.styles.RNMBXStyleFactory.setTextOffset(RNMBXStyleFactory.kt:2124)
  at 
com.rnmapbox.rnmbx.components.styles.RNMBXStyleFactory.setSymbolLayerStyle(RNMBXStyleFactory.kt:272)
  at 
com.rnmapbox.rnmbx.components.styles.layers.RNMBXSymbolLayer.addStyles(RNMBXSymbolLayer.kt:33)
  at 
com.rnmapbox.rnmbx.components.styles.layers.RNMBXLayer.addToMap(RNMBXLayer.kt:300)
  at 
com.rnmapbox.rnmbx.components.styles.layers.RNMBXSymbolLayer.addToMap(RNMBXSymbolLayer.kt:20)
  at 
com.rnmapbox.rnmbx.components.styles.sources.RNMBXSource.addToMap(RNMBXSource.kt:133)
  at 
com.rnmapbox.rnmbx.components.styles.sources.RNMBXSource.addToMap(RNMBXSource.kt:155)
  at 
com.rnmapbox.rnmbx.components.styles.sources.RNMBXShapeSource.addToMap$lambda$0(RNMBXShapeSource.kt:50)
  at 
com.rnmapbox.rnmbx.components.styles.sources.RNMBXShapeSource.Sr8Slambda$1IL27C8f_2hNZMWt09DWNChfwilUnknownSource:0) 
  at 
com.rnmapbox.rnmbx.components.styles.sources.RNMBXShapeSource$SExternalSyntheticLambda1.onStyleLoaded(D8$§SyntheticClass:0)
  at 
com.mapbox.maps.MapboxMap.getStyle(MapboxMap.kt:360) 
  at 
com.rnmapbox.rnmbx.components.styles.sources.RNMBXShapeSource.addToMap(RNMBXShapeSource.kt:48)
  at 
com.rnmapbox.rnmbx.components.mapview.RNMBXMapView.addFeaturesToMap(RNMBXMapView.kt:521)
  at 
com.rnmapbox.rnmbx.components.mapview.RNMBXMapView.styleLoaded(RNMBXMapView.kt:288)
  at 
com.rnmapbox.rnmbx.components.mapview.RNMBXMapView.access$styleLoaded(RNMBXMapView.kt:204)
  at 
com.rnmapbox.rnmbx.components.mapview.RNMBXMapView$applyStyleURL$2.onStyleLoaded(RNMBXMapView.kt:674) 
  at 
com.mapbox.maps.StyleObserver.onStyleLoaded(StyleObserver.kt:99)
  at 
com.mapbox.maps.NativeObserver.notify(NativeObserver.kt:63)
  at 
android.os.MessageQueue.nativePollOnce(NativeMethod) 
  at 
android.os.MessageQueue.next(MessageQueue.java:335)
  at 
android.os.Looper.loopOnce(Looper.java:162)
  at 
android.os.Looper.loop(Looper.java:294)
  at 
android.app.ActivityThread.main(ActivityThread.java:8177)
  at 
java.lang.reflect.Method.invoke(Native Method)
  at 
com.android.internal.os.Runtimelnit$MethodAndArgsCaller.run(Runtimelnit.java:552)
  at 
com.android.internal.os.Zygotelnit.main(Zygotelnit.java:971)

Expected behavior

Allow using expressions for individual array values inside style properties that are specified as arrays on both platforms.

If this is not supported in both native SDKs, fail gracefully and show a javascript error or warning, avoiding a crash, and add a note to the docs.

Notes / preliminary analysis

Using expressions for individual array values in properties like textOffset and iconTextFitPadding seems to work in iOS but causes a crash on Android.

The workaround is to use an expression whose cases are arrays with constant values like so:

const labelsStyle = {
  textField: ['get', 'text'],
  textOffset: ['case', ['has', 'icon'], [10, 0], [0, 0]],
};

Additional links and references

No response