Missing symbol layer and mbtiles text not showing on maps.

[KDKasonde]

Describe and reproduce the Bug

I am trying to add a symbol to the map using an image (png) but nothing is rendered onto the map so I generated this example code to make sure there was not something I am missing here.

Steps to reproduce;

Create new project and install dependencies

npx create-expo-app Example --template blank
cd Example
npx expo install @maplibre/maplibre-react-native

edit app.json with by adding plugins section

    "plugins": [
      "@maplibre/maplibre-react-native"
    ]

update App.js

import { MapView, Images, SymbolLayer, ShapeSource, Camera } from '@maplibre/maplibre-react-native';


const markerIconPath = "./assets/marker-icon.png";
export default function App() {
  const COORDINATES = [-0.1276, 51.5072];
  const pointGeoJson = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: COORDINATES,
        },
        properties: {},
      },
    ],
  };
  return (

    <MapView
      style={{ flex: 1 }}
    >
      <Camera
        zoomLevel={17}
        centerCoordinate={COORDINATES}
        animationMode={'flyTo'}
        animationDuration={1500}
      />
      <Images images={{ "markerIcon": markerIconPath }} />
      <ShapeSource id="markerSource" shape={pointGeoJson}>
        <SymbolLayer
          id="markerLayer"
          style={{
            iconImage: "markerIcon",
            iconSize: 1,
            iconAllowOverlap: true,
            iconIgnorePlacement: true,
            symbolPlacement: "point"
          }}
        />
      </ShapeSource>
    </MapView>
  );
}

create native module and run development build

npx create-expo-module@latest --local
npx expo run

Once opened in android emulator default maps shows (zoomed in) but no symbol rendered.

I am using the following:

• expo version 53.0.19
• react-native 0.79.5
• react 19.0.0

I have also had issues with mbtiles served from a self hosted tileserver-gl from maptiler however I have not gotten far with creating a good example of this. Since it requires creating the tile server, tiles and style.json to use in maplibre... But if anyone has any ideas on this I would greatly appreciate it.

@maplibre/maplibre-react-native Version

10.2.0

Which platforms does this occur on?

Android Emulator

Which frameworks does this occur on?

Expo

Which architectures does this occur on?

New Architecture

Environment

expo-env-info 1.3.4 environment info:
    System:
      OS: Linux 6.12 Pop!_OS 22.04 LTS
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 23.9.0 - ~/.nvm/versions/node/v23.9.0/bin/node
      npm: 10.9.2 - ~/.nvm/versions/node/v23.9.0/bin/npm
    npmPackages:
      expo: ~53.0.17 => 53.0.19 
      react: 19.0.0 => 19.0.0 
      react-native: 0.79.5 => 0.79.5 
    npmGlobalPackages:
      eas-cli: 16.14.1
    Expo Workflow: bare

[KDKasonde]

I have given this a go using the old architecture as well but that did not seem to improve the map at all.

[KiwiKilian]

Thanks for the report. You should be importing the Asset like this example:

maplibre-react-native/examples/shared/src/examples/SymbolCircleLayer/ShapeSourceIcon.tsx

Lines 9 to 28 in f281cd7

	import maplibreIcon from "../../assets/images/maplibre.png";
	import { FEATURE_COLLECTION } from "../../constants/GEOMETRIES";
	import { sheet } from "../../styles/sheet";
	export function ShapeSourceIcon() {
	const [images, setImages] = useState({
	[FEATURE_COLLECTION.features[0]!.properties.name]: maplibreIcon,
	});
	return (
	<MapView style={sheet.matchParent}>
	<Images
	images={images}
	onImageMissing={(imageKey) =>
	setImages((prevState) => ({
	...prevState,
	[imageKey]: maplibreIcon,
	}))
	}
	/>

[KDKasonde]

Thanks @KiwiKilian will give this a go now. Also do you have any guidance on why road names, country names etc... and some sprites arent rendered? I tried with tbe default map bo text appeared, a map tiler map no text (blue blocks) but sprites and a self hosted map no text (blue blocks) and sprites flashing in and out.

[KDKasonde]

Hey I gave this a go and it did get on better than before but the icon did not fully load in it kept jittering in and out. Or left a white outline... A picture for reference is attached.

[KDKasonde]

I have just opted for a marker view instead. Please let me know if this is not ideal but seems from the docs that a dynamic map does better with the markerview.