Opacity animations not working on Android with the native driver

[VictorioMolina]

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(R) Core(TM) 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.

[github-actions]

⚠️	Missing Environment Information
ℹ️	Your issue may be missing information about your development environment. You can obtain the missing information by running react-native info in a console.

[michalpolakfortum]

It's probably an old issue related to #25318.
Also i found out that for some reason appending testID prop to Animated.View resolves the issue as well.

[VictorioMolina]

With Expo SDK 38, I was able to use it without problems on both operative systems. Anyways, this solution seems to be little tricky but works!

Thank you!

[safaiyeh]

Hey all! Thanks for sharing a solution @michalpolakfortum, could you share a code snippet for future people who may stumble on this issue.

Should there be an action taken by RN or is @michalpolakfortum work around sufficient?

[VictorioMolina]

@safaiyeh I suppose that an action has to be taken by the RN team. Opacity is still in the “white list” of animations supported by the native thread.

The solution solves the problem but it seems to be a trick to make this work:

   `<Animated.View
           testId=“FilmsContainer”
           style={{opacity}}
     />`

[michalpolakfortum]

It's just one of possible solutions. As mentioned in #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 (#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.

[therealtgd]

Still an issue after 2 years...

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.