Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
mini-eggs opened this issue Apr 15, 2017 · 2 comments

Comments

Projects
None yet
3 participants
@mini-eggs
Copy link
Contributor

commented Apr 15, 2017

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

This comment has been minimized.

Copy link
Contributor Author

commented Apr 16, 2017

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

This comment has been minimized.

Copy link

commented Apr 17, 2017

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?

facebook-github-bot added a commit that referenced this issue Aug 4, 2017

Adding documentation to useNativeDriver portion of the Animated API
Summary:
What existing problem does the pull request solve?

Ensure users of the React Native platform are aware of transform properties they must have while using `useNativeDriver` with the Animated API.

Not applicable.

I've been messing around with this for a couple of days at this point and feel a bit silly. See this issue [here](#13522). This would have saved me some time and will likely save others time as well.

Thank you for taking the time to look over this PR. Cheers!
Closes #13524

Differential Revision: D5567584

Pulled By: hramos

fbshipit-source-id: 4be9f1ba0f21148106f596efb0be791d4d364a66

facebook-github-bot added a commit that referenced this issue Aug 7, 2017

always set camera distance on transforms, to default 1280 if 0
Summary:
This is the better fix for the same issue as mentioned in PR #14560

Certain rotateX, rotateY, scaleX and scaleY animations do not work correctly on some phones in Android 7.0.0, causing issues such as #14462 and #13522.

The issue can be fixed on JS side by setting an additional transform for perspective, eg. `{perspective: 1}` which triggers a `setCameraDistance` call in native code.

The fix in this PR always sets the camera distance on transforms, even when no perspective transform was specified. The default camera distance is set before the scale multiplication, to make sure that the value is appropriate for the phones density. The value calculates to an Android 'default' camera distance of 1280 * scale multiplier; https://developer.android.com/reference/android/view/View.html#setCameraDistance(float)

If a perspective transform is specified, this value will be used correctly still.

This fix was tested on the RNTester. Before the fix, on some devices, the FlatList example, with inverted turned on, will not display the list.

Devices that have been confirmed to have this issue:
FRD-AL10(honor 8) EMUI:5.0 android: 7.0
MHA-AL00(Mate9) EMUI:5.0 android:7.0
Huawei P10 VTR-L09, running Android 7.0

After the fix, the inverted FlatList displays correctly.
Closes #14646

Differential Revision: D5492009

Pulled By: shergin

fbshipit-source-id: d4da3b090a7e65df3b84e48ea32c964f4f8f7c88

@facebook facebook locked as resolved and limited conversation to collaborators May 24, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.