Opacity animations not working on Android with the native driver

RN Version

react-native-cli: 2.0.1 react-native: 0.63.3

Environment Info

System: OS: Windows 10 10.0.19041 CPU: (12) x64 Intel® Core™ i7-8750H CPU @ 2.20GHz Memory: 7.62 GB / 15.85 GB Binaries: Node: 12.18.1 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: Not Found Windows SDK: Not Found IDEs: Android Studio: Version 3.6.0.0 AI-192.7142.36.36.6241897 Visual Studio: Not Found Languages: Java: 1.8.0_221 - /c/Program Files/Java/jdk1.8.0_221/bin/javac Python: 3.7.4 - /c/Users/34683/AppData/Local/Programs/Python/Python37-32/python npmPackages: @react-native-community/cli: Not Found react: ^16.13.1 => 16.13.1 react-native: ^0.63.3 => 0.63.3 react-native-windows: ^0.63.3 => 0.63.3 npmGlobalPackages: react-native: Not Found

Problem

I updated my RN version, and for some reason, the opacity animations are not working now on Android if they run on the native driver.

In your code I have seen that opacity is still in the WHITE_LIST

/**
 * Styles allowed by the native animated implementation.
 *
 * In general native animated implementation should support any numeric property that doesn't need
 * to be updated through the shadow view hierarchy (all non-layout properties).
 */
const STYLES_WHITELIST = {
  opacity: true,
  transform: true,
  borderRadius: true,
  borderBottomEndRadius: true,
  borderBottomLeftRadius: true,
  borderBottomRightRadius: true,
  borderBottomStartRadius: true,
  borderTopEndRadius: true,
  borderTopLeftRadius: true,
  borderTopRightRadius: true,
  borderTopStartRadius: true,
  elevation: true,
  zIndex: true,
  /* ios styles */
  shadowOpacity: true,
  shadowRadius: true,
  /* legacy android transform properties */
  scaleX: true,
  scaleY: true,
  translateX: true,
  translateY: true,
};

but running this simple code doesn’t work on my Samsung Galaxy S8+

     Animated.parallel([
        Animated.timing(hidePanel, {
          toValue: 0,
          duration: 300,
          delay: 1500,
          easing: Easing.linear,
          useNativeDriver: true,
        }),
        Animated.timing(hideLogo, {
          toValue: 0,
          duration: 300,
          delay: 1000,
          easing: Easing.linear,
          useNativeDriver: true,
        }),
      ]).start();

        ...
       
       <Animated.View
        style={[
          StyleSheet.absoluteFill,
          {
            opacity: hidePanel,
          },
        ]}
      > 
         ...

Why is this happening? This is working good on IOS, but not on Android.

[michalpolakfortum]

It’s just one of possible solutions. As mentioned in https://github.com/facebook/react-native/issues/25318 another solution is to start opacity animation from different value than 1 (say 0.99 as an example). It’s an old issue and a pull have already been created for it (https://github.com/facebook/react-native/pull/25361) but was causing some issues and was reverted.

It seems that in certain circumstances animated component is being optimised away. According to docs testID disables optimisation and that’s probably why it works as well.

[michalpolakfortum]

It’s probably an old issue related to https://github.com/facebook/react-native/issues/25318. Also i found out that for some reason appending testID prop to Animated.View resolves the issue as well.