[ios] Native custom animation between scenes?

[aksonov]

I want to implement 3D cube transition and 3D transformations seem not supported by React Native now. Could I implement native iOS animation for that?

[ericvicenti]

Absolutely. You can make a new native iOS component with the following guide: http://facebook.github.io/react-native/docs/native-components-ios.html#content

Your cube component may have the following API:

<My3DCube
  activeFace="top"
  renderTopFace={() => <MyView />)
  renderFrontFace={() => <MyOtherView />)
/>

[aksonov]

Thanks, but how to integrate it into navigation experimental API?

Pavel.

8 марта 2016 г., в 23:29, Eric Vicenti notifications@github.com написал(а):

Absolutely. You can make a new native iOS component with the following guide: http://facebook.github.io/react-native/docs/native-components-ios.html#content

Your cube component may have the following API:

<My3DCube activeFace="top" renderTopFace={() => ) renderFrontFace={() => ) /> — Reply to this email directly or view it on GitHub.

[Kureev]

I believe the navigator itself doesn't know anything about the underlying implementation of your transitions. So I think you just render your component in the renderScene and that's it.

[aksonov]

I believe navigator should know about it because i'm talking about different scenes and custom transition between them...

[Kureev]

Sorry if my answer wasn't full enough. If you use a <NavigationAnimatedView> like in the example, it doesn't change anything inside the <NavigatorExperimental>. If you want to use your custom component inside the new navigator, wrap it into NavigationAnimatedView. We don't have a proper documentation for this component yet, so I recommend you to check a NavigationAnimatedView source code in the meanwhile.

[aksonov]

Thanks for answer, but sorry, still don't understand. Maybe my question was not clear. Let's say i have TabBarIOS component - tab bar iOS native implementation. It accepts react views as children (TabBarItem, but it doesn't matter), renders tabbar and switches between tabs. But switching between tabs there is 'black box' (i.e. state is stored inside TabBarIOS)

My question - could i use new Navigator to switch to that iOS tab using toNavigate method? As I understand it is primary goal of new Navigator - separate state from view.

[aksonov]

Looks like NavigationCompositionExample is the key for me, i have to pass own handler to onNavigate property... Is there any documentation about it?

[ericvicenti]

As you can see from the NavigationExperimental examples, the stateful TabBarIOS is not recommended. @aksonov, do you have any specific questions about onNavigate, so I know what to answer in the documentation?

[aksonov]

TabBarIOS was mentioned for reference, i'm going to use own native 'cube' controller with 3D transitions. As I see i have to wrap it into NavigationView and pass navigation state to my own component within renderScene. Thanks, I will ask more specific questions when i finish integration.

[ericvicenti]

:+1: