fix nested nav controllers

aksonov · aksonov · Dec 9, 2015 · Dec 8, 2015 · Dec 8, 2015 · Dec 8, 2015
commit b9f48ccdfa598477c4eed141a2aa9925819ebbb3
diff --git a/Animations.js b/Animations.js
@@ -0,0 +1,147 @@
+import React from 'react-native';
+const {PixelRatio, Navigator, Dimensions} = React;
+import buildStyleInterpolator from 'react-native/Libraries/Utilities/buildStyleInterpolator';
+
+var NoTransition = {
+    opacity: {
+        from: 1,
+        to: 1,
+        min: 1,
+        max: 1,
+        type: 'linear',
+        extrapolate: false,
+        round: 100,
+    },
+};
+
+var FadeToTheLeft = {
+    // Rotate *requires* you to break out each individual component of
+    // rotation (x, y, z, w)
+    transformTranslate: {
+        from: {x: 0, y: 0, z: 0},
+        to: {x: -Math.round(Dimensions.get('window').width * 0.3), y: 0, z: 0},
+        min: 0,
+        max: 1,
+        type: 'linear',
+        extrapolate: true,
+        round: PixelRatio.get(),
+    },
+    // Uncomment to try rotation:
+    // Quick guide to reasoning about rotations:
+    // http://www.opengl-tutorial.org/intermediate-tutorials/tutorial-17-quaternions/#Quaternions
+    // transformRotateRadians: {
+    //   from: {x: 0, y: 0, z: 0, w: 1},
+    //   to: {x: 0, y: 0, z: -0.47, w: 0.87},
+    //   min: 0,
+    //   max: 1,
+    //   type: 'linear',
+    //   extrapolate: true
+    // },
+    transformScale: {
+        from: {x: 1, y: 1, z: 1},
+        to: {x: 0.95, y: 1, z: 1},
+        min: 0,
+        max: 1,
+        type: 'linear',
+        extrapolate: true
+    },
+    opacity: {
+        from: 1,
+        to: 0.3,
+        min: 0,
+        max: 1,
+        type: 'linear',
+        extrapolate: false,
+        round: 100,
+    },
+    translateX: {
+        from: 0,
+        to: -Math.round(Dimensions.get('window').width * 0.3),
+        min: 0,
+        max: 1,
+        type: 'linear',
+        extrapolate: true,
+        round: PixelRatio.get(),
+    },
+    scaleX: {
+        from: 1,
+        to: 0.95,
+        min: 0,
+        max: 1,
+        type: 'linear',
+        extrapolate: true
+    },
+    scaleY: {
+        from: 1,
+        to: 0.95,
+        min: 0,
+        max: 1,
+        type: 'linear',
+        extrapolate: true
+    },
+};
+
+
+
+var FromTheRight = {
+    opacity: {
+        value: 1.0,
+        type: 'constant',
+    },
+
+    transformTranslate: {
+        from: {x: Dimensions.get('window').width, y: 0, z: 0},
+        to: {x: 0, y: 0, z: 0},
+        min: 0,
+        max: 1,
+        type: 'linear',
+        extrapolate: true,
+        round: PixelRatio.get(),
+    },
+
+    translateX: {
+        from: Dimensions.get('window').width,
+        to: 0,
+        min: 0,
+        max: 1,
+        type: 'linear',
+        extrapolate: true,
+        round: PixelRatio.get(),
+    },
+
+    scaleX: {
+        value: 1,
+        type: 'constant',
+    },
+    scaleY: {
+        value: 1,
+        type: 'constant',
+    },
+};
+
+
+
+const Animations = {
+    FlatFloatFromRight: {
+        ...Navigator.SceneConfigs.FloatFromRight,
+        // Animation interpolators for horizontal transitioning:
+        animationInterpolators: {
+            into: buildStyleInterpolator(FromTheRight),
+            out: buildStyleInterpolator(FadeToTheLeft),
+        },
+        // We will want to customize this soon
+    },
+
+
+    None: {
+        ...Navigator.SceneConfigs.FloatFromRight,
+        gestures: null,
+        defaultTransitionVelocity: 100,
+        animationInterpolators: {
+            into: buildStyleInterpolator(NoTransition),
+            out: buildStyleInterpolator(NoTransition),
+        }
+    }
+}
+
+export default Animations;
diff --git a/Example/.idea/workspace.xml b/Example/.idea/workspace.xml
diff --git a/Example/Example.js b/Example/Example.js
@@ -10,39 +10,46 @@ var {Router, Route, Schema, Animations, TabBar} = require('react-native-router-f
 var Error = require('./components/Error');
 var Home = require('./components/Home');
 var TabView = require('./components/TabView');
-var TabIcon = require('./components/TabIcon');
+
+class TabIcon extends React.Component {
+    render(){
+        return (
+            <Text style={{color: this.props.selected ? 'red' :'black'}}>{this.props.title}</Text>
+        );
+    }
+}
 
 export default class Example extends React.Component {
     render() {
         return (
-            <Router showNavigationBar={false}>
+            <Router hideNavBar={true}>
                 <Schema name="modal" sceneConfig={Navigator.SceneConfigs.FloatFromBottom}/>
                 <Schema name="default" sceneConfig={Navigator.SceneConfigs.FloatFromRight}/>
                 <Schema name="withoutAnimation"/>
-                <Schema name="tab" type="switch"/>
+                <Schema name="tab" type="switch" icon={TabIcon} />
 
-                <Route name="launch" component={Launch} initial={true} hideNavBar={true} title="Launch"/>
+                <Route name="launch" component={Launch} initial={true} wrapRouter={true} title="Launch"/>
                 <Route name="register" component={Register} title="Register"/>
-                <Route name="home" component={Home} title="Home" type="replace"/>
+                <Route name="home" component={Home} title="Replace" type="replace"/>
                 <Route name="login" schema="modal">
                     <Router>
                         <Route name="loginModal" component={Login} title="Login" schema="modal"/>
                         <Route name="loginModal2" component={Login2} title="Login2"/>
                     </Router>
                 </Route>
-                <Route name="register2" component={Register} schema="withoutAnimation"/>
+                <Route name="register2" component={Register} title="Register2"  schema="withoutAnimation"/>
                 <Route name="tabbar">
                     <Router footer={TabBar} showNavigationBar={false}>
-                        <Route name="tab1" icon={TabIcon} schema="tab" title="Tab #1" >
+                        <Route name="tab1" schema="tab" title="Tab #1" >
                             <Router>
                                 <Route name="tab1_1" component={TabView} title="Tab #1_1" />
                                 <Route name="tab1_2" component={TabView} title="Tab #1_2" />
                             </Router>
                         </Route>
-                        <Route name="tab2" icon={TabIcon} schema="tab" title="Tab #2" component={TabView} />
-                        <Route name="tab3" icon={TabIcon} schema="tab" title="Tab #3" component={TabView} />
-                        <Route name="tab4" icon={TabIcon} schema="tab" title="Tab #4" component={TabView} />
-                        <Route name="tab5" icon={TabIcon} schema="tab" title="Tab #5" component={TabView} />
+                        <Route name="tab2" schema="tab" title="Tab #2" component={TabView} />
+                        <Route name="tab3" schema="tab" title="Tab #3" component={TabView} />
+                        <Route name="tab4" schema="tab" title="Tab #4" component={TabView} />
+                        <Route name="tab5" schema="tab" title="Tab #5" component={TabView} />
                     </Router>
                 </Route>
             </Router>

diff --git a/Example/components/Home.js b/Example/components/Home.js
@@ -9,7 +9,7 @@ class Register extends React.Component {
     render(){
         return (
             <View style={styles.container}>
-                <Text>Home</Text>
+                <Text>Replace screen</Text>
                 <Button onPress={Actions.pop}>Back</Button>
             </View>
         );

diff --git a/Example/components/Register.js b/Example/components/Register.js
@@ -10,7 +10,7 @@ class Register extends React.Component {
         return (
             <View style={styles.container}>
                 <Text>Register page</Text>
-                <Button onPress={Actions.home}>Home</Button>
+                <Button onPress={Actions.home}>Replace screen</Button>
                 <Button onPress={Actions.pop}>Back</Button>
             </View>
         );

diff --git a/Example/components/TabView.js b/Example/components/TabView.js
@@ -8,6 +8,7 @@ var Actions = require('react-native-router-flux').Actions;
 
 class TabView extends React.Component {
     render(){
+        console.log("RENDER!"+this.props.name);
         return (
             <View style={styles.container}>
                 <Text>Tab {this.props.title}</Text>

diff --git a/Example/package.json b/Example/package.json
@@ -8,7 +8,7 @@
   "dependencies": {
     "react-native": "^0.16",
     "react-native-button": "^1.2.1",
-    "react-native-router-flux": "^0.3.2",
-    "react-native-tabs": "^0.0.5"
+    "react-native-router-flux": "^1.0.0",
+    "react-native-tabs": "^0.1.4"
   }
 }