feat(boilerplate): Updates to RN 0.63 and React Navigation 4.0.0 (#309 …

…by @SandeshVakale)

.circleci/config.yml

@@ -6,7 +6,7 @@
 defaults: &defaults
   docker:
     # Choose the version of Node you want here
-    - image: circleci/node:13.5
+    - image: circleci/node:12.16
   working_directory: ~/repo
 
 version: 2

boilerplate.js

@@ -132,10 +132,10 @@ async function install(context) {
   spinner.stop()
 
   // react native link -- must use spawn & stdio: ignore or it hangs!! :(
-  spinner.text = `▸ linking native libraries`
-  spinner.start()
-  await system.spawn('npx react-native link', { stdio: 'ignore' })
-  spinner.stop()
+  // spinner.text = `▸ linking native libraries`
+  // spinner.start()
+  // await system.spawn('npx react-native link', { stdio: 'ignore' })
+  // spinner.stop()
 
   // pass long the debug flag if we're running in that mode
   const debugFlag = parameters.options.debug ? '--debug' : ''
@@ -151,8 +151,8 @@ async function install(context) {
     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' })
-    await ignite.addModule('react-native-gesture-handler', { version: '1.3.0', link: true })
+    await ignite.addModule('react-navigation', { version: '4.0.0' })
+    await ignite.addModule('react-native-gesture-handler', { version: '1.6.1', link: true })
 
     ignite.patchInFile(`${process.cwd()}/android/app/src/main/java/com/${name.toLowerCase()}/MainActivity.java`, {
       after: 'import com.facebook.react.ReactActivity;',
@@ -200,7 +200,7 @@ async function install(context) {
     }
 
     if (answers['redux-persist'] === 'Yes') {
-      await system.spawn(`npx ignite-cli add redux-persist@1.1.2 ${debugFlag}`, {
+      await system.spawn(`npx ignite-cli add redux-persist@2.0.0 ${debugFlag}`, {
         stdio: 'inherit'
       })
     }

boilerplate/package.json.ejs

@@ -16,20 +16,27 @@
     "storybook": "storybook start -p 7007"
   },
   "dependencies": {
+    "@react-native-community/async-storage": "^1.11.0",
+    "@react-native-community/masked-view": "^0.1.10",
     "apisauce": "^1.1.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
     "format-json": "^1.0.3",
     "identity-obj-proxy": "^3.0.0",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.17",
     "prop-types": "^15.7.2",
     "querystringify": "^2.1.1",
-    "ramda": "^0.26.1",
+    "ramda": "^0.27.0",
     "ramdasauce": "^2.1.3",
-    "react": "16.9.0",
-    "react-native": "0.61.4",
+    "react": "16.13.1",
+    "react-native": "0.63.0",
     "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-native-gesture-handler": "1.6.1",
+    "react-native-safe-area-context": "^3.0.7",
+    "react-native-safe-area-view": "^1.1.1",
+    "react-native-screens": "^2.9.0",
+    "react-navigation": "4.0.0",
     "react-navigation-redux-helpers": "^4.0.1",
     "react-navigation-stack": "^1.10.3",
     "react-navigation-tabs": "^2.5.6",
@@ -40,23 +47,27 @@
     "seamless-immutable": "^7.1.4"
   },
   "devDependencies": {
-    "@storybook/addons": "^4.1.11",
+    "@babel/core": "^7.8.4",
+    "@babel/runtime": "^7.8.4",
+    "@react-native-community/eslint-config": "^1.1.0",
     "@storybook/addon-actions": "5.0.11",
     "@storybook/addon-links": "5.0.11",
     "@storybook/addon-storyshots": "^4.1.11",
+    "@storybook/addons": "^4.1.11",
     "@storybook/channels": "^4.1.11",
     "@storybook/react-native": "^4.1.11",
-    "@babel/core": "^7.7.2",
-    "@babel/runtime": "^7.7.2",
-    "@react-native-community/eslint-config": "^0.0.5",
-    "babel-jest": "^24.9.0",
+    "babel-eslint": "7.1.1",
+    "babel-jest": "^25.1.0",
+    "babel-plugin-ignite-ignore-reactotron": "^0.3.0",
     "eslint": "^6.6.0",
-    "jest": "^24.9.0",
-    "metro-react-native-babel-preset": "^0.57.0",
-    "react-test-renderer": "16.9.0",
+    "jest": "^25.1.0",
+    "metro-react-native-babel-preset": "^0.59.0",
+    "react-test-renderer": "16.13.1",
     "reactotron-react-native": "^4.0.2",
     "reactotron-redux": "^3.1.2",
-    "reactotron-redux-saga": "^4.2.2"
+    "reactotron-redux-saga": "^4.2.2",
+    "snazzy": "^8.0.0",
+    "standard": "10.0.2"
   },
   "jest": {
     "testMatch": [

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.61.4'
+const REACT_NATIVE_VERSION = '0.63.0'
 
 // where the version lives under gluegun
 const pathToVersion = ['parameters', 'options', 'react-native-version']

readme.md

@@ -10,8 +10,8 @@ NOTE: This repo has been renamed from ignite-ir-boilerplate-andross to ignite-an
 
 Currently includes:
 
-* React Native 0.59.9
-* React Navigation 3.11.0
+* React Native 0.63
+* React Navigation 4.0.0
 * Redux
 * Redux Sagas
 * And more!

templates/component.ejs

@@ -1,25 +1,25 @@
-import React, { Component } from 'react'
+import React from 'react'
 // import PropTypes from 'prop-types';
 import { View, Text } from 'react-native'
 import styles from './Styles/<%= props.name %>Style'
 
-export default class <%= props.name %> extends Component {
-  // // Prop type warnings
-  // static propTypes = {
-  //   someProperty: PropTypes.object,
-  //   someSetting: PropTypes.bool.isRequired,
-  // }
-  //
-  // // Defaults for props
-  // static defaultProps = {
-  //   someSetting: false
-  // }
-
-  render () {
-    return (
-      <View style={styles.container}>
-        <Text><%= props.name %> Component</Text>
-      </View>
-    )
-  }
+const <%= props.name %> = () => {
+  return (
+    <View style={styles.container}>
+      <Text><%= props.name %> Component</Text>
+    </View>
+  )
 }
+
+// // Prop type warnings
+// <%= props.name %>.propTypes = {
+//   someProperty: PropTypes.object,
+//   someSetting: PropTypes.bool.isRequired,
+// }
+//
+// // Defaults for props
+// <%= props.name %>.defaultProps = {
+//   someSetting: false
+// }
+
+export default <%= props.name %>

templates/container.ejs

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { ScrollView, Text } from 'react-native'
 import { connect } from 'react-redux'
 // Add Actions - replace 'Your' with whatever your reducer is called :)
@@ -7,19 +7,12 @@ import { connect } from 'react-redux'
 // Styles
 import styles from './Styles/<%= props.name %>Style'
 
-class <%= props.name %> extends Component {
-  // constructor (props) {
-  //   super(props)
-  //   this.state = {}
-  // }
-
-  render () {
-    return (
-      <ScrollView style={styles.container}>
-        <Text><%= props.name %> Container</Text>
-      </ScrollView>
-    )
-  }
+const <%= props.name %> = () => {
+  return (
+    <ScrollView style={styles.container}>
+      <Text><%= props.name %> Container</Text>
+    </ScrollView>
+  )
 }
 
 const mapStateToProps = (state) => {