[Bug]:

[Kilowhisky]

Mapbox Implementation

Mapbox

Mapbox Version

11.14.1

React Native Version

0.81.4/*

Platform

iOS

@rnmapbox/maps version

10.1.40+

Standalone component to reproduce

import React from 'react';
import { Button } from 'react-native';
import {
  Images,
  MapView,
  ShapeSource,
  SymbolLayer,
  CircleLayer,
  Camera,
  VectorSource,
  LineLayer,
} from '@rnmapbox/maps';

const styles = {
  mapView: { flex: 1 },
  circleLayer: {
    circleRadiusTransition: { duration: 5000, delay: 0 },
    circleColor: '#ff0000',
  },
};

const features = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      id: 'a-feature',
      properties: {
        icon: 'example',
        text: 'example-icon-and-label',
      },
      geometry: {
        type: 'Point',
        coordinates: [-74.00597, 40.71427],
      },
    },
    {
      type: 'Feature',
      id: 'b-feature',
      properties: {
        text: 'just-label',
      },
      geometry: {
        type: 'Point',
        coordinates: [-74.001097, 40.71527],
      },
    },
    {
      type: 'Feature',
      id: 'c-feature',
      properties: {
        icon: 'example',
      },
      geometry: {
        type: 'Point',
        coordinates: [-74.00697, 40.72427],
      },
    },
  ],
};

class BugReportExample extends React.Component {
  state = {
    radius: 20,
  };

  render() {
    const circleLayerStyle = {
      ...styles.circleLayer,
      ...{ circleRadius: this.state.radius },
    };

   onImageMissing(image) {
      console.log(image);
   }

    return (
      <>
        <MapView style={styles.mapView}>
          <Camera
            defaultSettings={{
              centerCoordinate: [-87.622088, 41.878781],
              zoomLevel: 10,
            }}
          />
          <Images images={onImageMissing} />
          <VectorSource
            id="mapillary"
            tileUrlTemplates={[
              'https://tiles.mapillary.com/maps/vtp/mly1_public/2/{z}/{x}/{y}?access_token=MLY|4142433049200173|72206abe5035850d6743b23a49c41333'.replaceAll(
                '|',
                '%7C',
              ),
            ]}
          >
            <LineLayer
              id="mapillary-lines"
              sourceLayerID="sequence"
              style={{
                lineCap: 'round',
                lineJoin: 'round',
                lineOpacity: 0.6,
                lineColor: 'rgb(53, 175, 109)',
                lineWidth: 2.0,
              }}
            />
          </VectorSource>
          <ShapeSource id={'shape-source-id-0'} shape={features}>
            <CircleLayer
              id={'circle-layer'}
              style={circleLayerStyle}
              slot={'bottom'}
            />
            <SymbolLayer
              id="symbol-id"
              style={{
                iconImage: ['get', 'icon'],
              }}
              slot={'middle'}
            />
          </ShapeSource>
        </MapView>
      </>
    );
  }
}

export default BugReportExample;

Observed behavior and steps to reproduce

Look at the console and see that the output is 'undefined'.

Expected behavior

it should be 'example'

Notes / preliminary analysis

This worked correctly on 10.1.39 and below. The react/native version doesn't matter. Neither does the mapbox version. I tested with v11 and v10.

Additional links and references

No response

[github-actions]

Lint failed 😭

Please fix the errors in your code example - More info.:

error: Parsing error: Unexpected token { at example.jsx:74:26:
  72 |     };
  73 | 
> 74 |    onImageMissing(image) {
     |                          ^
  75 |       console.log(image);
  76 |    }
  77 | 


1 error found.```