PointAnnotation now showing up

[Ladvace]

Hello, I'm trying to show a custom icon on the map but it's not showing up, not sure why

import React, { useEffect, useState, useRef } from "react";
import { Alert, Image, StyleSheet, View } from "react-native";
import Mapbox, { PointAnnotation } from "@rnmapbox/maps";
import * as Location from "expo-location";
import { Button } from "react-native";

Mapbox.setAccessToken(
  "MY_TOKEN"
);

const App = () => {
  const [location, setLocation] = useState();

  const pointAnnotationRef = useRef(null);

  useEffect(() => {
    (async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== "granted") {
        // setErrorMsg("Permission to access location was denied");
        return;
      }

      let location = await Location.getCurrentPositionAsync({});

      setLocation(location);
    })();
  }, []);

  return (
    <View style={styles.page}>
      <View style={styles.container}>
        {location?.coords && (
          <Mapbox.MapView
            style={styles.map}
            followsUserLocation={true}
            region={location.coords}
            coordinate={[-1.510311133796023, 53.816142903704616]}
          >
            <Mapbox.Camera
              zoomLevel={1}
              followUserMode="compass"
              followUserLocation
            />

            <Mapbox.PointAnnotation
              id="point"
              title="test"
              ref={pointAnnotationRef}
              coordinate={[location.coords.latitude, location.coords.longitude]}
              style={{ height: 300, width: 300 }}
            >
              <View style={{ height: 300, width: 300 }}>
                <Mapbox.Image
                  onLoad={() => {
                    console.log("pointAnnotation", pointAnnotationRef);
                    pointAnnotationRef.current?.refresh();
                  }}
                  // source={require("./assets/favicon.png")}
                  source={{ uri: "https://reactnative.dev/img/tiny_logo.png" }}
                  style={{ height: 300, width: 300 }}
                />
              </View>
            </Mapbox.PointAnnotation>
            <Mapbox.UserLocation
              shouldShowUserLocation={true}
              coordinate={location.coords}
              showsUserHeadingIndicator={true}
              animated={true}
            />
          </Mapbox.MapView>
        )}
      </View>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  container: {
    height: "100%",
    width: "100%",
  },
  map: {
    flex: 1,
  },
});

[mfazekas]

@Ladvace what version, what OS, what mapbox version?

[Ladvace]

macOS 14.1.2
"@rnmapbox/maps": "^10.0.15",
"expo": "^49.0.21",
"react-native": "0.72.6"

[mfazekas]

android or iOS

[Ladvace]

IOS iPhone SE (3rd generation) sorry

[Ladvace]

I don't know if it can be related or not but I also get this error in the logs:

[MapboxCommon] [Error, maps-ios/Location]: <rnmapbox_maps.RCTMGLAppleLocationProvider: 0x600003504790> did fail with error: Error Domain=kCLErrorDomain Code=0 "(null)"