Android, Animated, useNativeDriver, and rotateY transforms - Animation not appearing

[mini-eggs]

Want to start of by saying love the React Native project and have used it on a number of apps so far. Great dev experience.

Description

On Android while using the Animated API with useNativeDriver set to true, i.e.

Animated.timing(this.state.rotateY, { useNativeDriver: true, toValue: 1, duration: 500 }).start();

the animation will not appear. Say we rotateY a View that is initially at 0deg to 360deg, the View will disappear when the animation begins then reappear after the animation's duration has ended. If you're rotating from 0deg to a degree, X, s.t. X % 360 !== 0 the View will disappear entirely until its rotateY degree, Y, fulfills Y % 360 === 0 (hope that helps understand the issue 🤞 ). All other animations I have tried on Android with useNativeDriver option support has worked great.

Currently in prod on the mobile application I've been experience this issue (code linked below), the Android version of the app has useNativeDriver set to false (with a noticeable decline in performance) while iOS has it set to true and is working beautifully.

Reproduction Steps and Sample Code

You can find the project I've been experience this issue here. The important code to look at starts at line 26 here. This is a small wrapper function for creating Animated.Views and is put to use in another important file that displays this problem occurring, here.

Notice on line 32 of animatedSquare.utilities.js I have useNativeDriver: Platform.OS === "ios",. To reproduce this set this line to useNativeDriver: true,.

You should be able to git clone the repo linked above

git clone https://github.com/mini-eggs/Flippour.git

and have it up and running on Android with yarn android after a simulator has been started. I have not included keystores for obvious reasons. 😜

Solution

Ensure the transform rotateY is working on Android.

Additional Information

• React Native version: ^0.43.3
• React version: 16.0.0-alpha.6
• Platform: Android
• Development Operating System: MacOS
• Dev tools: compileSdkVersion 25, buildToolsVersion 25.0.2, minSdkVersion 16, targetSdkVersion 23

Thank you for looking into this. Feel free to hit me if you're having issues reproducing this.

[mini-eggs]

NOTE: If you include { perspective: 1000 } in the style transform array this works fine for Android. I'm not sure if there is documentation on this somewhere and I'm just a dummy or not. I'll go checkout the Animated docs again. If not there I'll submit PR. :-)

Line 160 here has fixed the issue I've been experiencing.

Closing this issue.

[lynndylanhurley]

I'm having the same issue, but the problem doesn't go away when I add { perspective: 1000 }. @mini-eggs - are you sure that was the only fix?