This is a demo app to show react-native opacity bug on Android when LayoutAnimation is enabled. You can run it directly at https://rnplay.org/apps/JbdOpQ
In the following screenshot, the odd numbered view/text's opacity should be 0.2. If we create them without LayoutAnimation, everything is good. But when we do with LayoutAnimation, the style opacity is not respected. (I figured out a workaround for texts. Add alpha to text's color.)
Reproducible with React Native 0.33+ (including 0.40 and 0.41) on Android 5.0.0
I reported this bug facebook/react-native#11769
###Solution:
Set correct opacity value in OpacityAnimation. You can try my fix on branch fix-react-native-issue-11769 which compiles react-native from source code of my react native fork.
A pull request has been created. facebook/react-native#11770
###Update:
- I added
Remove with opacity animationto check reversedOpacityAnimation. - Sometimes removing items with animation makes other views disappear unpredictably. I will submit another issue.
- I added customized
LayoutAnimationto showscaleXYanimation on view with style scale (e.g.{transform: [{scale: 0.5}]}).
Author: Vince Yuan