- Sponsor
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Support translate array syntax, enables translateZ #538
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
Conversation
msand
commented
Jan 7, 2020
•
edited
Loading
edited
<Animated.View style={{ color: 'green', transform: [ {rotateY: '30deg'}, Platform.OS === 'web' ? {translateZ: 100} : {translate: [0, 0, 100]}, ], }} />
to use tranzlateZ when there is no rotation of the origin, there is a helper function named translateZ: https://github.com/wcandillon/react-native-redash/blob/master/packages/core/src/Transformations.ts#L14 |
@wcandillon That actually gives different behaviour when combined with e.g. rotateY, you need to translate it in 3d space to get a cube like rotation using only those two primitives, with the translateZ it only scales it, rather than lift it out in 3d space. Check Stories2 implementation with alt = false on android here: https://snack.expo.io/@msand/new-instagram-stories |
That makes sense, big thank you 🙌🏻 |
And to clarify to maintainers, this works in plain View element styles, and, In this specific case It's possible to emulate using translateX, rotateY and perspective But, more complex 3d scenes would be very hard to keep track of, without being able to adjust their position on the Z axis. |
So, this pull request fixes the broken reanimated + android case, doesn't fix the web part, but the web doesn't have any integration with the native WebAnimation api anyway (doesn't lock animations if javascript is blocking), so the web components can use the plain react-native Animated.View logic just fine atm. |
I would be interested to see this PR merged into reanimated :) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks! 🎉
I can't speculate why this would be the case, but taking the same working project from reanimated 1.10.2 to 1.11.0 (which had the sole change of this PR), I began crashing on android with this stack trace:
That only happens when I open a screen in my app that uses a drawer navigator ( Reverting to 1.10.2 results in a working screen |
It's possible, I looked at the diff and it seems that after changing ternary to I'll try to repro it and create a fix for that tomorrow. We version reanimated like expo (native changes always go into minor, even if it's patch), so you can expect that 1.12 should work. Thanks for reporting! |
I have a pretty easy repro case and am handy with patch-package etc, so I'll test your hypothesis and report back |
Can you share it here, please? |
After changing original nested ternary in #538 to if-else chain double case didn't have assignment, so it was crashing with null value for transform style error. Example: import React from 'react'; import {SafeAreaView, Text} from 'react-native'; import Animated from 'react-native-reanimated'; const App = () => { return ( <SafeAreaView> <Animated.View style={{ transform: [{translateX: 100.2}], }}> <Text>Test </Text> </Animated.View> </SafeAreaView> ); }; export default App;
I cannot sorry, I know it would help, but it's a proprietary app. But since your response was so fast (thank you!) I still had the issue laying out on the dissection table as it were, so just at this moment with this app I can break it or not depending on that version. I'm rebuilding now to check the patch you mention I can say that it's not super fancy, it's an app with bottom tab navigator and on one screen I have a drawer navigator that pulls out from the left, using pretty default settings but (unfortunately) on the old versions of all the react-navigation stuff. So I don't know how it would translate. |
It's alright, I thought you made some small example on new RN app using the drawer. I already submitted PR with a fix and example, so it's not necessary now. Thanks for testing that though, small examples often overlook things that bubble up in real apps. |
## Description After changing the original nested ternary in #538 to if-else chain double case didn't have an assignment, so it was crashing with a null value for transform style error. ## Example ```jsx import React from 'react'; import {SafeAreaView, Text} from 'react-native'; import Animated from 'react-native-reanimated'; const App = () => { return ( <SafeAreaView> <Animated.View style={{ transform: [{translateX: 100.2}], }}> <Text>Test </Text> </Animated.View> </SafeAreaView> ); }; export default App; ```
```jsx <Animated.View style={{ color: 'green', transform: [ {rotateY: '30deg'}, Platform.OS === 'web' ? {translateZ: 100} : {translate: [0, 0, 100]}, ], }} /> ``` Co-authored-by: Jakub Gonet <jakub.gonet@swmansion.com>
After changing the original nested ternary in #538 to if-else chain double case didn't have an assignment, so it was crashing with a null value for transform style error. ```jsx import React from 'react'; import {SafeAreaView, Text} from 'react-native'; import Animated from 'react-native-reanimated'; const App = () => { return ( <SafeAreaView> <Animated.View style={{ transform: [{translateX: 100.2}], }}> <Text>Test </Text> </Animated.View> </SafeAreaView> ); }; export default App; ```
```jsx <Animated.View style={{ color: 'green', transform: [ {rotateY: '30deg'}, Platform.OS === 'web' ? {translateZ: 100} : {translate: [0, 0, 100]}, ], }} /> ``` Co-authored-by: Jakub Gonet <jakub.gonet@swmansion.com>
After changing the original nested ternary in #538 to if-else chain double case didn't have an assignment, so it was crashing with a null value for transform style error. ```jsx import React from 'react'; import {SafeAreaView, Text} from 'react-native'; import Animated from 'react-native-reanimated'; const App = () => { return ( <SafeAreaView> <Animated.View style={{ transform: [{translateX: 100.2}], }}> <Text>Test </Text> </Animated.View> </SafeAreaView> ); }; export default App; ```