Optional routers

README.md

@@ -43,7 +43,7 @@ Base will generate you a new project start point. It includes the following,
 * A sensible `README` providing consistent instructions between projects
 * `nvm` setup
 * Can optionally `init` Git for you
-* Router (using `react-native-router-flux`)
+* Router (using `react-native-router-flux` or `react-navigation`)
 * Redux setup
 * Redux store that is persisted and restored automatically
 * Redux logger

generators/base/index.js

@@ -22,9 +22,17 @@ module.exports = class extends Generator {
         message: 'Create a local git repo?',
         default: true,
       },
+      {
+        type: 'list',
+        name: 'router',
+        message: 'Which router would you like to use?',
+        default: 'react-native-router-flux@3.41.0',
+        choices: ['react-native-router-flux@3.41.0', 'react-navigation'],
+      },
     ]).then((answers) => {
       this.nodeVersion = answers.nodeVersion;
       this.createGit = answers.createGit;
+      this.router = answers.router;
     });
   }
 
@@ -54,24 +62,43 @@ module.exports = class extends Generator {
     );
 
     // copy root app file that the entry points use
-    this.fs.copyTpl(
-      this.templatePath('App/App.js'),
-      this.destinationPath(`App/${this.name}.js`),
-      { name: this.name }
-    );
+    if (this.router === 'react-navigation') {
+      this.fs.copyTpl(
+        this.templatePath('App/App.react-navigation.js'),
+        this.destinationPath(`App/${this.name}.js`),
+        { name: this.name }
+      );
+    } else {
+      this.fs.copyTpl(
+        this.templatePath('App/App.js'),
+        this.destinationPath(`App/${this.name}.js`),
+        { name: this.name }
+      );
+    }
 
     // copy router
-    this.fs.copyTpl(
-      this.templatePath('App/Router.js'),
-      this.destinationPath('App/Router.js'),
-      { name: this.name }
-    );
+    if (this.router === 'react-navigation') {
+      this.fs.copyTpl(
+        this.templatePath('App/Router.react-navigation.js'),
+        this.destinationPath('App/Router.js'),
+        { name: this.name }
+      );
+    } else {
+      this.fs.copyTpl(
+        this.templatePath('App/Router.js'),
+        this.destinationPath('App/Router.js'),
+        { name: this.name }
+      );
+    }
 
     // copy scenes
     this.fs.copyTpl(
       this.templatePath('App/Scenes'),
       this.destinationPath('App/Scenes'),
-      { name: this.name }
+      {
+        name: this.name,
+        router: this.router,
+      }
     );
 
     // copy components
@@ -82,19 +109,74 @@ module.exports = class extends Generator {
     );
 
     // copy store
+    if (this.router === 'react-navigation') {
+      this.fs.copyTpl(
+        this.templatePath('App/Store/index.react-navigation.js'),
+        this.destinationPath('App/Store/index.js'),
+        { name: this.name }
+      );
+    } else {
+      this.fs.copyTpl(
+        this.templatePath('App/Store/index.js'),
+        this.destinationPath('App/Store/index.js'),
+        { name: this.name }
+      );
+    }
+
+    // copy store middleware
     this.fs.copyTpl(
-      this.templatePath('App/Store'),
-      this.destinationPath('App/Store'),
+      this.templatePath('App/Store/Middleware/Buffer.js'),
+      this.destinationPath('App/Store/Middleware/Buffer.js'),
       { name: this.name }
     );
+    this.fs.copyTpl(
+      this.templatePath('App/Store/Middleware/index.js'),
+      this.destinationPath('App/Store/Middleware/index.js'),
+      { name: this.name }
+    );
+    this.fs.copyTpl(
+      this.templatePath('App/Store/Middleware/Saga.js'),
+      this.destinationPath('App/Store/Middleware/Saga.js'),
+      { name: this.name }
+    );
+    if (this.router === 'react-navigation') {
+      this.fs.copyTpl(
+        this.templatePath('App/Store/Middleware/Logger.react-navigation.js'),
+        this.destinationPath('App/Store/Middleware/Logger.js'),
+        { name: this.name }
+      );
+    } else {
+      this.fs.copyTpl(
+        this.templatePath('App/Store/Middleware/Logger.js'),
+        this.destinationPath('App/Store/Middleware/Logger.js'),
+        { name: this.name }
+      );
+    }
 
     // copy reducers
     this.fs.copyTpl(
-      this.templatePath('App/Reducers'),
-      this.destinationPath('App/Reducers'),
+      this.templatePath('App/Reducers/App.js'),
+      this.destinationPath('App/Reducers/App.js'),
       { name: this.name }
     );
 
+    this.fs.copyTpl(
+      this.templatePath('App/Reducers/index.js'),
+      this.destinationPath('App/Reducers/index.js'),
+      {
+        name: this.name,
+        reducers: (this.router === 'react-navigation') ? ['App', 'Nav'] : ['App'],
+      }
+    );
+
+    if (this.router === 'react-navigation') {
+      this.fs.copyTpl(
+        this.templatePath('App/Reducers/Nav.js'),
+        this.destinationPath('App/Reducers/Nav.js'),
+        { name: this.name }
+      );
+    }
+
     // copy actions
     this.fs.copyTpl(
       this.templatePath('App/Actions'),
@@ -196,7 +278,7 @@ module.exports = class extends Generator {
     this.yarnInstall([
       'axios',
       'react-native-dotenv',
-      'react-native-router-flux',
+      this.router,
       'react-redux',
       'redux',
       'redux-action-buffer',

generators/base/templates/App/App.react-navigation.js

@@ -0,0 +1,29 @@
+// @flow
+import React, { Component } from 'react';
+import { Provider } from 'react-redux';
+import Router, { RouterWithRedux } from '<%= name %>/App/Router';
+import Store, { restoreCachedStore } from '<%= name %>/App/Store';
+import App from '<%= name %>/App/Components/App';
+
+export default class <%= name %> extends Component {
+  componentDidMount() {
+    Router.addDeepLinkListener();
+    restoreCachedStore(() => {
+      Router.root(Store.dispatch);
+    });
+  }
+
+  componentWillUnmount() {
+    Router.removeDeepLinkListener();
+  }
+
+  render(): React$Element<any> {
+    return (
+      <App>
+        <Provider store={Store}>
+          <RouterWithRedux/>
+        </Provider>
+      </App>
+    );
+  }
+}

generators/base/templates/App/Reducers/Nav.js

@@ -0,0 +1,24 @@
+// @flow
+import { RootNavigator } from '<%= name %>/App/Router';
+import { REHYDRATE } from 'redux-persist/constants';
+
+type State = any;
+
+type Action = any;
+
+const initialState = RootNavigator.router.getStateForAction(
+  RootNavigator.router.getActionForPathAndParams('Launch')
+);
+
+const reducer = (state: State = initialState, action: Action): State => {
+  if (action.type === REHYDRATE) {
+    return RootNavigator.router.getStateForAction(
+      RootNavigator.router.getActionForPathAndParams('Launch')
+    );
+  } else {
+    const nextState = RootNavigator.router.getStateForAction(action, state);
+    return nextState || state;
+  }
+};
+
+export default reducer;

generators/base/templates/App/Reducers/index.js

@@ -1,9 +1,13 @@
 // @flow
 import { combineReducers } from 'redux';
-import App from '<%= name %>/App/Reducers/App';
+<% reducers.forEach(function(reducer) { -%>
+import <%= reducer %> from '<%= name %>/App/Reducers/<%= reducer %>';
+<% }); -%>
 
 const reducers = combineReducers({
-  app: App,
+<% reducers.forEach(function(reducer) { -%>
+  <%- reducer.toLowerCase() %>: <%= reducer %>,
+<% }); -%>
 });
 
 export default reducers;

generators/base/templates/App/Router.react-navigation.js

@@ -0,0 +1,76 @@
+// @flow
+import React from 'react';
+import { Linking } from 'react-native';
+import { connect } from 'react-redux';
+import {
+  StackNavigator,
+  NavigationActions,
+  addNavigationHelpers
+} from 'react-navigation';
+import Scenes from '<%= name %>/App/Scenes';
+
+const RootNavigator = StackNavigator({
+  Launch: {
+    screen: Scenes.Launch,
+  },
+  Main: {
+    screen: Scenes.Main,
+  },
+  Styleguide: {
+    screen: Scenes.Styleguide,
+  },
+});
+
+const Router = ({ dispatch, nav: state }) =>
+  <RootNavigator navigation={addNavigationHelpers({ dispatch, state })}/>
+;
+
+const RouterWithRedux = connect(({ nav }) => ({ nav }))(Router);
+
+const handleURL = ({ url }: { url: string }) => {
+  console.log('handleURL', url)
+};
+
+const addDeepLinkListener = () => {
+  Linking.addEventListener('url', handleURL);
+};
+
+const removeDeepLinkListener = () => {
+  Linking.removeEventListener('url', handleURL);
+};
+
+const getInitialURL = async () => {
+  return new Promise(resolve => {
+    Linking.getInitialURL().then((url) => {
+      if (url) {
+        resolve(url);
+      } else {
+        resolve(null);
+      }
+    }).catch(err => resolve(null));
+  });
+};
+
+const root = async (dispatch) => {
+  const url : string|null = await getInitialURL();
+
+  dispatch(
+    NavigationActions.reset({
+      index: 0,
+      actions: [
+        NavigationActions.navigate({ routeName: 'Main' }),
+      ],
+    })
+  );
+
+  if (url) {
+    handleURL({ url });
+  }
+};
+
+export default {
+  addDeepLinkListener,
+  removeDeepLinkListener,
+  root,
+};
+export { RootNavigator, RouterWithRedux };

generators/base/templates/App/Sagas/RequestExample.js

@@ -1,7 +1,7 @@
 import { call, put, takeEvery } from 'redux-saga/effects';
 import API from '<%= name %>/App/Services/API';
 
-export function* RequestExample() {
+const RequestExample = function*() {
   try {
 
     const url = 'https://reqres.in/api/users';
@@ -19,6 +19,8 @@ export function* RequestExample() {
   }
 }
 
-export default function* watchRequestExample() {
+const watchRequestExample = function*() {
   yield takeEvery('REQUEST_EXAMPLE', RequestExample);
 }
+
+export default watchRequestExample;

generators/base/templates/App/Sagas/index.js

@@ -1,8 +1,10 @@
 import { all, fork } from 'redux-saga/effects';
 import RequestExample from '<%= name %>/App/Sagas/RequestExample';
 
-export default function* rootSaga() {
+const rootSaga = function*() {
   yield all([
     fork(RequestExample),
   ]);
 }
+
+export default rootSaga;

generators/base/templates/App/Scenes/Main.js

@@ -1,10 +1,13 @@
 // @flow
 import React from 'react';
 import { Text } from 'react-native';
+<% if (router === 'react-native-router-flux@3.41.0') { -%>
 import { Actions } from 'react-native-router-flux';
+<% } -%>
 import Layout from '<%= name %>/App/Components/Layout';
 import Button from '<%= name %>/App/Components/Button';
 
+<% if (router === 'react-native-router-flux@3.41.0') { -%>
 function Main(): React$Element<any> {
   return (
     <Layout.Center>
@@ -13,5 +16,17 @@ function Main(): React$Element<any> {
     </Layout.Center>
   );
 }
+<% } else { -%>
+function Main({ navigation }): React$Element<any> {
+  return (
+    <Layout.Center>
+      <Text>Main</Text>
+      <Button onPress={() => navigation.navigate("Styleguide")}>
+        View Styleguide
+      </Button>
+    </Layout.Center>
+  );
+}
+<% } -%>
 
 export default Main;

generators/base/templates/App/Store/Middleware/Logger.react-navigation.js

@@ -0,0 +1,18 @@
+// @flow
+import { createLogger } from 'redux-logger';
+import { NavigationActions } from 'react-navigation';
+
+const blacklist = [
+  NavigationActions.BACK,
+  NavigationActions.INIT,
+  NavigationActions.NAVIGATE,
+  NavigationActions.RESET,
+  NavigationActions.SET_PARAMS,
+  NavigationActions.URI,
+];
+
+const Logger = createLogger({
+  predicate: (getState, action) => !blacklist.includes(action.type)
+});
+
+module.exports = Logger;