Navigation using the flow router instead of navigator.

marano · Dec 12, 2015 · cdc1cde · cdc1cde
1 parent 5a9851e
commit cdc1cde
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 18 deletions.
diff --git a/app/CountdownMeditationTimer.js b/app/CountdownMeditationTimer.js
@@ -15,17 +15,15 @@ var timer = React.createClass({
   mixins: [TimerMixin],
   getInitialState: function () {
     return {
-      timerStartedAt: undefined,
+      timerStartedAt: new Date(),
       timeCounter: '00:00'
     };
   },
   componentDidMount: function () {
     this.setInterval(
       () => {
-        if (this.state.timerStartedAt) {
-          var runningFor = moment().diff(this.state.timerStartedAt);
-          this.setState({ timeCounter: moment(runningFor).format('mm:ss') });
-        }
+        var runningFor = moment().diff(this.state.timerStartedAt);
+        this.setState({ timeCounter: moment(runningFor).format('mm:ss') });
       }, 500
     );
   },
@@ -36,8 +34,8 @@ var timer = React.createClass({
     return (
       <View style={styles.container}>
         <Text>{this.state.timeCounter}</Text>
-        <TouchableHighlight onPress={this._startTimer}>
-          <Text>Start Timer</Text>
+        <TouchableHighlight>
+          <Text>Pause</Text>
         </TouchableHighlight>
       </View>
     )

diff --git a/app/MeditationTimerSetup.js b/app/MeditationTimerSetup.js
@@ -2,8 +2,10 @@
 
 var moment = require('moment');
 var React = require('react-native');
+var { Actions } = require('react-native-router-flux');
 var TimerMixin = require('react-timer-mixin');
 
+
 var {
   StyleSheet,
   Text,
@@ -13,6 +15,7 @@ var {
 
 var NavigationTimerSetup = React.createClass({
   _start: function () {
+    Actions.CountdownMeditationTimer();
   },
   render: function () {
     return (

diff --git a/app/NewMeditationSession.js b/app/NewMeditationSession.js
@@ -3,19 +3,10 @@
 var React = require('react-native');
 var MeditationTimerSetup = require('./MeditationTimerSetup');
 
-var {
-  Navigator,
-} = React;
-
 var NewMeditationSession = React.createClass({
   render: function () {
     return (
-      <Navigator
-        initialRoute={{}}
-        renderScene={(route, navigator) =>
-          <MeditationTimerSetup />
-        }
-      />
+      <MeditationTimerSetup />
     );
   },
 });

diff --git a/app/index.js b/app/index.js
@@ -1,12 +1,17 @@
 'use strict';
 
 var React = require('react-native');
+var { Router, Route } = require('react-native-router-flux');
 var NewMeditationSession = require('./NewMeditationSession');
+var CountdownMeditationTimer = require('./CountdownMeditationTimer');
 
 var vijja = React.createClass({
   render: function() {
     return (
-      <NewMeditationSession />
+      <Router hideNavBar={true}>
+        <Route name="NewMeditationSession" component={NewMeditationSession} initial={true} />
+        <Route name="CountdownMeditationTimer" component={CountdownMeditationTimer} />
+      </Router>
     );
   }
 });

diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
   "dependencies": {
     "moment": "^2.10.6",
     "react-native": "^0.16.0",
+    "react-native-router-flux": "^1.0.5",
     "react-timer-mixin": "^0.13.3"
   }
 }