[0.61.*] Broken shadow on android #26544

mikebouwmans · 2019-09-23T18:16:59Z

Looks like shadow/elevation is broken on android on react-native@0.61.*, see pictures below

It only happens when the https://github.com/santomegonzalo/react-native-floating-action is being used. I'm not able to reproduce it without this.

To receive the expected result uncomment App.js:25-35 and restart react-native using react-native run-android.

It looks like other packages have this problem aswell, eg callstack/react-native-paper#1341 ,

React Native version:
System:
OS: Windows 10
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Memory: 3.25 GB / 15.86 GB
Binaries:
Node: 11.9.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.12.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.10.1 - C:\Users\bouwm\AppData\Roaming\npm\npm.CMD
IDEs:
Android Studio: Version 3.4.0.0 AI-183.6156.11.34.5692245

Steps To Reproduce

clone the git repo
run npm install and react-native run-android

Describe what you expected to happen:
The circle in the middle should look like this:

But it looks like this:

Snack, code example, screenshot, or link to a repository:

Git repo: https://github.com/mikebouwmans/ShadowTest

The text was updated successfully, but these errors were encountered:

marcorm · 2019-09-24T08:08:08Z

Hi @mikebouwmans , does it happen for you with every API level?
For me only with Android API Level 26

forsen · 2019-09-24T08:58:36Z

I took the liberty to create a minimal example repository which demonstrates the issue without using third party libraries: https://github.com/forsen/shadowTest

This is how the repository is created:

react-native init
Upgrade from v0.60.5 to v0.61.0-rc.3 per rn-diff-purge instructions
Add a circular view with elevation

B27 · 2019-09-24T12:03:17Z

@forsen unfortunately, this repository will not help to reproduce the bug
You showed normal behavior of the shadows. Since you did not specify backgroundColor in styles.circle, we see the shadow as it is drawn under the view. Start your example on any version react-native and everything will work just as well

mikebouwmans · 2019-09-24T15:01:46Z

Hi @mikebouwmans , does it happen for you with every API level?
For me only with Android API Level 26

I will check this later today

B27 · 2019-09-24T15:36:39Z

I met with this issue about a week ago. I use the react-navigation and react-navigation-stack libraries and after upgrading to rn 0.61.0-rc.0 I noticed that when I switch from the root screen to any other, the views disappear, the shadows are drawn on top of the modal screens and the background is drawn on the outlined TextInput ( from the react-native-paper library). However, after making any screen root, everything in it is rendered correctly.
After enumerating different style values, I found the reason for the view to break: if view has a borderRadius other than undefined, then when switching to another screen, the view with borderRadius is rendered under all other views, even if you specify zIndex. Until you reload, all views on all screens with borderRadius (including the root) will be broken. For this reason, it seems that the bug is associated with shadows, but everything is fine with them :)

To reproduce this bug, I created a repository https://github.com/B27/React-Native-borderRadius-test based on rn-diff-purge (branch release/0.61.0-rc.3). The project contains two screens with the same content. After switching to the second screen, the modal window and the other views with borderRadius break until you set their borderRadius to undefined

The following screenshots are from api 28 (also tested on api 21, 25 with the same result)

Normal:

With bugs:

Bug suppression by setting borderRadius to undefined:

marcorm · 2019-09-24T16:55:56Z

Setting borderRadius on Modal to undefined also solves the react-native-paper Dialog issue

ScreamZ · 2019-09-25T08:44:24Z

Is it related to styled-components/css-to-react-native#117 ? I though it was specific for styled components but I'm experiencing strange issues with background and positions relative since 0.61-rcX

zwenza · 2019-09-25T11:22:47Z

I could reproduce the exact same issue just using a <TouchableOpacity/> which contains a circular <View />. The View has a shadow on it too.

When you press the element it becomes transparent and shows the exact same issue.
Can reproduce that already with RN 0.60.5 on Android, iOS looks fine.

billouboq · 2019-09-25T12:20:13Z

I have the same issue on react native 0.59.10 so that's not something new I guess :/

B27 · 2019-09-25T13:28:22Z

@zwenza, @billouboq you are talking about normal shadow behavior in android not related to this issue.
Android and iOS implementation of shadows are very different, even for this they use different properties in styles (abstract elevation on Android, and CSS-like properties in iOS).

I could reproduce the exact same issue just using a <TouchableOpacity/> which contains a circular <View />. The View has a shadow on it too.

I created a new project with react-native 0.54.4 added <TouchableOpacity /> containing <View /> and saw the same. Because it is not a bug. In android, if you want to use shadows + transparency, you always need to add an opaque backgroundColor for the View, or if you want to use transparency, then wrap it in an opaque View.

zwenza · 2019-09-25T14:40:58Z

In android, if you want to use shadows + transparency, you always need to add an opaque backgroundColor for the View, or if you want to use transparency, then wrap it in an opaque View.

Thanks @B27 , will give this a try today!

B27 · 2019-09-25T15:10:07Z

@zwenza I forgot that for TouchableOpacity there is a simpler way - apply elevation to TouchableOpacity itself. Instead of <TouchableOpacity> <View style={stylesWithElevation} /> </TouchableOpacity> use <TouchableOpacity style={elevationStyle}> <View style={viewStyle} /> </TouchableOpacity>

ScreamZ · 2019-09-25T15:41:15Z

@gaearon Looks like a serious bug that went though the net :p On android.

I think the minimal example of React native isn't enough to detect those kind of issue between versions and too many people are updating to rc to test :(

B27 · 2019-09-25T15:47:09Z

Since it is not immediately clear what the problem is (#26544 (comment)), I recorded a video of the application from the repository https://github.com/B27/React-Native-borderRadius-test showing a bug: https://www.youtube.com/watch?v=wA6H2m153Yg
Let me remind you that the screens are exactly the same (FirstScreen and SecondScreen use the same BugScreen component inside)

ScreamZ · 2019-09-25T15:48:15Z

As i Posted in the linked topic here: styled-components/css-to-react-native#117

Here is an small example with a border radius (it's commented but try with uncommenting it)

const Bug = () => {
  return (
    <View style={{ flex: 1 }}>
      <BuggingView />
      <PageWrapper>
        <Text>
          This should appear above backgroundThis should appear above background This should appear above background This should appear
          above above background This should appear above background This should appear above background This should appear above background
          This This should appear above background This should appear above background This should appear above background This should
          appear above background This should appear above background This should appear above background This should appear above
          background This should appear above background This should appear above background This should appear above background This should
          appear above background This should appear above background This should appear above background This should appear above
          background This should appear above background This should appear above background This should appear above background This should
          appear above background This should appear above background This should appear above background This should appear above
          background This should appear above background
        </Text>
      </PageWrapper>
    </View>
  );
};

const BuggingView = styled.View`
  height: 200;
  position: absolute;
  background-color: blue;
  top: 0;
  right: 0;
  left: 0;
`;
const PageWrapper = styled.View`
  background-color: red;
  padding: 20px;
  /* border-radius: 8px; */
  flex: 1;
  margin: 20px;
`;

The red box text is going front, and the red is missing behind the blue.

definitely related to border-radius on 0.61 (was also not working in rc-3)

samiede · 2019-09-25T15:56:01Z

Can confirm that it has something to do with borderRadius!

ScreamZ · 2019-09-25T15:58:52Z

Yes, indeed the problem is about:

border-radius
~~elevation~~
or ~~position: absolute~~

One of those (or all of them) is having issue with android since 0.61.x

EDIT: @B27 Elements with borderRadius as if losing their zIndex

B27 · 2019-09-25T15:59:05Z

Updating from 0.60.5 to 0.61.1 also caused something similar in our app, but only for Views that are positioned absolutely.

remove borderRadius on button and it will be in the foreground again

B27 · 2019-09-25T16:00:01Z

@ScreamZ borderRadius only
Elements with borderRadius as if losing their zIndex
Just an absolute position is used to draw elements on top of others, but this can also be achieved using margin or padding

samiede · 2019-09-25T16:25:17Z

In 0.61.1 it works when applied on a white background

karvulf · 2019-09-25T17:12:03Z

Same problem here, would be awesome it this problem gets a quick fix

albullington · 2019-09-27T00:39:57Z

I'm experiencing this in a few different situations:

I have a TouchableOpacity with a borderRadius of 40 on top of an ImageBackground. The TouchableOpacity backgroundColor is green, but it shows up with an invisible backgroundColor. When I remove the ImageBackground, the green reappears.
I have a react-native-modal Modal component with a borderRadius of 40. The backgroundColor again shows up as invisible, even though I have the styling set to white.

This happened when I upgraded to 0.61.1 from 0.60.5. Everything shows up as expected on iOS.

gdoudeng · 2019-09-27T03:50:53Z

I am facing this problem and hope to solve it as soon as possible.

atefeh-mt · 2020-03-27T00:13:11Z

set activeOpacity to 1 on parent TouchableOpacity will fix it.
activeOpacity={1}

AndreiAyar · 2020-04-19T22:25:50Z

Still not fixed.

Shadow Android:

Shadow on Ios using Elevation:3 (tried from 1 to event 20, still the same)

johneyo · 2020-05-20T12:48:57Z

just set elevation to 0

samiede · 2020-05-20T21:52:57Z

just set elevation to 0

How does that solve anything?

ammoradi · 2020-05-29T11:22:04Z

I'm also facing this issue on "react-native": "0.62.2"

my Touchable/View is not absolute!
it is fixed using add backgroundColor to this Touchable/View

PawarSharadB · 2020-06-01T05:32:17Z

I am having the same issue in "0.61.4"
On long press button on TouchableOpacity i am getting a unwanted shadow like a pentagon on my circled button .

byteab · 2020-07-07T11:58:09Z

just add a backgroundColor: "#fff" property

fabOnReact · 2020-07-08T13:06:34Z

can't find a reproducible example to solve this Issue. This post unluckily includes several message, but NO CLEAR REQUIREMENT

Better close this issue and open a new one with clear explanation of the issue. Thanks

jongoh-lee · 2020-07-16T06:12:35Z

it is interesting that this bug appears optionally
odd buttons is fine but even buttons show octagon

fabOnReact · 2020-07-16T09:16:39Z

Unluckily this issue was opened because the elevation did not work with https://github.com/santomegonzalo/react-native-floating-action

Everybody with similar issue may have joined this thread instead of reporting a new issue

This thread should be closed and you should open a new thread with a minimal reproducible example build with react-native only. Most of the messages in this thread are not relevant for react-native, as they descrive an issue of https://github.com/santomegonzalo/react-native-floating-action

open an issue in https://github.com/santomegonzalo/react-native-floating-action

Thanks
Best Regards

Jonathan0wh · 2021-04-06T02:49:11Z

could still confirm this issue with "react-native": "0.63.4"

Sunhat · 2021-05-22T15:11:39Z

Hello everyone, please read on renderToHardwareTextureAndroid to resolve this issue

TreemboLuisDev · 2021-06-25T18:18:58Z

How is this still being ignored? Its obvious that even in 62+ of react native this is still an issue.

wolframkriesing · 2021-07-19T15:46:52Z

I also analyzed this bug, here is what I found and how it can be worked around (in some cases)
https://picostitch.com/tidbits/2020/12/android-ripple-effect-analyzed/#background-color-on-a-child-overlays-ripple-effect

zibs · 2021-08-24T19:21:13Z

I'm still seeing this - here's a really basic snack that reproduces this issue: https://snack.expo.dev/F3qj5M_AM. Run it on Android and see the weird octagons

hm-harshit · 2021-11-17T10:31:00Z

Are there any updates on this issue?

evtuhovdo · 2021-12-22T13:18:46Z

until the bug is resolved, you can use this library

https://www.npmjs.com/package/react-native-shadow-2

fellenabmb · 2022-04-29T18:12:40Z

Also present on 0.64.2. This is easily reproducible with a simple view with elevation + touchable opacity on top.

supmanyu · 2022-06-28T15:41:33Z

can confirm, this problem is present in 0.64.3 as well, all components get this inset shadow effect when a fade transition occurs from react-navigation-bottom-tabs navigator

randomtoni · 2022-12-13T01:42:13Z

So the thing here is that the shadows on a TouchableOpacity child is not displayed properly when it is pressed.
I can think of sharing two walkarounds for this:

To Match parent width and height: this is not always possible, eg:

<TouchableOpacity style={{width: 100, height: 100, borderRadius: 50}}>
     <View style={{width: 100, height: 100, borderRadius: 50}}>
            {content}
     </View>
</TouchableOpacity>

To use state helpers to turn off the shadow, not really recommended since it is unelegant. eg:

    const [showhadow, setShowShadow] = React.useState(true)  

    const hideShadow = () => setShowShadow(false)
    const doShowShadow = () => setTimeout(() => setShowShadow(true), 100)

    return (
        <TouchableOpacity onPressIn={hideShadow} onPressOut={doShowShadow} onPress={doSomething} >
            <View style={showhadow ? SHADOW_STYLE : null} >
                <Text text="Text inside the view" style={ICON_TEXT}/>
            </View>
            <Text text="Text outside the view" style={ICON_TEXT}/>
        </TouchableOpacity>
    )

Note: in the second example, if the View is replaced for another TouchableOpacity that it can also call "doSomething", the shadow will automatically be recalculated correctly displaying a neat shadow when pressing but if the user presses on the Text outside area (or anywhere where the child touchable is not covering the parent), shadow will continue to show incorrectly (since the parent TouchableOpacity is doing the calculation of the shadow for the inner child and fails).

github-actions · 2023-06-12T05:00:49Z

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

github-actions · 2023-06-19T05:00:55Z

This issue was closed because it has been stalled for 7 days with no activity.

monkeedev · 2024-03-01T16:29:35Z

Hello everyone, please read on renderToHardwareTextureAndroid to resolve this issue

Reproduced the same bug today.
As @Sunhat suggested in the answer above, setting renderToHardwareTextureAndroid={true} in <Animated.View /> resolves this issue.

If someone still experiencing troubles with elevation, give it a try.

And check documentation here.

mikebouwmans added the Bug label Sep 23, 2019

mikebouwmans mentioned this issue Sep 23, 2019

0.61.x Discussion react-native-community/releases#140

Closed

react-native-bot added the Platform: Android Android applications. label Sep 23, 2019

marcorm mentioned this issue Sep 24, 2019

React-Native 0.61.x callstack/react-native-paper#1341

Closed

kristerkari mentioned this issue Sep 25, 2019

Background issue with React native 0.61-rc3 styled-components/css-to-react-native#117

Closed

mikebouwmans mentioned this issue Sep 25, 2019

Possible RN 0.61 Android view regressions #26574

Closed

ScreamZ mentioned this issue Sep 26, 2019

0.61.1 Discussion react-native-community/releases#146

Closed

This was referenced Mar 26, 2020

[Snyk] Upgrade react-native from 0.56.0 to 0.61.5 PatronGG/react-native-firebase#1

Open

[Snyk] Upgrade react-native from 0.55.4 to 0.61.5 PatronGG/react-native-progress#2

Open

snyk-bot mentioned this issue Apr 6, 2020

[Snyk] Upgrade react-native from 0.54.4 to 0.61.5 rangle/styled-system#1

Open

zibs mentioned this issue Aug 24, 2021

TouchableOpacity on Android with elevation and rgba background causes clipping/octagons #32078

Closed

psnet mentioned this issue Oct 11, 2021

View with semi-transparent background rgba and elevation causes broken content background on Android #32385

Closed

github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Jun 12, 2023

github-actions bot closed this as completed Jun 19, 2023

[0.61.*] Broken shadow on android #26544

[0.61.*] Broken shadow on android #26544

Comments

mikebouwmans commented Sep 23, 2019 • edited Loading

Steps To Reproduce

marcorm commented Sep 24, 2019

forsen commented Sep 24, 2019 • edited Loading

B27 commented Sep 24, 2019 • edited Loading

mikebouwmans commented Sep 24, 2019

B27 commented Sep 24, 2019 • edited Loading

marcorm commented Sep 24, 2019

ScreamZ commented Sep 25, 2019

zwenza commented Sep 25, 2019

billouboq commented Sep 25, 2019

B27 commented Sep 25, 2019 • edited Loading

zwenza commented Sep 25, 2019

B27 commented Sep 25, 2019

ScreamZ commented Sep 25, 2019 • edited Loading

B27 commented Sep 25, 2019

ScreamZ commented Sep 25, 2019 • edited Loading

samiede commented Sep 25, 2019 • edited Loading

ScreamZ commented Sep 25, 2019 • edited Loading

B27 commented Sep 25, 2019 • edited Loading

B27 commented Sep 25, 2019 • edited Loading

samiede commented Sep 25, 2019

karvulf commented Sep 25, 2019

albullington commented Sep 27, 2019

gdoudeng commented Sep 27, 2019

atefeh-mt commented Mar 27, 2020

AndreiAyar commented Apr 19, 2020 • edited Loading

johneyo commented May 20, 2020

samiede commented May 20, 2020

ammoradi commented May 29, 2020 • edited Loading

PawarSharadB commented Jun 1, 2020

byteab commented Jul 7, 2020 • edited Loading

fabOnReact commented Jul 8, 2020

jongoh-lee commented Jul 16, 2020

fabOnReact commented Jul 16, 2020

Jonathan0wh commented Apr 6, 2021

Sunhat commented May 22, 2021

TreemboLuisDev commented Jun 25, 2021 • edited Loading

wolframkriesing commented Jul 19, 2021

zibs commented Aug 24, 2021

hm-harshit commented Nov 17, 2021

evtuhovdo commented Dec 22, 2021

fellenabmb commented Apr 29, 2022

supmanyu commented Jun 28, 2022

randomtoni commented Dec 13, 2022 • edited Loading

github-actions bot commented Jun 12, 2023

github-actions bot commented Jun 19, 2023

monkeedev commented Mar 1, 2024

mikebouwmans commented Sep 23, 2019 •

edited

Loading

forsen commented Sep 24, 2019 •

edited

Loading

B27 commented Sep 24, 2019 •

edited

Loading

B27 commented Sep 24, 2019 •

edited

Loading

B27 commented Sep 25, 2019 •

edited

Loading

ScreamZ commented Sep 25, 2019 •

edited

Loading

ScreamZ commented Sep 25, 2019 •

edited

Loading

samiede commented Sep 25, 2019 •

edited

Loading

ScreamZ commented Sep 25, 2019 •

edited

Loading

B27 commented Sep 25, 2019 •

edited

Loading

B27 commented Sep 25, 2019 •

edited

Loading

AndreiAyar commented Apr 19, 2020 •

edited

Loading

ammoradi commented May 29, 2020 •

edited

Loading

byteab commented Jul 7, 2020 •

edited

Loading

TreemboLuisDev commented Jun 25, 2021 •

edited

Loading

randomtoni commented Dec 13, 2022 •

edited

Loading