Elevation does not animate when it is inside a view which animates its opacity (Android P)

Environment

  React Native Environment Info:
    System:
      OS: macOS 10.14.1
      CPU: x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
      Memory: 40.65 MB / 16.00 GB
      Shell: 5.6.2 - /usr/local/bin/zsh
    Binaries:
      Node: 10.11.0 - ~/.nvm/versions/node/v10.11.0/bin/node
      Yarn: 1.13.0 - ~/.nvm/versions/node/v10.11.0/bin/yarn
      npm: 6.5.0 - ~/.nvm/versions/node/v10.11.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
      Android SDK:
        Build Tools: 23.0.1, 26.0.2, 26.0.3, 27.0.2, 27.0.3, 28.0.1, 28.0.2, 28.0.3
        API Levels: 22, 23, 24, 25, 26, 27, 28
    IDEs:
      Android Studio: 3.3 AI-182.5107.16.33.5199772
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.3 => 16.6.3
      react-native: 0.59.0 => 0.59.0
    npmGlobalPackages:
      react-native-cli: 2.0.1

Description

What described in the title works in any Android but not on Android P. See the differences:

Android P:

Below Android P:

Reproducible Demo

https://snack.expo.io/@satya164/elevation-issue---android-p

This can affect libraries like react-navigation when a new screen comes in animating its opacity. See react-navigation/react-navigation#5535.

Can be found here also https://github.com/ferrannp/react-native-elevation-animation-android-pie with react-native 0.59.X.

It looks like you are using an older version of React Native. Please update to the latest release, v0.58 and verify if the issue still exists.

The "⏪Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

I've been running into the same issue for awhile now. Seems to be happening as well for 0.58.3.

+1

I am closing this issue because it does not appear to have been verified on the latest release, and there has been no followup in a while.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.

I experience this issue too

I added a repo with react-native init that reproduces the issue https://github.com/ferrannp/react-native-elevation-animation-android-pie.

@kmagiera

My issue:
react-navigation/react-navigation#8676

On android, setting a view's opacity will render artifacts when child views have elevation.

So I've investigated this issue and came to the conclusion, that this is an android intended behavior.

Background:

<View style={{opacity: 0.5}}>
	<View style={{elevation: 5, margin: 10, backgroundColor: 'red'}}>
<View>

To understand this issue we let's dig into react code. Both views will get a BaseViewManager, which holds a reference to a ReactViewGroup.ReactViewGroup subclasses a ViewGroup and not an Android View (because it can have children). When setting a backgroundColor to a ReactViewGroup it creates a ReactViewBackgroundDrawable which subclasses a Drawable and sets it as background. The creation happens in getOrCreateReactViewBackground which composes any already existing background drawable (maybe images use this, in all my test cases the existing drawable was always null) with the new background using LayerDrawable.

Problem:
Now when setting an alpha value (changing opacity) it will do this on the ReactViewGroup directly but not on the background drawable, which is why we have the artifact. As react-native per default set hasOverlappingRendering to false to save memory, this problem is an expected android performance optimization. It seems that some devices do not perform the optimization and I only experienced this when changing the alpha after the first render. See android docs for what this flag does.

In the screenshot below you can see the different parameters (plain android project in this repo, not react-native, although I used the same ReactViewBackgroundDrawable class from react-native which I just extracted and patched to get it running).
There are 6 red 100x100 boxes that get the opacity set on their view or for testing purposes on their background drawable. Within a red box a yellow box is placed with elevation set to 10. In the first row, hasOverlappingRendering is disabled.

Repo: https://github.com/DomiR/react-native-opacity-issue
So as you can see on both boxes on the right-hand side setting opacity only on the background is not enough, as all children will still have full opacity. Setting alpha both on the background and on the view itself will result in 0.25 opacity for the background. On the left-hand side is what we really want but we need to hasOverlappingRendering enabled like in the left bottom.

Solution:
I don't know if there is a solution that is good for everyone.
As you can see from the screenshot we need to set hasOverlappingRendering but doing so per default is not performant (facebook blog entry).

Fortunately, we can set this flag using needsOffscreenAlphaCompositing as a view prop.

As @kmagiera mentioned that you should probably enable this only temporarily during animations.
The react-native docs also mention using renderToHardwareTextureAndroid in combination.

PS: What also should work is setting the opacity value for all children as well.

fix(snackbar): adjusting broken animation when a child element has

what about option "renderToHardwareTextureAndroid" for View?

@DomiR

Thanks @DomiR , can confirm that setting needsOffscreenAlphaCompositing on the animated view seems to solve the issue.

Before:

After:

PR example.

feat: Improved animation fidelity

Any updates?

So the trick is to set the elevation to 0 until fade-in animation is complete for the view.
elevation:fadeAnim==1?5:0
Work's perfectly for me.

* fix shadow artifacts on Android (use needsOffscreenAlphaCompositing…

* fix shadow artifacts on Android (use needsOffscreenAlphaCompositin…

fix: notification's shadow artifacts on Android (use needsOffscreenAl…

Several users tested a workaround (needsOffscreenAlphaCompositing) for this issue (more info in #23090 (comment)). I believe this issue is solved.

Auto offscreen-composite elevated descendants under reduced opacity o…

Quick update: there's now an automatic fix for this on Android, landed behind a default-off feature flag.

What changed: behind the new flag, ReactViewGroup now reports overlapping rendering whenever it contains a descendant with elevation. That bakes the offscreen decision into the RenderNode at record time, so any alpha applied afterwards composites the subtree through that layer and the shadow fades correctly.

It should cover all three paths people have hit in this thread:

static opacity
JS-driven opacity animation
native-driver opacity animation (useNativeDriver: true), which sets alpha directly on the RenderNode without re-recording

I'll be turning on the flag soon for experimentation

Navigation Menu

Repository navigation

Elevation does not animate when it is inside a view which animates its opacity (Android P) #23090

Environment

Description

Android P:

Below Android P:

Reproducible Demo

56 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Elevation does not animate when it is inside a view which animates its opacity (Android P) #23090

Description

Environment

Description

Android P:

Below Android P:

Reproducible Demo

Activity

react-native-bot commented on Jan 24, 2019

iremlopsum commented on Jan 29, 2019

RichardLindhout commented on Feb 9, 2019

react-native-bot commented on Feb 24, 2019

alexandrius commented on Mar 12, 2019

ferrannp commented on Mar 12, 2019

56 remaining items

DomiR commented on Aug 5, 2020

webgev commented on Oct 2, 2020

mmazzarolo commented on Oct 17, 2020

retyui commented on Mar 24, 2021

suyogyabsnt commented on Jun 23, 2021

fabOnReact commented on Feb 2, 2024

crazeface commented on Sep 16, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions