All custom images will not display on PointAnnotations - React Native Mapbox - @rnmapbox/maps

Question

Tried every possible solution found online, but I am still getting the same issue, it loads up only 1 image out of the 4 images I am trying to display.

I also tried to add a setTimeOut

<>
  {filteredList.map((item, i) => {
    return (
      <PointAnnotation
        coordinate={item.locations.coordinates}
        id={`pointAnnotation_${item._id}`}
        key={`pointAnnotation_${item._id}`}
        title={`current_${item._id}`}
        // anchor={{ y: 1, x: 0.5 }}
      >
        <View style={styles.locationWrapper}>
          <View style={styles.innerLocationWrapper}>
            <Image
              source={PIN}
              style={styles.imageStyle}
              resizeMode={'contain'}
            />
            <View
              style={[
                {
                  backgroundColor: item.dealType
                    ? DARK_PURPLE
                    : SELECTED_COLOR,
                },
                styles.kmWrapper,
              ]}>
              <Text style={styles.milesTextStyle}>
                {getDistance(item.locations)}
              </Text>
              {item.category && (
                <Ionicons
                  name={item.category.toLowerCase()}
                  color={WHITE}
                  size={10}
                />
              )}
            </View>
          </View>
        </View>
      </PointAnnotation>
    );
  })}
</>

Answer 1

I had a similar issue and I believe it is caused by not refreshing the PointAnnotation on load of the image (React Native Image component's onLoad function).

Here is an example of getting it to work:

<Mapbox.PointAnnotation
  draggable
  ref={(ref) => {
    pointAnnotationRefs.current[pin.id] = ref
  }}
  id={pin.id}
  coordinate={pin.coordinates}>
  <View>
    <Image
     source={require(<image source>)}
     style={{ width: 40, height: 40 }}
     // Prevent rendering bitmap at unknown animation state
     fadeDuration={0}
     onLoad={() => {
       pointAnnotationRefs?.current?.[pin.id]?.refresh()
     }}
    />
  </View>
</Mapbox.PointAnnotation>

Here is the answer I gave to my own question: https://stackoverflow.com/a/78399787/2079868