Reputation: 21
I'm building a mobile application with React Native and expo, using mapbox for the map rendering.
I'm working with a MapView that display different images in custom markers based on the sport_id of my data.
The simplified code below is working really fine when I'm building my app in development (with eas), but when I'm building my app in production on android, I have the following problem :
Regardless of the sport_id, the image displayed in the marker is always the last image specified in the MapBoxGl.Images, so the "img3" in my example.
This comportment isn't reproduced on IOS, where this setup is working fine (like my dev build on android).
<MapboxGl.MapView
style={homeStyle.mapview}
scaleBarEnabled={false}
onMapIdle={() => {
setShowButton(true);
}}
styleURL="mapbox://styles/nodal-app/cltc5nuum00hf01qpemz37gja"
ref={mapRef}
>
<MapboxGl.Images
images={{
"img1": require("../../assets/emojis/foot.png"),
"img2": require("../../assets/emojis/basket.png"),
"img3": require("../../assets/emojis/tennis.png"),
}}
/>
<MapboxGl.ShapeSource
id="spots"
shape={shape}
cluster={true}
clusterMaxZoomLevel={14}
clusterRadius={50}
onPress={() => {
something()
}}
>
<MapboxGl.SymbolLayer
id="emojiSymbols"
sourceID="spots"
filter={["!", ["has", "point_count"]]}
style={{
iconImage: [
"case",
// Display img1 if sport_id is 1
["==", ["get", "sport_id"], 1],
"img1", // Football
["==", ["get", "sport_id"], 2],
"img2", // basket
["==", ["get", "sport_id"], 3],
"img3", // tennis
"❓", // default value
],
iconAnchor: "bottom",
iconSize: 0.05,
iconOffset: [0, -300],
}}
/>
</MapboxGl.ShapeSource>
</MapboxGl.MapView>
I've tried the following things without results :
Change files names in my "assets" folder
Import the files directly at the top of the screen script
Put my images in the cache at app launch
Add my asset folder in the assetBundlePatterns of my config app.json
I would really appreciate any help on this. Let me know if you need additionnal data or code exemples.
Upvotes: 0
Views: 41