Animated transform styles do not work on Android when useNativeDriver is true. #13550
Description
Description
Animated transform styles do not work on Android when useNativeDriver is true.
In my code, I'm trying to animate the transition between two screens using the transform style attr. This works as expected in iOS, but not on Android (see attached).
One more thing to note is that I have an addListener event attached to the Animated.Value that fires on iOS but never fires on Android.
iOS (working)
Android (not working)
Reproduction Steps and Sample Code
Code Sample
// render
{oldChildren ? (
<View style={[ss.container, ss.animContainer, style]}>
<Animated.View
style={{
...styles.animPane,
...transition.oldChild(pos),
}}
>
<View style={styles.container}>
{oldChildren}
</View>
</Animated.View>
<Animated.View
style={{
...styles.animPane,
...transition.newChild(pos),
}}
>
<View style={styles.container}>
{children}
</View>
</Animated.View>
</View>
) : (
<View style={[ss.container, style]}>
{children}
</View>
)}
// functions for generating the transform styles
export function oldChild(pos) {
return {
transform: [{
translateX: pos.interpolate({
inputRange: [0, 0.8],
outputRange: [0, 400],
})
}, {
scale: pos.interpolate({
inputRange: [0, 0.8],
outputRange: [1, 0.7],
}),
}, { perspective: 1000 }],
opacity: pos.interpolate({
inputRange: [0, 0.8],
outputRange: [1, 0]
})
};
}
export function newChild(pos) {
return {
transform: [{
translateX: pos.interpolate({
inputRange: [0, 1],
outputRange: [-400, 0],
}),
}, {
scale: pos.interpolate({
inputRange: [0, 1],
outputRange: [1.1, 1],
}),
}, { perspective: 1000 }],
opacity: pos.interpolate({
inputRange: [0, 1],
outputRange: [0, 1]
})
};
}
// code to start the animation
Animated.timing(this.state.pos, {
toValue: 1,
duration: 300,
easing: Easing.elastic(0.7),
useNativeDriver: true, // <-- works when this is set to false
}).start();Additional Information
- React Native version:
0.43.3,0.44.0-rc.0 - Platform: Android
- Development Operating System: MacOS
- Dev tools: Genymotion
Thanks!!!
Activity
lynndylanhurley commentedon Apr 17, 2017
#13522 had the same issue and suggested adding
{ perspective: 1000 }to each transform. I tried with and without{ perspective: 1000 }and I get the same results either way.lynndylanhurley commentedon Apr 17, 2017
adbis showing a bunch of errors:lynndylanhurley commentedon Apr 18, 2017
Workaround
Set
backgroundColor: "transparent"to the views that have the animatedtransformstyles.This totally solves the issue but I'm leaving this open because it seems like a bug.
janicduplessis commentedon Apr 19, 2017
Thanks for reporting this. I'm pretty sure this happens because of view optimisations we do on android, adding a background color prevents the view from being optimized away. I have a PR up to fix this but has not been merged yet. #12983
hramos commentedon Jul 25, 2017
Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!
If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:
If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.
pintocarlos commentedon May 31, 2018
This is still happening. I get this error when trying to perform a translationY transformation on Android.
It runs perfectly fine on iOS.