react / react/react-native

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

Open
#23,090 65 comments 99 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Bug Help Wanted :octocat: Issue: Author Provided Repro Platform: Android Ran Commands
Dominant language
C++
Stars
127k
Forks
25.3k
Avg merge
1d 23h
Merged PRs (30d)
4

Description

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:

androidp

Below Android P:

notandroidp

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 https://github.com/react-navigation/react-navigation/issues/5535.

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the linked Expo Snack on Android P and a pre-P Android version, then compare the elevation animation while the containing view changes opacity. Trace the React Native Android path involved in elevation and opacity animation; done means the behavior matches across Android P and older supported versions without regressing the demonstrated case.

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
Active
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.