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!!!