From 24ef9aa397acc939c8e833dbab12ae425c9d2191 Mon Sep 17 00:00:00 2001
From: Pavlo Aksonov <aksonov@gmail.com>
Date: Sat, 19 Mar 2016 09:12:27 +0100
Subject: [PATCH] fix for #340 and transition direction

---
 Example/Example.js           | 6 +++---
 Example/components/Launch.js | 2 +-
 Example/package.json         | 4 ++--
 README.md                    | 2 ++
 package.json                 | 2 +-
 src/DefaultRenderer.js       | 7 +++++--
 6 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/Example/Example.js b/Example/Example.js
index f75ca1669..68cf639de 100644
--- a/Example/Example.js
+++ b/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}>
diff --git a/Example/components/Launch.js b/Example/components/Launch.js
index eaa0c3078..56150a339 100644
--- a/Example/components/Launch.js
+++ b/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>
diff --git a/Example/package.json b/Example/package.json
index b341b1ffe..4892a48e2 100644
--- a/Example/package.json
+++ b/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"
   }
 }
diff --git a/README.md b/README.md
index b9e0e46b3..14ec34d5a 100644
--- a/README.md
+++ b/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 |
diff --git a/package.json b/package.json
index 119c0874e..9a5523505 100644
--- a/package.json
+++ b/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",
diff --git a/src/DefaultRenderer.js b/src/DefaultRenderer.js
index 805e49126..52d751229 100644
--- a/src/DefaultRenderer.js
+++ b/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'
     },
 });