feat(boilerplate): Support react-native 0.61.4 (#298 by @iMokhles)

Author: iMokhles

.circleci/config.yml

@@ -6,7 +6,7 @@
 defaults: &defaults
   docker:
     # Choose the version of Node you want here
-    - image: circleci/node:10.11
+    - image: circleci/node:13.5
   working_directory: ~/repo
 
 version: 2
@@ -41,10 +41,6 @@ jobs:
             - v1-dependencies-{{ checksum "package.json" }}
             # fallback to using the latest cache if no exact match is found
             - v1-dependencies-
-      - run:
-          name: Install React Native CLI and Ignite CLI
-          command: |
-            sudo npm i -g ignite-cli@next react-native-cli
       - run:
           name: Run tests
           command: yarn ci:test # this command will be added to/found in your package.json scripts

boilerplate.js

@@ -134,7 +134,7 @@ async function install(context) {
   // react native link -- must use spawn & stdio: ignore or it hangs!! :(
   spinner.text = `▸ linking native libraries`
   spinner.start()
-  await system.spawn('react-native link', { stdio: 'ignore' })
+  await system.spawn('npx react-native link', { stdio: 'ignore' })
   spinner.stop()
 
   // pass long the debug flag if we're running in that mode
@@ -148,7 +148,7 @@ async function install(context) {
     // Could be directory, npm@version, or just npm name.  Default to passed in values
     const boilerplate = parameters.options.b || parameters.options.boilerplate || 'ignite-andross'
 
-    await system.spawn(`ignite add ${boilerplate} ${debugFlag}`, { stdio: 'inherit' })
+    await system.spawn(`npx ignite-cli add ${boilerplate} ${debugFlag}`, { stdio: 'inherit' })
 
     // now run install of Ignite Plugins
     await ignite.addModule('react-navigation', { version: '3.11.0' })
@@ -176,37 +176,37 @@ async function install(context) {
         '  }'
     })
     if (answers['vector-icons'] === 'react-native-vector-icons') {
-      await system.spawn(`ignite add [email protected] ${debugFlag}`, {
+      await system.spawn(`npx ignite-cli add [email protected] ${debugFlag}`, {
         stdio: 'inherit'
       })
     }
 
     if (answers['i18n'] === 'react-native-i18n') {
-      await system.spawn(`ignite add [email protected] ${debugFlag}`, { stdio: 'inherit' })
+      await system.spawn(`npx ignite-cli add [email protected] ${debugFlag}`, { stdio: 'inherit' })
     }
 
     if (answers['animatable'] === 'react-native-animatable') {
-      await system.spawn(`ignite add [email protected] ${debugFlag}`, {
+      await system.spawn(`npx ignite-cli add [email protected] ${debugFlag}`, {
         stdio: 'inherit'
       })
     }
 
     // dev-screens be installed after vector-icons and animatable so that it can
     // conditionally patch its PluginExamplesScreen
     if (answers['dev-screens'] === 'Yes') {
-      await system.spawn(`ignite add dev-screens@"2.4.5" ${debugFlag}`, {
+      await system.spawn(`npx ignite-cli add dev-screens@"2.4.5" ${debugFlag}`, {
         stdio: 'inherit'
       })
     }
 
     if (answers['redux-persist'] === 'Yes') {
-      await system.spawn(`ignite add [email protected] ${debugFlag}`, {
+      await system.spawn(`npx ignite-cli add [email protected] ${debugFlag}`, {
         stdio: 'inherit'
       })
     }
 
     if (parameters.options.lint !== false) {
-      await system.spawn(`ignite add [email protected] ${debugFlag}`, {
+      await system.spawn(`npx ignite-cli add [email protected] ${debugFlag}`, {
         stdio: 'inherit'
       })
     }
@@ -243,9 +243,9 @@ async function install(context) {
     To get started:
 
       cd ${name}
-      react-native run-ios
-      react-native run-android${androidInfo}
-      ignite --help
+      npx react-native run-ios
+      npx react-native run-android${androidInfo}
+      npx ignite-cli --help
 
     ${gray(
       'Read the walkthrough at https://github.com/infinitered/ignite-andross/blob/master/readme.md#boilerplate-walkthrough'

boilerplate/App/Config/ReactotronConfig.js

@@ -4,19 +4,22 @@ import Reactotron from 'reactotron-react-native'
 import { reactotronRedux as reduxPlugin } from 'reactotron-redux'
 import sagaPlugin from 'reactotron-redux-saga'
 
-if (Config.useReactotron) {
-  // https://github.com/infinitered/reactotron for more options!
-  Reactotron
+const reactotron = Reactotron
     .configure({ name: 'Ignite App' })
     .useReactNative()
     .use(reduxPlugin({ onRestore: Immutable }))
     .use(sagaPlugin())
-    .connect()
+
+if (Config.useReactotron) {
+  // https://github.com/infinitered/reactotron for more options!
+
+  reactotron.connect()
 
   // Let's clear Reactotron on every time we load the app
-  Reactotron.clear()
+  reactotron.clear()
 
   // Totally hacky, but this allows you to not both importing reactotron-react-native
   // on every file.  This is just DEV mode, so no big deal.
-  console.tron = Reactotron
 }
+export default reactotron
+console.tron = reactotron

boilerplate/App/Navigation/AppNavigation.js

@@ -1,4 +1,5 @@
-import { createStackNavigator, createAppContainer } from 'react-navigation'
+import { createAppContainer } from 'react-navigation'
+import { createStackNavigator } from 'react-navigation-stack';
 import LaunchScreen from '../Containers/LaunchScreen'
 
 import styles from './Styles/NavigationStyles'

boilerplate/App/Redux/CreateStore.js

@@ -3,6 +3,7 @@ import Config from '../Config/DebugConfig'
 import createSagaMiddleware from 'redux-saga'
 import ScreenTracking from './ScreenTrackingMiddleware'
 import { appNavigatorMiddleware } from '../Navigation/ReduxNavigation'
+import Reactotron from '../Config/ReactotronConfig'
 
 // creates the store
 export default (rootReducer, rootSaga) => {
@@ -28,7 +29,10 @@ export default (rootReducer, rootSaga) => {
   enhancers.push(applyMiddleware(...middleware))
 
   // if Reactotron is enabled (default for __DEV__), we'll create the store through Reactotron
-  const createAppropriateStore = Config.useReactotron ? console.tron.createStore : createStore
+  const createAppropriateStore = createStore
+  if (Config.useReactotron) {
+    enhancers.push(Reactotron.createEnhancer())
+  }
   const store = createAppropriateStore(rootReducer, compose(...enhancers))
 
   // kick off root saga

boilerplate/README.md

@@ -17,10 +17,10 @@
 1. cd to the repo
 2. Run Build for either OS
   * for iOS
-    * run `react-native run-ios`
+    * run `npx react-native run-ios`
   * for Android
     * Run Genymotion
-    * run `react-native run-android`
+    * run `npx react-native run-android`
 
 ## :no_entry_sign: Standard Compliant
 

boilerplate/package.json.ejs

@@ -2,7 +2,7 @@
   "version": "0.0.1",
   "scripts": {
     "clean": "rm -rf $TMPDIR/react-* && watchman watch-del-all && npm cache clean --force",
-    "clean:android": "cd android/ && ./gradlew clean && cd .. && react-native run-android",
+    "clean:android": "cd android/ && ./gradlew clean && cd .. && npx react-native run-android",
     "newclear": "rm -rf $TMPDIR/react-* && watchman watch-del-all && rm -rf ios/build && rm -rf node_modules/ && npm cache clean --force && npm i",
     "test:watch": "jest --watch",
     "updateSnapshot": "jest --updateSnapshot",
@@ -16,21 +16,28 @@
     "storybook": "storybook start -p 7007"
   },
   "dependencies": {
-    "apisauce": "1.0.3",
-    "format-json": "1.0.3",
-    "identity-obj-proxy": "3.0.0",
-    "lodash": "4.17.15",
-    "prop-types": "15.7.2",
-    "querystringify": "2.1.1",
-    "ramda": "0.26.1",
-    "react-native-config": "0.11.7",
-    "react-navigation-redux-helpers": "3.0.2",
-    "react-native-device-info": "2.1.3",
-    "react-redux": "6.0.1",
-    "redux": "4.0.4",
-    "redux-saga": "1.0.5",
-    "reduxsauce": "1.1.0",
-    "seamless-immutable": "7.1.4"
+    "apisauce": "^1.1.1",
+    "format-json": "^1.0.3",
+    "identity-obj-proxy": "^3.0.0",
+    "lodash": "^4.17.15",
+    "prop-types": "^15.7.2",
+    "querystringify": "^2.1.1",
+    "ramda": "^0.26.1",
+    "ramdasauce": "^2.1.3",
+    "react": "16.9.0",
+    "react-native": "0.61.4",
+    "react-native-config": "^0.12.0",
+    "react-native-device-info": "^5.3.0",
+    "react-native-gesture-handler": "^1.5.0",
+    "react-navigation": "^4.0.10",
+    "react-navigation-redux-helpers": "^4.0.1",
+    "react-navigation-stack": "^1.10.3",
+    "react-navigation-tabs": "^2.5.6",
+    "react-redux": "^7.1.3",
+    "redux": "^4.0.4",
+    "redux-saga": "^1.1.3",
+    "reduxsauce": "^1.1.1",
+    "seamless-immutable": "^7.1.4"
   },
   "devDependencies": {
     "@storybook/addons": "^4.1.11",
@@ -39,18 +46,17 @@
     "@storybook/addon-storyshots": "^4.1.11",
     "@storybook/channels": "^4.1.11",
     "@storybook/react-native": "^4.1.11",
-    "babel-core": "6.26.3",
-    "babel-preset-env": "1.7.0",
-    "babel-preset-react-native": "4.0.1",
-    "enzyme": "3.10.0",
-    "enzyme-adapter-react-16": "1.14.0",
-    "mockery": "2.1.0",
-    "babel-plugin-ignite-ignore-reactotron": "0.3.0",
-    "react-devtools-core": "3.6.3",
-    "react-dom": "16.8.6",
-    "reactotron-react-native": "2.2.0",
-    "reactotron-redux": "2.1.3",
-    "reactotron-redux-saga": "3.0.0"
+    "@babel/core": "^7.7.2",
+    "@babel/runtime": "^7.7.2",
+    "@react-native-community/eslint-config": "^0.0.5",
+    "babel-jest": "^24.9.0",
+    "eslint": "^6.6.0",
+    "jest": "^24.9.0",
+    "metro-react-native-babel-preset": "^0.57.0",
+    "react-test-renderer": "16.9.0",
+    "reactotron-react-native": "^4.0.2",
+    "reactotron-redux": "^3.1.2",
+    "reactotron-redux-saga": "^4.2.2"
   },
   "jest": {
     "testMatch": [

lib/patterns.js

@@ -7,6 +7,6 @@ const constants = {
 module.exports = {
   constants,
 
-  [constants.PATTERN_IMPORTS]: `import { createStackNavigator, createAppContainer } from 'react-navigation'`,
+  [constants.PATTERN_IMPORTS]: `import { createAppContainer } from 'react-navigation'`,
   [constants.PATTERN_ROUTES]: 'const PrimaryNav'
 }

lib/react-native-version.js

@@ -1,7 +1,7 @@
 const { pathOr, is } = require('ramda')
 
 // the default React Native version for this boilerplate
-const REACT_NATIVE_VERSION = '0.59.9'
+const REACT_NATIVE_VERSION = '0.61.4'
 
 // where the version lives under gluegun
 const pathToVersion = ['parameters', 'options', 'react-native-version']
@@ -15,7 +15,7 @@ const getVersionFromContext = pathOr(REACT_NATIVE_VERSION, pathToVersion)
  * Attempts to read it from the command line, and if not there, falls back
  * to the version we want for this boilerplate.  For example:
  *
- *   $ ignite new Custom --react-native-version 0.44.1
+ *   $ npx ignite-cli new Custom --react-native-version 0.61.1
  *
  * @param {*} context - The gluegun context.
  */

package.json

@@ -23,12 +23,11 @@
     "url": "https://github.com/infinitered/ignite-andross"
   },
   "scripts": {
-    "check-ignite": "which ignite # Checking if Ignite CLI is installed globally",
     "lint": "standard",
     "test": "jest",
     "watch": "jest --runInBand --watch",
     "coverage": "jest --runInBand --coverage",
-    "ci:test": "yarn check-ignite && yarn test",
+    "ci:test": "yarn test",
     "ci:publish": "yarn semantic-release",
     "semantic-release": "semantic-release"
   },

readme.md

@@ -21,31 +21,31 @@ Currently includes:
 When you've installed the [Ignite CLI](https://github.com/infinitered/ignite), you can get started with this boilerplate like this:
 
 ```sh
-ignite new MyLatestCreation
+npx ignite-cli new MyLatestCreation
 ```
 
 By default we'll ask you to choose which boilerplate you'd like. If you just want to use this one you can specify it with `--boilerplate` or `-b`:
 
 ```sh
-ignite new MyLatestCreation --boilerplate andross
+npx ignite-cli new MyLatestCreation --boilerplate andross
 ```
 
 You can also change the React Native version; just keep in mind, we may not have tested this just yet.
 
 ```sh
-ignite new MyLatestCreation --react-native-version 0.99.0-rc.2
+npx ignite-cli new MyLatestCreation --react-native-version 0.99.0-rc.2
 ```
 
 By default we'll ask you some questions during install as to which features you'd like.  If you just want them all, you can skip the questions:
 
 ```sh
-ignite new MyLatestCreation --max
+npx ignite-cli new MyLatestCreation --max
 ```
 
 If you want very few of these extras:
 
 ```sh
-ignite new MyLatestCreation --min
+npx ignite-cli new MyLatestCreation --min
 ```
 
 ## Boilerplate walkthrough
@@ -63,9 +63,9 @@ Containers are (mostly) full screens, although they can be sections of screens o
 
 To generate a new Container or Screen you can use the following generator commands:
 
-* `ignite g container New` - Will create a `New.js` and also a `Styles/NewStyle.js`.
-* `ignite g list New` - The same as the `container` command, but it will give you a walkthrough to generate a ListView screen. Allowing you to even pick `FlatList` or not, grid, and some other options.
-* `ignite g screen New` - Will create a `NewScreen.js` and also a `Styles/NewScreenStyle.js`. Important to mention that the `screen` generator will add the `Screen` on the file/class name to make easier to identify.
+* `npx ignite-cli g container New` - Will create a `New.js` and also a `Styles/NewStyle.js`.
+* `npx ignite-cli g list New` - The same as the `container` command, but it will give you a walkthrough to generate a ListView screen. Allowing you to even pick `FlatList` or not, grid, and some other options.
+* `npx ignite-cli g screen New` - Will create a `NewScreen.js` and also a `Styles/NewScreenStyle.js`. Important to mention that the `screen` generator will add the `Screen` on the file/class name to make easier to identify.
 
 Those commands will also add the new container to the navigations file.
 
@@ -83,10 +83,10 @@ React components go here...pretty self-explanatory. We won't go through each in
 
 To generate a new Component you can use the following generator commands:
 
-* `ignite g component New` - Will create a `New.js` and also a `Styles/NewStyle.js`.
-* `ignite g component path/New` - The same as above, but will use a relative path
-* `ignite g component --folder path` - An alternative to `ignite g component path/index`
-* `ignite g component --folder path new ` - An alternative to `ignite g component relativePath/New`
+* `npx ignite-cli g component New` - Will create a `New.js` and also a `Styles/NewStyle.js`.
+* `npx ignite-cli g component path/New` - The same as above, but will use a relative path
+* `npx ignite-cli g component --folder path` - An alternative to `npx ignite-cli g component path/index`
+* `npx ignite-cli g component --folder path new ` - An alternative to `npx ignite-cli g component relativePath/New`
 
 ### Storybook
 
@@ -121,8 +121,8 @@ Contains a preconfigured Redux and Redux-Sagas setup. Review each file carefully
 
 Here again we have generators to help you out. You just have to use one of the following:
 
-* `ignite g redux Amazing` - Will generate and link the redux for `Amazing`.
-* `ignite g saga Amazing` - The same as above, but for the Sagas
+* `npx ignite-cli g redux Amazing` - Will generate and link the redux for `Amazing`.
+* `npx ignite-cli g saga Amazing` - The same as above, but for the Sagas
 
 You can read more about Redux and Redux Sagas in these blog posts:
 
@@ -155,7 +155,7 @@ Helpers for transforming data between API and your application and vice versa. A
 
 This folder (located as a sibling to `App`) contains sample Jest snapshot and unit tests for your application.
 
-If you would like to have the `ignite generate` command include the generation of tests when available, add
+If you would like to have the `npx ignite-cli generate` command include the generation of tests when available, add
 `"tests": "jest"` or `"tests": "ava"` to `./ignite/ignite.json`, depending on the test runner you are using.
 
 **Previous Boilerplates**

templates/saga.ejs

@@ -1,6 +1,6 @@
 /* ***********************************************************
 * A short word on how to use this automagically generated file.
-* We're often asked in the ignite gitter channel how to connect
+* We're often asked in the Infinite Red Slack channel how to connect
 * to a to a third party api, so we thought we'd demonstrate - but
 * you should know you can use sagas for other flow control too.
 *