react-native-maps: Application crashes on Android device when image property of marker is used
Bug report (related to #3158, #3637)
Summary
Application crashes on Android device when using image property of markers with the following error
Error while updating property ‘image’ of a view managed by: AIRMapMarker
Environment info
react-native: 0.63.2
react: 17.0.1
react-native-maps: 0.27.1
System:
OS: Linux 5.9 Arch Linux
CPU: (4) x64 Intel(R) Core(TM) i7-3517U CPU @ 1.90GHz
Memory: 1.32 GB / 5.69 GB
Shell: 5.1.0 - /bin/bash
Binaries:
Node: 15.4.0 - /usr/bin/node
Yarn: 1.22.10 - /usr/bin/yarn
npm: 6.14.8 - /usr/bin/npm
Watchman: Not Found
SDKs:
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Languages:
Java: 1.8.0_265 - /usr/bin/javac
Python: 3.9.0 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: ^17.0.0 => 17.0.1
react-native: https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz => 0.63.2
npmGlobalPackages:
*react-native*: Not Found
Steps to reproduce
- Add an
imageprop to the marker:
<Marker image = { require('./assets/marker.png') } />
- Application crashes
- Remove the
imageprop from the marker - Application works perfectly
Describe what you expected to happen: application does not crash.
Describe what you actually happens: application crashes.
Reproducible sample code
Minimal reproducible example application is here.
Footnotes
I see a couple of possible reasons for this crash. First, I’m not exactly sure whether RN 0.59+ is supported or not? Second, I wasn’t able to follow the installation instructions because I’m using Expo which does all the configuration work for me.
Would highly appreciate if someone can confirm or refute the bug or give any advice.
Thanks!
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 7
- Comments: 29 (1 by maintainers)
Same issue here. As @MrPumpking and @nathanvogel said, using a native nested component is the only workaround for the moment :
The issue seems to be resolved in 0.28.0 🥳
As of 23.03.2021, the behaviour it’s still present. The workaround it’s using the
<Image></Image>and not the image/icon prop of the marker.I ran into this issue and commented about it further on #2997 I had tried the same solution as @tameroski and it worked but ultimately I ended up changing it because the amount of pins made it run slow. My workaround involved using a base64 encoded image kind of like this:
It runs just as fast as it does if you use the image prop in development and it works in production without any issues, but I haven’t been able to test it on iOS.
I’m seeing the same issue. I’m trying to use a custom marker with the
imageprop, like this:The app is an Expo app with the managed workflow setup. The problem only occurs when I publish the app and then run it on a real device. It works fine on the same device when running locally in DEV mode.
I captured my log output - hopefully this is helpful:
Seems like the issue is not caused by the API keys. I’ve set the keys but the problem still persists in my case.
I can confirm this happens when upgrading React Native (in this case Expo 37 to 39, which also upgrades react-native). My guess is that it’s actually because of an upstream change (in React Native) and that, indeed, the current released library is not compatible with the newer RNs.
This solution is working just fine. Inside the
<Marker></Marker>tag insert<Image source={YourImage}/>tag with image of the marker.@hussainahmad the minimal reproducible demo code is here.
I’m seeing the same issue inside published apps on Android, so I also switched to using a native nested <Image/> component.
I’ve also stumbled upon this one. Both icon and image props cause published / built app to crash. Falling back to using Image inside the Marker for now.
@SleeplessByte thanks! Gonna give it a try! Haven’t examined that part of the documentation yet.