[Bug]: MarkerView does not render Image in React Native 0.76.1

[alex-mironov]

Mapbox Implementation

Mapbox

Mapbox Version

default

React Native Version

0.76.1

Platform

iOS

@rnmapbox/maps version

10.1.33

Standalone component to reproduce

import React from "react";
import { StyleSheet, View, Image, SafeAreaView } from "react-native";
import Mapbox from "@rnmapbox/maps";

Mapbox.setAccessToken(
  "pk..",
);

const MapBox = () => {
  return (
    <View style={{ flex: 1 }}>
      <SafeAreaView>
        <View style={{ borderWidth: 1 }}>
          <Image
            style={{
              width: 24,
              height: 24,
              backgroundColor: "rgb(251, 113, 133)",
            }}
            source={{
              uri: "https://reactnative.dev/img/tiny_logo.png",
            }}
          />
        </View>
      </SafeAreaView>

      <Mapbox.MapView style={styles.map}>
        <Mapbox.Camera
          zoomLevel={12}
          centerCoordinate={[-74.00597, 40.71427]}
          animationMode="moveTo"
          animationDuration={0}
        />
        <Mapbox.PointAnnotation
          id="temp"
          coordinate={[-74.00597, 40.71427]}
          onSelected={() => {
            // TODO:
          }}
        >
          <Mapbox.MarkerView coordinate={[-74.00597, 40.71427]}>
            <View style={{ backgroundColor: "rgb(251, 113, 133)" }}>
              <Image
                style={{ width: 24, height: 24 }}
                source={{
                  uri: "https://reactnative.dev/img/tiny_logo.png",
                }}
              />
            </View>
          </Mapbox.MarkerView>

          <Mapbox.Callout
            containerStyle={styles.calloutContainer}
            style={styles.callout}
            textStyle={styles.calloutText}
            tipStyle={styles.calloutTip}
            contentStyle={styles.contentStyle}
            title={"Custom Pin"}
          />
        </Mapbox.PointAnnotation>
      </Mapbox.MapView>
    </View>
  );
};

export default MapBox;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    flex: 1,
  },
  calloutContainer: {},
  callout: {},
  contentStyle: {
    borderRadius: 8,
  },
  calloutText: {
    color: '#000000',
    letterSpacing: 0.25,
  },
  calloutTip: {
    borderTopWidth: 10,
    borderLeftWidth: 8,
    borderRightWidth: 8,
    borderTopColor: '#ffffff',
    borderLeftColor: "transparent",
    borderRightColor: "transparent",
  },
});

Observed behavior and steps to reproduce

MarkerView is not rendering custom image in React Native v.76.0.

Expected behavior

When using custom image it should be rendered correctly in MarkerView

Notes / preliminary analysis

No response

Additional links and references

No response

[whoiscarlo]

Any updates on this?

[kevinxu3]

Experiencing a similar issue. Also expo vector icons don't seem to show correctly and some styling does not load correctly. If you make a code change and hot reload, everything loads correctly.

[mfazekas]

<Mapbox.PointAnnotation id="temp" coordinate={[-74.00597, 40.71427]} onSelected={() => { // TODO: }} > <Mapbox.MarkerView coordinate={[-74.00597, 40.71427]}>

Not sure why you have a MarkerView embedded into PointAnnotation?!  That's not something we support.
Closing this for now. MarkerView should work with Images, PointAnnotations will need a refresh after the images has been downloaded