[Bug]: iOS topImage inconsistent rendering

[lgspacil]

Mapbox Implementation

Mapbox

Mapbox Version

default

React Native Version

0.71.8

Platform

iOS

@rnmapbox/maps version

10.1.19

Standalone component to reproduce

import React, { useRef, useEffect, useState } from 'react';
import Mapbox, { MapView, Camera, CustomLocationProvider, LocationPuck, Viewport } from '@rnmapbox/maps';
import { Icon } from 'react-native-elements';

export default function BugReportExample() {
   const [style, setStyle] = useState('mapbox://styles/mapbox/streets-v11');
   const [bearing, setBearing] = useState(0);
   const [location, setLocation] = useState([-74.00597, 40.71427]);
   const [prevLocation, setPrevLocation] = useState<number[] | null>(null);
   const viewportRef = useRef<Viewport | null>(null);

   // Bearing calculation function
   function calculateBearing(lat1, lon1, lat2, lon2) {
       const radLat1 = (lat1 * Math.PI) / 180;
       const radLat2 = (lat2 * Math.PI) / 180;
       const deltaLon = ((lon2 - lon1) * Math.PI) / 180;
       const y = Math.sin(deltaLon) * Math.cos(radLat2);
       const x = Math.cos(radLat1) * Math.sin(radLat2) - Math.sin(radLat1) * Math.cos(radLat2) * Math.cos(deltaLon);
       const bearing = (Math.atan2(y, x) * 180) / Math.PI;
       return (bearing + 360) % 360;
   }

   useEffect(() => {
       const interval = setInterval(() => {
           setLocation(location => {
               // Calculate the bearing if prevLocation exists
               if (prevLocation) {
                   const newBearing = calculateBearing(
                       prevLocation[1],
                       prevLocation[0],
                       location[1] + 0.0001,
                       location[0] + 0.0001
                   );
                   setBearing(newBearing);
               }
               const newLocation = [location[0] + 0.0001, location[1] + 0.0001];
               // Update prevLocation with the current location before it changes
               setPrevLocation(location);
               return newLocation;
           });
       }, 500);
       return () => clearInterval(interval);
   }, [prevLocation]);

   return (
       <>
           <MapView
               style={{ flex: 1 }}
               onDidFinishLoadingStyle={() => {
                   viewportRef.current?.transitionTo({ kind: 'followPuck' }, { kind: 'default' });
               }}
               styleURL={style}>
               <Mapbox.Images
                   images={{
                       userLocationTopImage: "<path to image>",
                   }}
               />
               <Camera
                   defaultSettings={{
                       centerCoordinate: [-74.00597, 40.71427],
                       zoomLevel: 14,
                   }}
                   followZoomLevel={14}
                   followUserLocation={true}
               />
               <Viewport ref={viewportRef} />
               <CustomLocationProvider coordinate={location} heading={bearing} />
               <LocationPuck
                   visible={true}
                   puckBearingEnabled={true}
                   topImage={'userLocationTopImage'}
                   scale={['interpolate', ['linear'], ['zoom'], 10.0, 1.0, 20.0, 2.0]}
               />
           </MapView>
           <Icon
               onPress={() => {
                   setStyle(
                       style === 'mapbox://styles/mapbox/streets-v11'
                           ? 'mapbox://styles/mapbox/satellite-v9'
                           : 'mapbox://styles/mapbox/streets-v11'
                   );
               }}
               containerStyle={{
                   position: 'absolute',
                   bottom: 10,
                   right: 0,
               }}
               raised
               name='layers'
               type='material'
               color={'black'}
           />
       </>
   );
}

Observed behavior and steps to reproduce

There is a bug with <LocationPuck />. It works perfectly fine on Android devices but on iOS the topImage is flipped on initial load. When I change the map style the image again flips and the scale is off.

iOS Device is on the left Android Device is on the right

https://github.com/rnmapbox/maps/assets/17690783/8429d7df-3bd4-491a-9411-aa0b4c09b418

Expected behavior

No response

Notes / preliminary analysis

No response

Additional links and references

No response

[RemiHin]

same issue