fix for #340 and transition direction

Example/Example.js

@@ -32,9 +32,9 @@ const scenes = Actions.create(
             <Scene key="register" component={Register} title="Register"/>
             <Scene key="register2" component={Register} title="Register2" duration={1}/>
             <Scene key="home" component={Home} title="Replace" type="replace"/>
-            <Scene key="launch" component={Launch} title="Launch" initial={true}/>
-            <Scene key="login">
-                <Scene key="loginModal" component={Login} schema="modal" title="Login" style={{backgroundColor:'transparent'}}/>
+            <Scene key="launch" component={Launch} title="Launch" initial={true} style={{flex:1, backgroundColor:'transparent'}}/>
+            <Scene key="login" direction="vertical">
+                <Scene key="loginModal" component={Login} schema="modal" title="Login"/>
                 <Scene key="loginModal2" hideNavBar={true} component={Login2} title="Login2"/>
             </Scene>
             <Scene key="tabbar" component={Switch} tabs={true} default="tab2" selector={props=>props.default}>

Example/components/Launch.js

@@ -8,7 +8,7 @@ var Actions = require('react-native-router-flux').Actions;
 class Launch extends React.Component {
     render(){
         return (
-            <View style={styles.container} {...this.props}>
+            <View {...this.props}  style={[styles.container, this.props.style]}>
                 <Text>Launch page</Text>
                 <Button onPress={()=>Actions.login({data:"Custom data", title:'Custom title' })}>Go to Login page</Button>
                 <Button onPress={Actions.register}>Go to Register page</Button>

Example/package.json

@@ -6,10 +6,10 @@
     "start": "node_modules/react-native/packager/packager.sh"
   },
   "dependencies": {
-    "react-native": "^0.22.0-rc",
+    "react-native": "^0.22.0-rc4",
     "react-native-button": "^1.2.1",
     "react": "^0.14.7",
-    "react-native-router-flux": "^3.0.11",
+    "react-native-router-flux": "^3.0.13",
     "react-native-modalbox": "^1.3.0"
   }
 }

README.md

@@ -87,6 +87,8 @@ const scenes = Actions.create(
 | type | string | 'push' or 'jump' | Defines how the new screen is added to the navigator stack. One of `push`, `jump`, `replace`. If parent container is tabbar (tabs=true), jump will be automatically set.
 | tabs| bool | false | Defines 'TabBar' scene container, so child scenes will be displayed as 'tabs'. If no `component` is defined, built-in `TabBar` is used as renderer. All child scenes are wrapped into own navbar.
 | initial | bool | false | Set to `true` if this is the initial scene |
+| duration | number | 250 | Duration of transition (in ms) |
+| direction | string | 'horizontal' | direction of animation horizontal/vertical | 
 | title | string | null | The title to be displayed in the navigation bar |
 | navBar | React.Component | | optional custom NavBar for the scene. Check built-in NavBar of the component for reference |
 | hideNavBar | bool | false | hides navigation bar for this scene |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-router-flux",
-  "version": "3.0.13",
+  "version": "3.0.14",
   "description": "React Native Router using Flux architecture",
   "repository": {
     "type": "git",

src/DefaultRenderer.js

@@ -46,10 +46,10 @@ export default class DefaultRenderer extends Component {
         return (
             <NavigationAnimatedView
                 navigationState={navigationState}
-                style={styles.animatedView}
+                style={[styles.animatedView, navigationState.style]}
                 renderOverlay={this._renderHeader}
                 setTiming={(pos, navState) => {
-          Animated.timing(pos, {toValue: navState.index, duration: selected.duration || 500}).start();
+          Animated.timing(pos, {toValue: navState.index, duration: selected.duration || 250}).start();
         }}
                 renderScene={this._renderCard}
             />
@@ -69,7 +69,9 @@ export default class DefaultRenderer extends Component {
             <NavigationCard
                 {...props}
                 key={'card_' + props.scene.navigationState.key}
+                direction={props.scene.navigationState.direction || 'horizontal'}
                 renderScene={this._renderScene}
+                style={{backgroundColor:'transparent'}}
             />
         );
     }
@@ -83,6 +85,7 @@ export default class DefaultRenderer extends Component {
 const styles = StyleSheet.create({
     animatedView: {
         flex: 1,
+        backgroundColor:'transparent'
     },
 });