-
Notifications
You must be signed in to change notification settings - Fork 24.9k
Description
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.