CODEWITHSUNDEEP
react-nativejsx
Poptocrack
Poptocrack

Reputation: 2989

Image with nested content and borderRadius

I have a problem with borderRadius on an Image componenent with a nested content. I don't understand why the borderRadius: 15 doesn't display anything. If I delete the nested <Text> line, the border radius works fine.

return (
 <View style={[styles.imageContainer, styles.margins]}>
   <Image source={IMAGES.loginBackground} style={styles.image}>
     <Text>Itinéraire</Text>
   </Image>
 </View>
)

const styles = StyleSheet.create({
  imageContainer: {
    backgroundColor: "#f0f",
    height: 170,
  },
  image: {
    borderRadius: 15,
    position:'absolute',
    left:0,
    right:0,
    top:0,
    bottom:0,
    padding: 10,
    width: undefined,
    height: undefined,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
  },
}

Am I doing somthing wrong?

Upvotes: 1

Views: 923

Answers (2)

Aras
Aras

Reputation: 1597

you can use <View> for make transparent border on your Image, for example:

<View style={{borderRadius:10}}>
    <Image  borderRadius={10} ....   />
</View>

Upvotes: 1

soutot
soutot

Reputation: 3671

I tested your code and it worked fine here. The only difference is I'm using source={require('imgpath/img.png')} and didn't set View style as an array, since there's no code for styles.margins. Are you setting any style somewhere else, like for this styles.margins?

Also I noticed you are missing a ) in the end of your styleSheetCreate:

const styles = StyleSheet.create({
  imageContainer: {
    backgroundColor: "#f0f",
    height: 170,
  },
  image: {
    borderRadius: 15,
    position:'absolute',
    left:0,
    right:0,
    top:0,
    bottom:0,
    padding: 10,
    width: undefined,
    height: undefined,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
  },
}

It should looks like this:

const styles = StyleSheet.create({
  imageContainer: {
    backgroundColor: "#f0f",
    height: 170,
  },
  image: {
    borderRadius: 15,
    position:'absolute',
    left:0,
    right:0,
    top:0,
    bottom:0,
    padding: 10,
    width: undefined,
    height: undefined,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
  },
});

And I also suggest to add your const styles outside your render().

Hope it helps.

Upvotes: 1

Related Questions