Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add borderRadius support. #2

Closed
pfulop opened this issue Apr 29, 2017 · 32 comments
Closed

Add borderRadius support. #2

pfulop opened this issue Apr 29, 2017 · 32 comments
Labels
feature A new feature to add.

Comments

@pfulop
Copy link

pfulop commented Apr 29, 2017

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
Copy link
Owner

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

@pfulop
Copy link
Author

pfulop commented May 2, 2017

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

@DylanVann DylanVann added the feature A new feature to add. label May 3, 2017
@grundmanise
Copy link

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
Copy link

bestlbw commented Jul 5, 2017

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

@RUIFERNANDE5
Copy link

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

@baba43
Copy link

baba43 commented Jul 21, 2017

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
Copy link

Need this too.

@dorthwein
Copy link

Same here.... ;(

@jslok
Copy link

jslok commented Sep 8, 2017

+1

@gitlovenotwar
Copy link

+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)

@tuvshinbatgeru
Copy link

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
Copy link

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

@vvavepacket
Copy link

according here, #58 bordeRadius has been added, but when i tried on android, it does not work. did u guys managed to solve the issue?

@tuvshinbatgeru
Copy link

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

@jslok
Copy link

jslok commented Sep 28, 2017

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

@vvavepacket
Copy link

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

@song50119
Copy link

Same issue.

@gogumai
Copy link

gogumai commented Oct 14, 2017

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

Can you please upload this feature?

Thanks!!

@tquiroga
Copy link

Same issue

@vvavepacket
Copy link

guys it works on iOS, but not on android

@DylanVann DylanVann changed the title borderRadius not working Add borderRadius support. Nov 6, 2017
@OGPoyraz
Copy link

Bump

@FlorianBergmann
Copy link

+1 for Android support

@anhtuank7c
Copy link

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

@tmaly1980
Copy link

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
Copy link

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

jcady pushed a commit to b8ta/react-native-fast-image that referenced this issue Jan 4, 2018
修改header search paths,增加react路径
christoph-jerolimov pushed a commit to christoph-jerolimov/react-native-fast-image that referenced this issue Jan 12, 2018
Remove redundant meta-data from manifest
@DylanVann
Copy link
Owner

borderRadius support has been added. I went with the containing view solution for reasons outlined here: #59 (comment)

Thank you for the help!

@ezha86
Copy link

ezha86 commented Feb 18, 2018

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
Copy link

vit3k commented Feb 19, 2018

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

oisu pushed a commit to oisu/react-native-fast-image that referenced this issue Aug 25, 2018
* add image color support
oisu pushed a commit to oisu/react-native-fast-image that referenced this issue Aug 25, 2018
* add image color support
@wmonecke
Copy link

This is still not working on android:

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

@anhtuank7c
Copy link

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

badeleux referenced this issue in ConnectedHomes/react-native-fast-image Mar 15, 2019
[kafil/bugs/19] fix: avatar placeholder issue
DylanVann pushed a commit that referenced this issue May 3, 2019
* tint color support (#2)

* add image color support

* added tintcolor support for android

* changed prop to be named tintColor for consistency

* fixed bug where tint color would not work on ios 10

* removed file accidentally added back in by merging master

* updated readme, fixed prop warning

* re-formatted with new rules
ffalt pushed a commit to ffalt/react-native-fast-image that referenced this issue Feb 3, 2020
appleseedexm pushed a commit to jls-ch/react-native-fast-image that referenced this issue Aug 10, 2021
…ID-PROP

Fix typo in flow type for resizeImageAndroid
muja555 added a commit to Deelzat/react-native-fast-image that referenced this issue Apr 28, 2022
@coucoseth
Copy link

was borderRadious added because it isnt working on my end on android

@jesspinklet
Copy link

@coucoseth in our case we had to giva a background color to fast image as well in order to make it work.
backgroundColor: "transparent"
transparent bg works as well .

chrispader pushed a commit to margelo/react-native-fast-image that referenced this issue Nov 21, 2023
…m_prop

feat: Extend Disable Transformation property for Android
bori-cc referenced this issue in CravingCollector-Inc/react-native-fast-image Jan 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature A new feature to add.
Projects
None yet
Development

No branches or pull requests