Elevation and border radius do not work well with opacity from Android 9
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 127k
- Forks
- 25.3k
- Avg merge
- 1d 23h
- Merged PRs (30d)
- 4
Description
The way elevation works is that it creates a border around the element that is then shifted to the bottom. The background color of the element then hides the inside part of the border.
When we apply border radius to the same element, the border gets thicker to accommodate for the increased radius. So far so good.
Unfortunately if we then apply the opacity to the parent, the background color of the element gets semitransparent, making the border visible and creating an ugly effect.
React Native version: 0.57
Expo SDK 32
Android version: 9.0
Steps To Reproduce
Create an element and apply, elevation, border radius and background color. Then apply opacity on its parent.
Describe what you expected to happen:
The border underneath the element should not leak out
Snack, code example, or link to a repository:
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the linked Expo Snack on React Native 0.57 with Expo SDK 32 and Android 9, then reproduce the combination of elevation, border radius, background color, and parent opacity. Done means the elevation border no longer leaks visibly through the semitransparent background while the expected styling remains intact.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 38/100