unname coder's blog

Does React Native Navigation experimental support slide from bottom, slide from left, fade effects etc? If yes how do we do it. Please help. When you render your scene using renderScene of NavigationTransitioner , you get props object that contains layout , position , scene and progress . You can use them with your custom interpolation function to create any animation you like. At this time, react native seems to have only right-to-left and bottom-to-up animations out-of-the-box. You can use them via NavigationCardStackStyleInterpolator : forHorizontal and forVertical . See: NavigationCardStackStyleInterpolator.js for more details. If your code looks like: RN-NavigationExperimental-Redux-Example You can define style property of NavigationCard like: <NavigationCard {...props} style={NavigationCardStackStyleInterpolator.forVertical(props)} renderScene={this._renderScene} key={props.scene.navigationState.key} /> This will change transition fro...

I'm kinda new in the react-native world and somehow I can't find the NavigationBar docs for react-native, is there a page,github... I could check out? It must be somewhere or how did the people know how to use it? (I'm curious). Cheers! The React Native documentation is in general, quite poor. It is incomplete and does not cover nearly enough cases to provide valuable information. The team heavily recommends reading through the source for help. Here is an example implementation: https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/Navigator/NavigationBarSample.js

I'm exploring possibilities of React Native while developing a demo app with custom navigation between views with the help of Navigator component - http://facebook.github.io/react-native/docs/navigator.html#content The main app class renders navigator and inside renderScene returns passed component: class App extends React.Component { render() { return ( <Navigator initialRoute={{name: 'WelcomeView', component: WelcomeView}} configureScene={() => { return Navigator.SceneConfigs.FloatFromRight; }} renderScene={(route, navigator) => { // count the number of func calls console.log(route, navigator); if (route.component) { return React.createElement(route.component, { navigator }); } }} /> ); } } For now...