CODEWITHSUNDEEP
react-native
Amrita Stha
Amrita Stha

Reputation: 3327

Image borderRadius is not working in react native

I have used borderRadius in Image and loop it. It works in some images however others are rectangular. If I touch it then it shows the radius and disappears as soon as it is untouched. Using overflow hidden doesn't do the trick as well.

I'm confused I used the same style but the result is different. I've tested it on Android devices only.

https://snack.expo.io/@codebyte99/multiplearrays

code:

<TouchableOpacity activeOpacity={0.8}>
  <ImageBackground
    source={{
      uri: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREX0q18KDbtN-obe1EFxAwNg27xgR_KItZ7U8MkXnH7zBCEr_ASQ",
    }}
    style={[
      {
        width: 200,
        height: 80,
        resizeMode: "center",
        justifyContent: "flex-end",
        alignItems: "center",
        margin: 5,
        marginRight: 0,
        marginTop: 0,
        marginBottom: 5,
        borderRadius: 6,
        overflow: "hidden",
      },
    ]}
  >
    <Text>{childItem.title}</Text>
  </ImageBackground>
</TouchableOpacity>;

enter image description here

Upvotes: 6

Views: 9413

Answers (3)

vundavalli veerendra
vundavalli veerendra

Reputation: 11

Applying the same fixed height and width to the image and borderRadius as half of the (height/width) will solve the border issue for android in react-native. Note: Make sure you have resizeMode as 'cover'

<Image key={index} source={{ 'uri' }} resizeMode='cover' style={{ height: 40, width: 40, borderRadius: 20 }} />

Upvotes: 1

owencm
owencm

Reputation: 8874

Wrap the Image in a View with overflow: "hidden" and apply borderRadius to that, e.g.

   <View
      style={{
        width: 30,
        height: 30,
        borderRadius: 15,
        overflow: "hidden",
      }}
    >
      <Image
        style={{ width: 30, height: 30}}
        source={{ uri }}
      ></Image>
    </View>

(I could not find a way to get borderRadius to work on the image directly on Android.)

Upvotes: 1

Nay
Nay

Reputation: 727

You have to set the borderRadius to Image, not in style:

<Image source={{...}} borderRadius={6} .../>

And you don't set overflow: 'hidden' in image style, but in the View:

<View style={{ ..., overflow: 'hidden' }}>
   <Image ..../>
</View>

Upvotes: 7

Related Questions