From 4c08105e14378764942d90c3dfa15886f6d62071 Mon Sep 17 00:00:00 2001 From: Vince Yuan Date: Thu, 12 Jan 2017 09:09:06 -0800 Subject: [PATCH] Let LayoutAnimation respect style opacity on Android. Fix issue #11769 Summary: Fix issue #11769 When a view or text is created with style opacity (e.g. 0.2) and LayoutAnimation is enabled on Android, what we expected to happen is the view or text has opacity (e.g. 0.2). What actually happens is the view or text's opacity is always 1. In the following screenshot of the sample app, 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. ![Screenshot](https://github.com/vinceyuan/ReactNativeOpacityBugDemo/raw/master/ReactNativeOpacityBug.gif) Reproduced on rnplay.org https://rnplay.org/apps/JbdOpQ The sample project I created: https://github.com/vinceyuan/ReactNativeOpacityBugDemo You can try my fix on branch fix-react-native-issue-11769 https://github.com/vinceyuan/ReactNativeOpacityBugDemo/tree/fix-react-native-issue-11769 Closes https://github.com/facebook/react-native/pull/11770 Differential Revision: D4403096 fbshipit-source-id: 99c6831ab17eae304e09f23dbad387041d933a30 --- .../layoutanimation/BaseLayoutAnimation.java | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/layoutanimation/BaseLayoutAnimation.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/layoutanimation/BaseLayoutAnimation.java index f3c846864d1..f4fa2ea5cd4 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/layoutanimation/BaseLayoutAnimation.java +++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/layoutanimation/BaseLayoutAnimation.java @@ -22,13 +22,16 @@ import com.facebook.react.uimanager.IllegalViewOperationException; @Override Animation createAnimationImpl(View view, int x, int y, int width, int height) { - float fromValue = isReverse() ? 1.0f : 0.0f; - float toValue = isReverse() ? 0.0f : 1.0f; if (mAnimatedProperty != null) { switch (mAnimatedProperty) { - case OPACITY: + case OPACITY: { + float fromValue = isReverse() ? view.getAlpha() : 0.0f; + float toValue = isReverse() ? 0.0f : view.getAlpha(); return new OpacityAnimation(view, fromValue, toValue); - case SCALE_XY: + } + case SCALE_XY: { + float fromValue = isReverse() ? 1.0f : 0.0f; + float toValue = isReverse() ? 0.0f : 1.0f; return new ScaleAnimation( fromValue, toValue, @@ -38,6 +41,7 @@ import com.facebook.react.uimanager.IllegalViewOperationException; .5f, Animation.RELATIVE_TO_SELF, .5f); + } default: throw new IllegalViewOperationException( "Missing animation for property : " + mAnimatedProperty);