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

Render Images with borderRadius in FlatList/ScrollView only on android 5.0 will render black circle. #15537

Closed
tsaohucn opened this issue Aug 17, 2017 · 10 comments
Labels
Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@tsaohucn
Copy link

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

  1. react-native -v: 0.47.1
  2. node -v: v6.9.4
  3. npm -v: 5.3.0
  4. yarn --version: v0.27.5

Then, specify:

  • Target Platform: android : 5.0/ 6.0 /7.0
  • Development Operating System: macOS
  • Build tools: buildToolsVersion : 25.0.2

Steps to Reproduce

  1. create ListView/ScrollView
  2. render each Image item with borderRadius(props or style)
  3. build in android 5.0/6.0/7.0 , and android 6.0/7.0 render correct, only android 5.0 render incorrect

Expected Behavior

  • android 6.0/7.0 render correct as below

2017-08-17 10 54 14

Actual Behavior

android 5.0 render incorrect as below

2017-08-16 11 43 28

  • If I cancel borderRadius in android 5.0 then it render correct as below

2017-08-17 11 00 49

So it seem like the picture will render incorrect(black circle) when use borderRadius with image in FlatList/ScrollView on android 5.0

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

@ol2dd
Copy link

ol2dd commented Aug 24, 2017

+1

@stale
Copy link

stale bot commented Oct 23, 2017

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Oct 23, 2017
@stale stale bot closed this as completed Oct 30, 2017
@ranjithnori
Copy link

ranjithnori commented Nov 23, 2017

Still experiencing this issue on 0.48.4. Please reopen this.

@hramos Notifying you since you've closed #13752, which seems similar to this :)

@svbutko
Copy link
Contributor

svbutko commented Dec 23, 2017

There's a workaround (not a solution!) which can solve this issue, BUT! it can have significant performance implications:

Place this line into application tag of AndroidManifest.xml:
android:layerType="software"

Or you can try an make your own component (which is slightly better) where you can put this line:
myView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

@onehassan
Copy link

+1

@sianlasaga
Copy link

Same problem. I browsed some issues related to this but none of them were solved.

@svbutko
Copy link
Contributor

svbutko commented Apr 17, 2018

@sianlasaga, If you don't want to use software layer type, you can always place your image inside of the view which will be having border radius, it's going to work but edges of your image will be slightly sharp and idk how it can be solved atm.

@sianlasaga
Copy link

sianlasaga commented Apr 17, 2018

@svbutko, thanks man it works. you forgot to mention to add overflow: 'hidden' in view. And yeah you're right the edges of the image is sharp. Well at least it's a partial solution atm.

@svbutko
Copy link
Contributor

svbutko commented Apr 17, 2018

@sianlasaga, overflow: "hidden" doesn't work correctly on Android atm and it's better to avoid using it extensively, I prefer to change the background's component instead of using this property.

@tandat2209
Copy link

+1

@facebook facebook locked as resolved and limited conversation to collaborators Oct 30, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests

7 participants