Skip to content

Opacity animations not working on Android with the native driver #30156

@victoriomolina

Description

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    API: AnimatedBugPlatform: AndroidAndroid applications.StaleThere has been a lack of activity on this issue and it may be closed soon.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions