Camera bounds the right way?

[MUGWANEZAMANZI]

Hello Team! Given the way I set my MapView and camera prop, setting bounds in this file crashes my screen. What is the right way I can follow. What I want to achieve in my application is having users only able to zoom in my country Rwanda only, he can't see out of Rwanda

return (
    <View style={{ flex: 1 }}>
      <MapView
        style={{ flex: 1 }}
        camera={{
          centerCoordinate,
          zoom: zoom,
        }}
        onCameraChanged={(camera) => {
          const restrictedCamera = restrictToRwanda(camera);
          if (restrictedCamera.properties.zoom) {
            setZoom(restrictedCamera.properties.zoom);
          }
        }}
      >
        <RasterSource
          id="maptiler"
          tileUrlTemplates={["https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=mykey"]}
          tileSize={256}
        >
          <RasterLayer id="maptiler-layer" sourceID="maptiler" />
        </RasterSource>

        {/* Route line */}
        {routeCoordinates && (
          <ShapeSource id="route" shape={routeCoordinates}>
            <LineLayer
              id="route-line"
              style={{
                lineColor: '#007AFF',
                lineWidth: 4,
                lineOpacity: 0.8,
              }}
            />
          </ShapeSource>
        )}
        
        {/* User's live location with animated circle */}
        {validUserLocation && (
          <MarkerView coordinate={[validUserLocation.longitude, validUserLocation.latitude]}>
            <View style={{
              alignItems: 'center',
              justifyContent: 'center',
              width: getCircleSize() * 2,
              height: getCircleSize() * 2,
            }}>
              {/* Animated outer circle */}
              <Animated.View
                style={{
                  position: 'absolute',
                  width: getCircleSize(),
                  height: getCircleSize(),
                  borderRadius: getCircleSize() / 2,
                  backgroundColor: '#007AFF',
                  transform: [{ scale: scaleAnim }],
                  opacity: opacityAnim,
                }}
              />
              {/* Inner solid circle */}
              <View
                style={{
                  width: getCircleSize() * 0.4,
                  height: getCircleSize() * 0.4,
                  borderRadius: (getCircleSize() * 0.4) / 2,
                  backgroundColor: '#007AFF',
                  borderWidth: 2,
                  borderColor: 'white',
                  shadowColor: '#000',
                  shadowOffset: { width: 0, height: 2 },
                  shadowOpacity: 0.3,
                  shadowRadius: 3,
                  elevation: 5,
                }}
              />
            </View>
          </MarkerView>
        )}
        
        {/* Dorm markers - fix coordinate order and size */}
        {validMarkers.map((coord, index) => {
          const lng = typeof coord.longitude === 'string' ? parseFloat(coord.longitude) : coord.longitude;
          const lat = typeof coord.latitude === 'string' ? parseFloat(coord.latitude) : coord.latitude;
          return (
            <MarkerView key={index} coordinate={[lng, lat]}>
              <TouchableOpacity onPress={() => openDetailsModal(coord)}>
                <View style={{ width: getCircleSize() * 0.4, height: getCircleSize() * 0.4, borderRadius: (getCircleSize() * 0.4) / 2, backgroundColor: 'red', borderWidth: 2, borderColor: 'white', shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.3, shadowRadius: 3, elevation: 5 }} />
              </TouchableOpacity>
            </MarkerView>
          );
        })}
      </MapView>

[KiwiKilian]

You want to use bounds and maxBounds on the Camera. Check out this example.

[MUGWANEZAMANZI]

I try this following the above solution my my app always shows a white screen.
https://github.com/MUGWANEZAMANZI/MyApp-Testing