ImageBackground not showing image on some devices - react-native

Question

I am trying to use a CustomCallout with a ImageBackground in it. I notice a really strange behavior when testing the application on two different devices (both Android). The image is showed correctly on the older device with lower display, but on the new device (p30 lite) the image is not appearing.. any ideas? here is my code:
class CustomCallout extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={styles.calloutStyle}>
<View>
<View style={{ ...styles.placeRow, ...styles.placeHeader }}>
<ImageBackground
source={{ uri: this.props.image }}
style={styles.bgImage}
>
<View style={styles.titleContainer}>
<Text style={styles.title} numberOfLines={1}>
{this.props.placeName}
</Text>
</View>
</ImageBackground>
</View>
<View style={{ ...styles.placeRow, ...styles.placeDetail }}>
<Text>{this.props.distance}m</Text>
<Text>{this.getPlaceType(this.props.placeType)}</Text>
</View>
<View style={{ ...styles.placeRow, ...styles.placeRating }}>
<StarRating
disabled={false}
emptyStar={'ios-star-outline'}
fullStar={'ios-star'}
halfStar={'ios-star-half'}
iconSet={'Ionicons'}
maxStars={7}
rating={4}
fullStarColor={'#FDCC0D'}
starSize={20}
/>
</View>
</View>
</View>
);
}
}
CustomCallout.propTypes = propTypes;
const styles = StyleSheet.create({
calloutStyle: {
height: 200,
width: 280,
backgroundColor: '#61adc8',
shadowOffset: { width: 0, height: 2},
shadowRadius: 6,
shadowOpacity: 0.26,
elevation: 55,
padding: 12,
borderRadius: 20,
shadowColor: 'black',
overflow: 'hidden'
},
bgImage: {
width: '100%',
height: '100%',
justifyContent: 'flex-end',
},
placeRow: {
flexDirection: 'row'
},
placeHeader: {
height: '80%'
},
placeDetail: {
justifyContent: 'space-between',
height: '10%'
},
placeRating: {
height: '10%',
justifyContent:'flex-start',
},
titleContainer: {
backgroundColor: 'rgba(0,0,0,0.5)',
shadowOffset: { width: 0, height: 2},
shadowRadius: 6,
shadowOpacity: 0.26,
elevation: 55,
borderRadius: 10,
alignItems: 'center'
},
title: {
color: 'white',
fontSize: 20
}
});
export default CustomCallout;

Answer 1

We cant put ImageBackground wherever we want.. I don't know the exact theory. But Just put the ImageBackgroung tag outside the view and try to even put on different views too.. If anyone know plz correct me. Here is a working example.
Put ImageBackground to entire component
render() {
return (
<View style={styles.calloutStyle}>
<View>
<ImageBackground
source={{ uri: 'https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg' }}
style={styles.bgImage}
>
<View style={{ ...styles.placeRow, ...styles.placeHeader }}>
<View style={styles.titleContainer}>
<Text style={styles.title} numberOfLines={1}>
{this.props.placeName}
</Text>
</View>
</View>
</ImageBackground>
<View style={{ ...styles.placeRow, ...styles.placeDetail }}>
<Text>{this.props.distance}m</Text>
<Text>{this.getPlaceType(this.props.placeType)}</Text>
</View>
<View style={{ ...styles.placeRow, ...styles.placeRating }}>
<StarRating
disabled={false}
emptyStar={'ios-star-outline'}
fullStar={'ios-star'}
halfStar={'ios-star-half'}
iconSet={'Ionicons'}
maxStars={7}
rating={4}
fullStarColor={'#FDCC0D'}
starSize={20}
/>
</View>
</View>
</View>
);
}
}
Or you can put to only both components
render() {
return (
<View style={styles.calloutStyle}>
<View>
<ImageBackground
source={{ uri: 'https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg' }}
style={styles.bgImage}
>
<View style={{ ...styles.placeRow, ...styles.placeHeader }}>
<View style={styles.titleContainer}>
<Text style={styles.title} numberOfLines={1}>
{this.props.placeName}
</Text>
</View>
</View>
<View style={{ ...styles.placeRow, ...styles.placeDetail }}>
<Text>{this.props.distance}m</Text>
<Text>{this.getPlaceType(this.props.placeType)}</Text>
</View>
<View style={{ ...styles.placeRow, ...styles.placeRating }}>
<StarRating
disabled={false}
emptyStar={'ios-star-outline'}
fullStar={'ios-star'}
halfStar={'ios-star-half'}
iconSet={'Ionicons'}
maxStars={7}
rating={4}
fullStarColor={'#FDCC0D'}
starSize={20}
/>
</View>
</ImageBackground>
</View>
</View>
);
}
}
or put ImageBackground to inside view only
render() {
return (
<View style={styles.calloutStyle}>
<View>
<ImageBackground
source={{ uri: 'https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg' }}
style={styles.bgImage}
>
<View style={{ ...styles.placeRow, ...styles.placeHeader }}>
<View style={styles.titleContainer}>
<Text style={styles.title} numberOfLines={1}>
{this.props.placeName}
</Text>
</View>
</View>
</ImageBackground>
<View style={{ ...styles.placeRow, ...styles.placeDetail }}>
<Text>{this.props.distance}m</Text>
<Text>{this.getPlaceType(this.props.placeType)}</Text>
</View>
<View style={{ ...styles.placeRow, ...styles.placeRating }}>
<StarRating
disabled={false}
emptyStar={'ios-star-outline'}
fullStar={'ios-star'}
halfStar={'ios-star-half'}
iconSet={'Ionicons'}
maxStars={7}
rating={4}
fullStarColor={'#FDCC0D'}
starSize={20}
/>
</View>
</View>
</View>
);
}
}
Try this out and let me know the result.. :)