[Bug]: Setting 'defaultSettings' on '<Mapbox.Camera />' showing the wrong location on very first render of the app

[sagarshakya]

Mapbox Implementation

Mapbox

Mapbox Version

default

React Native Version

0.72.4

Platform

Android

@rnmapbox/maps version

10.1.19

Standalone component to reproduce

import React from 'react';
import { StyleSheet, View } from "react-native";

import Mapbox from "@rnmapbox/maps";

Mapbox.setAccessToken("XXX");

export default function App() {
  return (
    <View style={styles.page}>
      <View style={styles.container}>
        <Mapbox.MapView style={styles.map}>
          <Mapbox.Camera
            defaultSettings={{
              centerCoordinate: [13.404684, 52.519254],
              zoomLevel: 14.5,
            }}
          />
        </Mapbox.MapView>
      </View>
    </View>
  );
}
const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  container: {
    height: "100%",
    width: "100%",
  },
  map: {
    flex: 1,
  },
});

Observed behavior and steps to reproduce

On the very first render of the map component, when you set the defaultSettings prop on <Mapbox.Camera />, the map shows the wrong location. After you reload the app (or close and open the app), the issue is fixed. The issue occurs only on the very first render. On all subsequent renders, the map shows the correct location as set with defaultSettings.

If you clear the app storage and open the app again, the issue persists.

https://github.com/rnmapbox/maps/assets/66957698/d870e171-141d-4bd2-93f2-1731ab26d700

Expected behavior

The map should show the value set as defaultSettings on <Mapbox.Camera /> component correctly.

Notes / preliminary analysis

No response

Additional links and references

No response

[McFly78]

Same for me on IOS. When using a created Mapbox studio style, the location used when the app first open is the default location configured for the style in "Default map position" on Mapbox studio.

[yossarin]

For me using "@rnmapbox/maps": "10.1.28" it works on IOS.

On Android I have to do a fix:

const defaultSettings = {
  zoomLevel: 5.55,
  centerCoordinate: [16.5, 44.47],
};

let firstRender = true;

class CameraController extends React.PureComponent {
  static propTypes = {...};

  componentDidMount() {
    if (firstRender && Platform.OS === 'android') {
      // https://github.com/rnmapbox/maps/issues/3449
      this.cameraRef.setCamera(defaultSettings);
    }

    firstRender = false;
  }

  render() {
    return (
      <MapboxGL.Camera
        defaultSettings={defaultSettings}
        ref={component => (this.cameraRef = component)}
      />
    );
  }