[Bug]: Camera does not animate in expo web app

Mapbox Implementation

Maplibre

Mapbox Version

11.4.0

React Native Version

0.76.1

Platform

Android

@rnmapbox/maps version

10.1.33

Standalone component to reproduce

import React from 'react';
import { Alert, Platform } from 'react-native';
import Mapbox from '@rnmapbox/maps';
import { ButtonGroup } from '@rneui/base';

Mapbox.setAccessToken("pk.eyJ1IjoiZHV...");

const layerStyles = {
  building: {
    fillExtrusionColor: '#aaa',

    fillExtrusionHeight: [
      'interpolate',
      ['linear'],
      ['zoom'],
      15,
      0,
      15.05,
      ['get', 'height'],
    ],

    fillExtrusionBase: [
      'interpolate',
      ['linear'],
      ['zoom'],
      15,
      0,
      15.05,
      ['get', 'min_height'],
    ],

    fillExtrusionOpacity: 0.6,
  },
};

const styles = {
  matchParent: { flex: 1 },
};

class FlyTo extends React.Component {
  static SF_OFFICE_LOCATION = [-122.400021, 37.789085];

  static DC_OFFICE_LOCATION = [-77.036086, 38.910233];

  static ZERO_ZERO = [0, 0];
  static ZERO_TEN = [0, 10];
  static TEN_ZERO = [10, 0];

  constructor(props) {
    super(props);

    this.state = {
      location: FlyTo.SF_OFFICE_LOCATION,
    };

    this._flyToOptions = [
      { label: 'SF', data: FlyTo.SF_OFFICE_LOCATION },
      { label: 'DC', data: FlyTo.DC_OFFICE_LOCATION },
      { label: '0,0', data: FlyTo.ZERO_ZERO },
      { label: '0,10', data: FlyTo.ZERO_TEN },
      { label: '10,0', data: FlyTo.TEN_ZERO },
    ];

    this.onFlyToPress = this.onFlyToPress.bind(this);
    this.onFlyToComplete = this.onFlyToComplete.bind(this);
  }

  onFlyToPress(i) {
    this.setState({ location: this._flyToOptions[i].data, selectedIndex: i });
  }

  onFlyToComplete() {
    Alert.alert('Fly To Animation Completed', 'We did it!!!');
  }

  render() {
    return (
      <>
        <ButtonGroup
          buttons={this._flyToOptions.map((i) => i.label)}
          selectedIndex={this.state.selectedIndex}
          onPress={(i) => this.onFlyToPress(i)}
        />
        <Mapbox.MapView style={styles.matchParent}>
          <Mapbox.Camera
            zoomLevel={16}
            animationMode={'flyTo'}
            animationDuration={6000}
            centerCoordinate={this.state.location}
          />

          {Platform.OS !== 'web' && (
            <>
              <Mapbox.UserLocation />

              <Mapbox.FillExtrusionLayer
                id="building3d"
                sourceLayerID="building"
                style={layerStyles.building}
              />
            </>
          )}
        </Mapbox.MapView>
      </>
    );
  }
}

export default FlyTo;

Observed behavior and steps to reproduce

This is occuring when running a web instance of a react-native/expo app.

I created a brand new react-native/expo app. I then pasted the "FlyTo" example code into index.tsx. The app starts fine, and the map is fully interactive. However, pressing the buttons to fly to a new location has no effect whatsoever.

Expected behavior

I expect the map to animate a change of view when any of the buttons are pressed in the "FlyTo" example.

Notes / preliminary analysis

I originally was having this issue in a more developed app (not an example). After fiddling with it for a long time, I decided to see if one of the examples was even working. It is not.

Additional links and references

No response

Start by running the FlyTo example in index.tsx on the Expo web instance and inspect the Mapbox.Camera update when a ButtonGroup button changes location. Done means the map changes view with the flyTo animation after each button press.