From 1e875a2217b129f5465fc344a32eaaf6ef54b414 Mon Sep 17 00:00:00 2001 From: Benjamin Reid Date: Wed, 14 Mar 2018 11:43:20 +0000 Subject: [PATCH 1/2] Removes the RNRF code --- generators/base/index.js | 101 ++++++------------ generators/base/templates/App/App.js | 7 +- .../templates/App/App.react-navigation.js | 42 -------- generators/base/templates/App/Router.js | 64 ++++++++--- .../templates/App/Router.react-navigation.js | 95 ---------------- generators/base/templates/App/Scenes/Main.js | 15 --- .../templates/App/Store/Middleware/Logger.js | 9 +- .../Middleware/Logger.react-navigation.js | 18 ---- .../templates/App/Store/Middleware/index.js | 3 +- .../Middleware/index.react-navigation.js | 16 --- 10 files changed, 91 insertions(+), 279 deletions(-) delete mode 100644 generators/base/templates/App/App.react-navigation.js delete mode 100644 generators/base/templates/App/Router.react-navigation.js delete mode 100644 generators/base/templates/App/Store/Middleware/Logger.react-navigation.js delete mode 100644 generators/base/templates/App/Store/Middleware/index.react-navigation.js diff --git a/generators/base/index.js b/generators/base/index.js index 4e3df14..bb08d14 100644 --- a/generators/base/index.js +++ b/generators/base/index.js @@ -24,17 +24,9 @@ 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; this.flowVerison = answers.flowVerison; }); } @@ -55,34 +47,18 @@ module.exports = class extends Generator { this.fs.delete('App.js'); // copy root app file that the entry points use - 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 } - ); - } + this.fs.copyTpl( + this.templatePath('App/App.js'), + this.destinationPath(`App/${this.name}.js`), + { name: this.name } + ); // copy router - 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 } - ); - } + this.fs.copyTpl( + this.templatePath('App/Router.js'), + this.destinationPath('App/Router.js'), + { name: this.name } + ); // copy scenes this.fs.copyTpl( @@ -90,7 +66,6 @@ module.exports = class extends Generator { this.destinationPath('App/Scenes'), { name: this.name, - router: this.router, } ); @@ -114,38 +89,24 @@ module.exports = class extends Generator { this.destinationPath('App/Store/Middleware/Buffer.js'), { name: this.name } ); - if (this.router === 'react-navigation') { - this.fs.copyTpl( - this.templatePath('App/Store/Middleware/index.react-navigation.js'), - this.destinationPath('App/Store/Middleware/index.js'), - { name: this.name } - ); - } else { - 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/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 } - ); - } + + 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( @@ -159,17 +120,15 @@ module.exports = class extends Generator { this.destinationPath('App/Reducers/index.js'), { name: this.name, - reducers: (this.router === 'react-navigation') ? ['App', 'Nav'] : ['App'], + reducers: ['App', 'Nav'], } ); - if (this.router === 'react-navigation') { - this.fs.copyTpl( - this.templatePath('App/Reducers/Nav.js'), - this.destinationPath('App/Reducers/Nav.js'), - { name: this.name } - ); - } + this.fs.copyTpl( + this.templatePath('App/Reducers/Nav.js'), + this.destinationPath('App/Reducers/Nav.js'), + { name: this.name } + ); // copy actions this.fs.copyTpl( @@ -280,8 +239,8 @@ module.exports = class extends Generator { this.yarnInstall([ 'axios', 'react-native-dotenv', - this.router, - ...(this.router === 'react-navigation' ? ['react-navigation-redux-helpers'] : []), + 'react-navigation', + 'react-navigation-redux-helpers', 'react-redux', 'redux', 'redux-action-buffer', diff --git a/generators/base/templates/App/App.js b/generators/base/templates/App/App.js index 81fc0c9..da781cc 100644 --- a/generators/base/templates/App/App.js +++ b/generators/base/templates/App/App.js @@ -1,9 +1,8 @@ // @flow import * as React from 'react'; -import { Actions } from 'react-native-router-flux'; import { Provider } from 'react-redux'; -import { PersistGate } from 'redux-persist/src/integration/react'; -import Router, { Routes, RouterWithRedux } from '<%= name %>/App/Router'; +import { PersistGate } from 'redux-persist/lib/integration/react' +import Router, { RouterWithRedux } from '<%= name %>/App/Router'; import { configureStore } from '<%= name %>/App/Store'; import { runSagaMiddleware } from '<%= name %>/App/Store/Middleware/Saga'; import App from '<%= name %>/App/Components/App'; @@ -34,7 +33,7 @@ export default class <%= name %> extends React.Component<{}> { onBeforeLift={this._onBeforeLift} persistor={persistor} > - + diff --git a/generators/base/templates/App/App.react-navigation.js b/generators/base/templates/App/App.react-navigation.js deleted file mode 100644 index da781cc..0000000 --- a/generators/base/templates/App/App.react-navigation.js +++ /dev/null @@ -1,42 +0,0 @@ -// @flow -import * as React from 'react'; -import { Provider } from 'react-redux'; -import { PersistGate } from 'redux-persist/lib/integration/react' -import Router, { RouterWithRedux } from '<%= name %>/App/Router'; -import { configureStore } from '<%= name %>/App/Store'; -import { runSagaMiddleware } from '<%= name %>/App/Store/Middleware/Saga'; -import App from '<%= name %>/App/Components/App'; - -const { persistor, store } = configureStore() - -export default class <%= name %> extends React.Component<{}> { - - componentDidMount() { - Router.addDeepLinkListener(); - } - - componentWillUnmount() { - Router.removeDeepLinkListener(); - } - - _onBeforeLift = () => { - runSagaMiddleware(); - Router.root(store); - } - - render(): React.Node { - return ( - - - - - - - - ); - } -} diff --git a/generators/base/templates/App/Router.js b/generators/base/templates/App/Router.js index ef9983b..4b08f44 100644 --- a/generators/base/templates/App/Router.js +++ b/generators/base/templates/App/Router.js @@ -1,23 +1,50 @@ // @flow import React from 'react'; import { Linking } from 'react-native'; -import { Scene, Actions, Router, ActionConst } from 'react-native-router-flux'; import { connect } from 'react-redux'; +import type { Store as ReduxStore } from 'redux'; +import { + StackNavigator, + NavigationActions, + addNavigationHelpers +} from 'react-navigation'; +import { + createReactNavigationReduxMiddleware, + createReduxBoundAddListener +} from 'react-navigation-redux-helpers'; import Scenes from '<%= name %>/App/Scenes'; -const Routes = Actions.create( - - - - - - - - - +const key = "root"; + +// Note: createReactNavigationReduxMiddleware must be run before createReduxBoundAddListener +export const RouterMiddleware = createReactNavigationReduxMiddleware( + key, + state => state.nav, ); -const RouterWithRedux = connect()(Router); +const addListener = createReduxBoundAddListener(key); + +const RootNavigator = StackNavigator({ + Launch: { + screen: Scenes.Launch, + navigationOptions: { + header: null + } + }, + Main: { + screen: Scenes.Main, + }, + Styleguide: { + screen: Scenes.Styleguide, + }, +}); + +const Router = ({ dispatch, nav: state }) => { + const navigation = addNavigationHelpers({ dispatch, state, addListener }); + return +}; + +const RouterWithRedux = connect(({ nav }) => ({ nav }))(Router); const handleURL = ({ url }: { url: string }) => { console.log('handleURL', url) @@ -43,10 +70,17 @@ const getInitialURL = async () => { }); }; -const root = async () => { +const root = async (store: ReduxStore) => { const url : string|null = await getInitialURL(); - Actions.main({ type: ActionConst.RESET }); + store.dispatch( + NavigationActions.reset({ + index: 0, + actions: [ + NavigationActions.navigate({ routeName: 'Main' }), + ], + }) + ); if (url) { handleURL({ url }); @@ -58,4 +92,4 @@ export default { removeDeepLinkListener, root, }; -export { Routes, RouterWithRedux }; +export { RootNavigator, RouterWithRedux }; diff --git a/generators/base/templates/App/Router.react-navigation.js b/generators/base/templates/App/Router.react-navigation.js deleted file mode 100644 index 4b08f44..0000000 --- a/generators/base/templates/App/Router.react-navigation.js +++ /dev/null @@ -1,95 +0,0 @@ -// @flow -import React from 'react'; -import { Linking } from 'react-native'; -import { connect } from 'react-redux'; -import type { Store as ReduxStore } from 'redux'; -import { - StackNavigator, - NavigationActions, - addNavigationHelpers -} from 'react-navigation'; -import { - createReactNavigationReduxMiddleware, - createReduxBoundAddListener -} from 'react-navigation-redux-helpers'; -import Scenes from '<%= name %>/App/Scenes'; - -const key = "root"; - -// Note: createReactNavigationReduxMiddleware must be run before createReduxBoundAddListener -export const RouterMiddleware = createReactNavigationReduxMiddleware( - key, - state => state.nav, -); - -const addListener = createReduxBoundAddListener(key); - -const RootNavigator = StackNavigator({ - Launch: { - screen: Scenes.Launch, - navigationOptions: { - header: null - } - }, - Main: { - screen: Scenes.Main, - }, - Styleguide: { - screen: Scenes.Styleguide, - }, -}); - -const Router = ({ dispatch, nav: state }) => { - const navigation = addNavigationHelpers({ dispatch, state, addListener }); - return -}; - -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 (store: ReduxStore) => { - const url : string|null = await getInitialURL(); - - store.dispatch( - NavigationActions.reset({ - index: 0, - actions: [ - NavigationActions.navigate({ routeName: 'Main' }), - ], - }) - ); - - if (url) { - handleURL({ url }); - } -}; - -export default { - addDeepLinkListener, - removeDeepLinkListener, - root, -}; -export { RootNavigator, RouterWithRedux }; diff --git a/generators/base/templates/App/Scenes/Main.js b/generators/base/templates/App/Scenes/Main.js index dea7b1d..0798e26 100644 --- a/generators/base/templates/App/Scenes/Main.js +++ b/generators/base/templates/App/Scenes/Main.js @@ -1,24 +1,10 @@ // @flow import * as React from 'react'; import { Text } from 'react-native'; -<% if (router === 'react-native-router-flux@3.41.0') { -%> -import { Actions } from 'react-native-router-flux'; -<% } else { -%> import { type NavigationState } from 'react-navigation'; -<% } -%> 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.Node { - return ( - - Main - - - ); -} -<% } else { -%> type Props = { navigation: NavigationState, }; @@ -33,6 +19,5 @@ function Main({ navigation }: Props): React.Node { ); } -<% } -%> export default Main; diff --git a/generators/base/templates/App/Store/Middleware/Logger.js b/generators/base/templates/App/Store/Middleware/Logger.js index b2c63b7..7707dee 100644 --- a/generators/base/templates/App/Store/Middleware/Logger.js +++ b/generators/base/templates/App/Store/Middleware/Logger.js @@ -1,9 +1,14 @@ // @flow import { createLogger } from 'redux-logger'; -import { ActionConst } from 'react-native-router-flux'; +import { NavigationActions } from 'react-navigation'; const blacklist = [ - ...Object.keys(ActionConst).map(key => ActionConst[key]), + NavigationActions.BACK, + NavigationActions.INIT, + NavigationActions.NAVIGATE, + NavigationActions.RESET, + NavigationActions.SET_PARAMS, + NavigationActions.URI, ]; const Logger = createLogger({ diff --git a/generators/base/templates/App/Store/Middleware/Logger.react-navigation.js b/generators/base/templates/App/Store/Middleware/Logger.react-navigation.js deleted file mode 100644 index 7707dee..0000000 --- a/generators/base/templates/App/Store/Middleware/Logger.react-navigation.js +++ /dev/null @@ -1,18 +0,0 @@ -// @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; diff --git a/generators/base/templates/App/Store/Middleware/index.js b/generators/base/templates/App/Store/Middleware/index.js index 8a80ced..b0e4c9f 100644 --- a/generators/base/templates/App/Store/Middleware/index.js +++ b/generators/base/templates/App/Store/Middleware/index.js @@ -2,8 +2,9 @@ import { applyMiddleware } from 'redux'; import Buffer from '<%= name %>/App/Store/Middleware/Buffer'; import Saga from '<%= name %>/App/Store/Middleware/Saga'; +import { RouterMiddleware } from '<%= name %>/App/Router'; -const middlewares = [Buffer, Saga]; +const middlewares = [Buffer, Saga, RouterMiddleware]; if (process.env['NODE_ENV'] = 'development') { const Logger = require('./Logger.js'); diff --git a/generators/base/templates/App/Store/Middleware/index.react-navigation.js b/generators/base/templates/App/Store/Middleware/index.react-navigation.js deleted file mode 100644 index b0e4c9f..0000000 --- a/generators/base/templates/App/Store/Middleware/index.react-navigation.js +++ /dev/null @@ -1,16 +0,0 @@ -// @flow -import { applyMiddleware } from 'redux'; -import Buffer from '<%= name %>/App/Store/Middleware/Buffer'; -import Saga from '<%= name %>/App/Store/Middleware/Saga'; -import { RouterMiddleware } from '<%= name %>/App/Router'; - -const middlewares = [Buffer, Saga, RouterMiddleware]; - -if (process.env['NODE_ENV'] = 'development') { - const Logger = require('./Logger.js'); - middlewares.push(Logger); -} - -const middleware = applyMiddleware(...middlewares); - -export default middleware; From bba7b63e10d41fd6f0d41d425518fd92ea9d0837 Mon Sep 17 00:00:00 2001 From: Benjamin Reid Date: Wed, 14 Mar 2018 11:52:07 +0000 Subject: [PATCH 2/2] Add missing const --- generators/base/templates/App/Store/Middleware/Logger.js | 1 + 1 file changed, 1 insertion(+) diff --git a/generators/base/templates/App/Store/Middleware/Logger.js b/generators/base/templates/App/Store/Middleware/Logger.js index 7707dee..5050e7c 100644 --- a/generators/base/templates/App/Store/Middleware/Logger.js +++ b/generators/base/templates/App/Store/Middleware/Logger.js @@ -9,6 +9,7 @@ const blacklist = [ NavigationActions.RESET, NavigationActions.SET_PARAMS, NavigationActions.URI, + NavigationActions.COMPLETE_TRANSITION, ]; const Logger = createLogger({