[Bug]: PointAnnotation collection not being rendered on screen first render

[abeledovictor]

Mapbox Implementation

Mapbox

Mapbox Version

default

React Native Version

0.74.2

Platform

iOS

@rnmapbox/maps version

10.1.25

Standalone component to reproduce

Works with a View

import { Camera, MapView, PointAnnotation } from "@rnmapbox/maps"
import React, { useState } from "react"
import { View, ImageBackground } from "react-native"

export default function MapComponent () {
  const [searchVenue] = useState([
    { long: -118.243683, lat: 34.052235, id: "LA" },
  ])

  return (
    <React.Fragment>
      <MapView
        rotateEnabled={false}
        scaleBarEnabled={false}
        logoEnabled={false}
        style={{ flex: 1 }}
        styleURL="mapbox://styles/mapbox/dark-v11"
      >
        <Camera
          minZoomLevel={12}
          zoomLevel={11}
          centerCoordinate={[searchVenue[0].long, searchVenue[0].lat]}
        />
        {searchVenue?.map((venue) => {
          return (
            <PointAnnotation
              key={venue.id}
              id={venue.id}
              coordinate={[venue.long, venue.lat]}
              allowOverlap={false}
            >
              <View
                style={{
                  width: 10,
                  height: 10,
                  borderRadius: 5,
                  backgroundColor: "red",
                }}
              />
              {/*
                // This doesn't work because it's using an ImageBackground
               <ImageBackground
                style={{
                  width: 40,
                  height: 40,
                  justifyContent: "center",
                }}
                resizeMode="contain"
                source={{uri:"https://png.pngtree.com/png-clipart/20191120/original/pngtree-map-location-marker-icon-in-red-png-image_5004115.jpg"}}
              /> */}

            </PointAnnotation>
          )
        })}
      </MapView>
    </React.Fragment>
  )
}

But it doesn't work with Image or BackgroundImage

Observed behavior and steps to reproduce

Steps to reproduce:

1. Navigate to the view that contains the component shared above
2. Wait until the lat and long position are shown

Expected behavior:
Location marker should show even on first render

Actual behavior:
Location marker only shows if the user goes back to the last screen and navigates again to the place where the component with Mapbox is present

Expected behavior

No response

Notes / preliminary analysis

This happens only when using an Image or BackgroundImage asset for PointAnnotation.

Issue related to #1020

Additional links and references

No response

[mfazekas]

You need to call PointAnnotation refresh from onLoad of image - see: https://rnmapbox.github.io/docs/components/PointAnnotation#refresh

[abeledovictor]

@mfazekas as far is I know that refresh method is for android only and this issue is happening on an iPhone / iOS

[abeledovictor]

@mfazekas tried it just in case but this does not fix the issue. This should still be open

[mfazekas]

I'll need to update the docs. If you're using v10 or later, then refresh is needed. It was required for android only on old versions, new versions always requires refresh.

If you can reproduce the issue with refresh pls add refresh to the reproducer.

[abeledovictor]

@mfazekas tried again it and it works. Thank you for the quick response and for contributing to this library!