React Native Map Marker load custom Image without blinking

Question

I'm using react-native-svg@0.55.1 and react native 0.55.4

Call the following imports:

import MapView, { Marker } from 'react-native-maps';
import SvgUri from 'react-native-svg-uri';

and render this marker from a marker array

<Marker
    key={index}
    title={marker.title}
    coordinate={marker.coordinates}>
        <SvgUri width="30" height="30" source={marker.imageSvg} />
</Marker>

Before I was using the default image load from marker, but the quality improvement of loading the svg makes me choose the code above.

<Marker
    key={index}
    title={marker.title}
    coordinate={marker.coordinates}
    image={marker.image}
/>

Both codes is compiling and running fine, but the downside is that using SvgUri takes more time to load and before that it show the default Marker image. And also it blinkings when rendering again.

As you can see in the Screen Record that I uploaded in Youtube: https://youtu.be/jROGEWR8F9c

But as it makes the image a lot better looking i want to make Marker await to SvgUri load it's image and don't show the default marker image. Also to stop the blinking that is show in the video. How can I fix this issues?

Thanks in advance.

React Native Map Marker load custom Image without blinking

0 Answers0