Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
GIF images can not work with borderRadius
See original GitHub issueDescription
Animated GIF image on Android can not work properly with a borderRadius style.
Reproduction
<Image
style={{width: 40, height: 40, borderRadius: 20}}
source={{uri: 'http://somedomain/xxx.gif'}}
/>
The 4th image below is an Animated GIF image
Additional Information
- React Native version: 0.39.0
- Platform: Android
- Operating System: MacOS
Issue Analytics
- State:
- Created 7 years ago
- Reactions:3
- Comments:7 (5 by maintainers)
Top Results From Across the Web
Rounded corner issue with GIF image in react native android
I am new for react native and i am showing a list of GIF images in list view and i what image ......
Read more >Topic: Rounded Corners In Images Not Working
Hey @metabreakr, I have confirmed this issue is only happening when attempting to center the images. Images without alignment (or any alignment ...
Read more >border-top-right-radius - CSS: Cascading Style Sheets | MDN
The border-top-right-radius CSS property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major ...
Read more >CSS Rounded Corners - W3Schools
Rounded corners for an element with a background image: Rounded corners! Here is the code: Example. #rcorners1 { border-radius: ...
Read more >Example to Set Border Radius of an Image in React Native
Example to Set Border Radius of an Image in React Native. We will set the border radius using StyleSheet element overflow and borderRadius....
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
This isn’t working for me with an animated gif as of 0.42. Here’s the Image’s current style props
gifStyle: { width: 63, height: 62, marginLeft: 13, borderRadius: 8, backgroundColor: ‘transparent’, justifyContent: ‘center’, alignItems: ‘center’, overlayColor: ‘#8E55FF’ ##this is the same as the background color }
I’ve verified this as well. Impossible to get a border radius on a gif with all tricks.