React Native Maps - Callout don't show image inside - react-native

Question

I have a problem when I try to render an image inside the React Native Maps Callout.
The image does not render.
{this.state.database.map((route, idx) => {
if (route.Image) {
return (
<MapView.Marker
coordinate={{ latitude: Number.parseFloat(route.Latitude), longitude: Number.parseFloat(route.Longitude) }}
key={idx}
image={img_pin}
ref={(ref) => this.marker = ref}
>
<MapView.Callout tooltip style={{ flex: 1, backgroundColor: 'white' }}>
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 1 }}>
<Text style={styles.textCallout}>Latitude: {route.Latitude}</Text>
<Text style={styles.textCallout}>Longitude: {route.Longitude}</Text>
<Text style={styles.textCallout}>Status: <Icon name={route.Status === 1 ? 'checkmark-circle' : 'close-circle'} style={{ color: route.Status === 1 ? 'green' : 'red', fontSize: 16 }} /> </Text>
<Text style={styles.textCallout}>Velocidade: {route.Speed} km/h</Text>
</View>
<View style={{ margin: 5 }}>
<Image source={{ uri: `data:image/gif;base64,${route.Image}` }} style={{ width: 150, height: 100 }} />
</View>
</View>
</MapView.Callout>
</MapView.Marker>
);
}
})}
Image error don't render inside Callout
"react-native": "^0.57.8",
"react-native-maps": "^0.24.2",

Answer 1

Use Image inside Text component
<Text> <Image style={{ height: 100, width:100 }} source={{ ... }} resizeMode="cover" /> </Text>
Another workaround by using WebView. I think is the proper solution for this right now.
<View>
<WebView style={{ height: 100 , width: 230, }} source={{ uri: ... }} />
</View>

Answer 2

Make sure your route.image is in the form of url schema,
exampleData
source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
if correct,
GIF and WebP support on Android
When building your own native code, GIF and WebP are not supported by default on Android.
You will need to add some optional modules in android/app/build.gradle, depending on the needs of your app.
build.gradle:
dependencies {
// If your app supports Android versions before Ice Cream Sandwich (API level 14)
implementation 'com.facebook.fresco:animated-base-support:1.10.0'
// For animated GIF support
implementation 'com.facebook.fresco:animated-gif:1.10.0'
// For WebP support, including animated WebP
implementation 'com.facebook.fresco:animated-webp:1.10.0'
implementation 'com.facebook.fresco:webpsupport:1.10.0'
// For WebP support, without animations
implementation 'com.facebook.fresco:webpsupport:1.10.0'
}
Usage
<MapView.Callout tooltip={true} style={{ backgroundColor: 'white', height: contentHeight, width: contentWidth }}>
<View style={{ flexDirection: 'column' }}>
<View style={{ flex: 1 }}>
<Text style={styles.textCallout}>Latitude: {route.Latitude}</Text>
<Text style={styles.textCallout}>Longitude: {route.Longitude}</Text>
<Text style={styles.textCallout}>Status: <Icon name={route.Status === 1 ? 'checkmark-circle' : 'close-circle'} style={{ color: route.Status === 1 ? 'green' : 'red', fontSize: 16 }} /> </Text>
<Text style={styles.textCallout}>Velocidade: {route.Speed} km/h</Text>
</View>
<Image source={{ uri: `data:image/gif;base64,${route.Image}` }} style={{ width: 150, height: 100, resizeMode="cover" }} />
</View>
</MapView.Callout>