react-nativeandroid-imagereact-native-mapsreact-native-image

React Native Image not working with android google maps custom view


I am displaying the five stars in a row for ratings on a ,marker in google maps. It is working great on iOs but no images are loading on Android. I don't understand why though because I am able to use the tag throughout the rest of the application. It appears to just be an issue with displaying a custom image on google maps.

The asset path is correct. I have tried importing the image as well as using a uri url. Nothing seems to be taking in android. This is the only page it is having an issue with...

Is this a known issue?

const styles = StyleSheet.create({
  container: {
    backgroundColor: Colors.Transparent,
    flexDirection: "row",
    flex: 1,
    alignSelf: "center",
  },
  image: {
    width: 25,
    height: 25,
  },
});

const StarRating = props => {
  let rating = props.ratingValue;
  console.log("rating", rating);
  return (
    <View style={styles.container}>
      <Image style={styles.image} source={require("assets/star-filled.png")} />
      <Image style={styles.image} source={require("assets/star-filled.png")} />
      <Image style={styles.image} source={require("assets/star-filled.png")} />
      <Image style={styles.image} source={require("assets/star-filled.png")} />
      <Image style={styles.image} source={require("assets/star-filled.png")} />
    </View>
  );
};

ios working:

ios

android not working android


Solution

  • I do believe it is a bug on Android that the Callout component can't render an image while it can on IOS.

    For this case ,I see all you are trying to do is to render five stars in your Callout Component . The good news is that the same thing can be obtained using expo/vector-icons. I mean that you can rewrite your code like this:

    const StarRating = props => { let rating = props.ratingValue; console.log("rating", rating); return ( <View style={styles.container}> <Ionicons name="star" size={10}/> <Ionicons name="star" size={10}/> <Ionicons name="star" size={10}/> <Ionicons name="star" size={10}/> <Ionicons name="star" size={10}/> </View> ); };