Markers not showing in IOS

[rochijacob]

Hi!!

I am having a huge problem as markers are not being show in IOS (yet they do in android). I am using Expo (development build) for my app. My code is as follows:

Config file:

plugins: [
      [
        "@rnmapbox/maps",
        {
          "RNMapboxMapsImpl": "mapbox",
          "RNMapboxMapsDownloadToken": "MY_TOKEN"
        }
      ]
      ]

import MapboxGL, { Camera, MapView, MarkerView, offlineManager } from '@rnmapbox/maps';
import geoViewport from '@mapbox/geo-viewport';

MapboxGL.setWellKnownTileServer('Mapbox');
MapboxGL.setAccessToken('MY_ACCESS_TOKEN');

const CENTER_COORD = [-83.7680103841464, 9.183611130691833];
const MAPBOX_VECTOR_TILE_SIZE = 512;
const STYLE_URL = 'MY_MAPBOX_STYLE';


const MapScreen = () => {
  const { width, height } = useWindowDimensions()
  const camera = useRef(null);
  const [packName, setPackName] = useState('pack');
  const [selectedPoint, setSelectedPoint] = useState(null);
  const [markerScale, setMarkerScale] = useState(0);
  const mapview = useRef(null);
  const marker = useRef(null);

  const handlePinClick = (coordinate) => {
    setSelectedPoint(coordinate);
  };


  const getPack = async () => {
    const pack = await offlineManager.getPack(packName);
    console.log('=> packs:', pack);
    if (pack) {
      console.log(
        'pack:',
        pack,
        'name:',
        pack.name,
        'bounds:',
        pack?.bounds,
        'metadata',
        pack?.metadata,
      );

      console.log('=> status', await pack?.status());
    }
  }

  const cratePack = async () => {

    const bounds = geoViewport.bounds(
      CENTER_COORD,
      12,
      [width, height],
      MAPBOX_VECTOR_TILE_SIZE,
    );

    const options = {
      name: packName,
      styleURL: STYLE_URL,
      bounds: [
        [bounds[0], bounds[1]],
        [bounds[2], bounds[3]],
      ],
      minZoom: 10,
      maxZoom: 20,
      metadata: {
        whatIsThat: 'foo',
      },
    };

    offlineManager.createPack(options, (region, status) =>
      console.log(
        'status: ',
        status,
      ),
    );

  }

useEffect(() => {
    MapboxGL.locationManager.start();
    getPack();


    const bounds = geoViewport.bounds(
      CENTER_COORD,
      12,
      [width, height],
      MAPBOX_VECTOR_TILE_SIZE,
    );

    console.log('=> bounds', bounds);

    return () => {
      MapboxGL.locationManager.stop();
    };
  }, []);

  useEffect(() => {
    if (camera.current) {
      camera.current.setCamera({
        centerCoordinate: [-83.7680103841464, 9.183611130691833],
        zoomLevel: 16,
      });
      camera.current.flyTo([-83.7680103841464, 9.183611130691833], 2000);
      setMarkerScale(1);
    }


  }, [camera]);

  const getZoom = async () => {
    const zoom = await mapview.current?.getZoom();
    if (zoom <= 13) {
      setMarkerScale(0);  // El marcador se oculta completamente.
    } else if (zoom <= 14) {
      const scale = zoom - 13;  // Esto dará un valor entre 0 y 0.7.
      setMarkerScale(scale);
    } else {
      setMarkerScale(1);  // Tamaño normal del marcador.
    }
  }

  return (
    <ContainerPage style={{ flex: 1, width: '100%', backgroundColor: '#ebebde' }}>
      <View style={styles.page}>
        {/* <Button title="Create Pack" onPress={cratePack} /> */}
        <View style={[styles.container, { width: width }]}>
          <MapView
            style={styles.map}
            ref={mapview}
            styleURL='mapbox://styles/muvinai/cln3hlwst06rr01qbhqyt982l'
            scaleBarEnabled={true}
            // onRegionWillChange={getZoom}
            onRegionIsChanging={getZoom}
          >
            <Camera zoomLevel={15} centerCoordinate={CENTER_COORD} />

            {venueSample.map((venue, index) => {
              return (
                <MarkerView key={index} coordinate={venue?.location?.coordinates} allowOverlap={false}>
                  <TouchableOpacity style={{ alignItems: 'center' }} onPress={() => handlePinClick({ coords: venue?.location?.coordinates, index: index })}>
                    <Image source={{ uri: venue?.icon?.url }} style={{ width: 60 * markerScale, height: 50 * markerScale }} />
                    <Text style={{ fontFamily: FONTS.medium, fontSize: SIZES.small * markerScale }}>{venue.name} Stage</Text>
                  </TouchableOpacity>
                </MarkerView>
              );
            })}
            {selectedPoint && selectedPoint.coords ?
              (
                <MapModal selectedPoint={selectedPoint} setSelectedPoint={setSelectedPoint} />
              ) : null
            }
          </MapView>
        </View>
      </View>
    </ContainerPage>
  );
};

I don't know if this is a bug or an error in the structure of my code.

I will appreciate any answers that could help me. As you can see I am trying to put marker images with modals.