Set rnmapbox lat and long and center map on point

Question

I'm getting rnmapbox to render on my rn app but when looing into a way to pass some coordinates as to set the initial view of the map cenered on this location im strugguling on finding he appropiate preoperty for the Mapbox.Mapview JSX componet, I might need to use another JSX compoent?

So currently my react native code where the mapscreen.tsx is using this component looks like this:

return (
        <>
            <BusinessPreviewCard business={business} />
            <View style={styles.container}>
                <Mapbox.MapView style={styles.map} />
            </View>
            <Button
                mode="contained"
                onPress={() => {
                    navigation.navigate("BusinessSearchScreen");
                }}
            >
                Back to main
            </Button>
        </>
    );

Tried to pass dome different props after style but have worked so far, seems like these were Mapbox and not rnmapbox properties.

Answer 1

Place MapboxGL.Camera within your MapView and specify the centerCoordinate as a prop.

<MapboxGL.MapView style={styles.map}>
  <MapboxGL.Camera
    centerCoordinate={[LNG, LAT]}
    zoomLevel={16}
  />
</MapboxGL.MapView>

You can also create a ref for your Camera and programmatically update the position.

cameraRef.current?.setCamera({
  centerCoordinate: [LNG, LAT],
  zoomLevel: 16,
  animationDuration: 1,
});