Elevation does not animate when it is inside a view which animates its opacity (Android P)
Nobody has claimed this yet.
- 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:

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 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
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 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