React-native-fast-image: Add borderRadius support.

[pfulop]

Hi,
I was just wondering if you plan supporting border radius style on images. At least on android it seems that this rule is ignored.

[DylanVann]

It's not supported currently. I'll look into how easy it would be to add.

[pfulop]

Well I switched to react-web-image and found out there is beta branch which has this funcionality implemented. https://github.com/vovkasm/react-native-web-image/issues/2 . You can find inspiration there if it is still relevant for you.

[grundmanise]

So even if we wrap it inside a View and set a borderRadius & overflow: 'hidden' on that View the image won't be clipped?

[bestlbw]

i think u can look this to support radius,https://github.com/wasabeef/glide-transformations

[RUIFERNANDE5]

Yea, borderRadius not being supported is quite a bummer, would be awesome if we got it

[baba43]

We definitely need this before we can use this library.

Sadly I could not find any workaround to make it work, so it would be awesome to see this added :)

[tsaohucn]

Need this too.

[dorthwein]

Same here.... ;(

[jslok]

+1

[gitlovenotwar]

+1, even a parent view with border radius and overflow hidden, the image won't get clipped. Using react-native Image component, is working(though their caching fails on ios)

[AkilLis]

How about that.

<View style={styles.circle}> <FastImage style={styles.image} /> <View style={styles.fixCircleClipping}/> </View>

circle: { width: circleSize, height: circleSize, borderRadius: circleSize / 2, overflow: 'hidden', }, fixCircleClipping: { position: 'absolute', top: -circleFixBorder, bottom: -circleFixBorder, right: -circleFixBorder, left: -circleFixBorder, borderRadius: circleSize / 2 + circleFixBorder / 2, borderWidth: circleFixBorder, borderColor: bgColor },

[anhtuank7c]

@AkilLis overflow: 'hidden' does not supported on Android

[vvavepacket]

according here, https://github.com/DylanVann/react-native-fast-image/pull/58 bordeRadius has been added, but when i tried on android, it does not work. did u guys managed to solve the issue?

[AkilLis]

It is worked as i said. You need to try this out!.

[jslok]

@AkilLis it doesn't work for me. Looks like you need to know the exact size of the image beforehand too.

[vvavepacket]

@AkilLis which fixed u mean? I tried adding borderRadius to the component,, but it is still squared..

[song50119]

Same issue.

[gogumai]

@DylanVann it looks like #58 it's not on npm yet.

Can you please upload this feature?

Thanks!!

[tquiroga]

Same issue

[vvavepacket]

guys it works on iOS, but not on android

[OGPoyraz]

Bump

[FlorianBergmann]

+1 for Android support

[anhtuank7c]

You all can use wrap by View and use overflow: hidden, borderRadius: 5
RN support hidden on Android from version 0.50

[tmaly1980]

Yes, I concur with @anhtuank7c . Just upgrade to RN 0.50.0 and use overflow:hidden on the view container (which I tend to use anyway for scaling purposes)

[tehwayne]

would be nice to get this support vs wrapping all the images in views

[DylanVann]

borderRadius support has been added. I went with the containing view solution for reasons outlined here: https://github.com/DylanVann/react-native-fast-image/pull/59#issuecomment-361796662

Thank you for the help!

[ezha86]

can anyone confirm that border radius does work on android ?
for me seems it doesnt
"react-native": "^0.53.0",
"react-native-fast-image": "^2.2.5",

[vit3k]

For me it works on simulator but not on Samsung S6.

[wmonecke]

This is still not working on android:

"react-native": "0.47.1",
"react-native-fast-image": "^5.0.3",

[anhtuank7c]

@wmonecke You have to upgrade to RN 0.50.0 or newer version