feat(deps): Upgrade to react-native 0.60.4 and bump most other depend…

…encies (#227 by @bryanstearns)

[skip ci]

.circleci/config.yml

@@ -6,17 +6,17 @@
 defaults: &defaults
   docker:
     # Choose the version of Node you want here
-    - image: circleci/node:11.9.0
+    - image: circleci/node:11.10.1
   working_directory: ~/repo
 
 mac: &mac
   macos:
-    xcode: '10.1.0'
+    xcode: "10.1.0"
   working_directory: ~/repo
 
 version: 2
 jobs:
-  setup:
+  tests:
     <<: *defaults
     steps:
       - checkout
@@ -34,25 +34,15 @@ jobs:
           paths:
             - node_modules
           key: v1-dependencies-bowser-{{ checksum "package.json" }}
-
-  tests:
-    <<: *defaults
-    steps:
-      - checkout
-      - restore_cache:
-          name: Restore node modules
-          keys:
-            - v1-dependencies-bowser-{{ checksum "package.json" }}
-            # fallback to using the latest cache if no exact match is found
-            - v1-dependencies-bowser-
-      - run:
-          name: Install dependencies
-          command: |
-            yarn install
       - run:
           name: Install React Native CLI and Ignite CLI
           command: |
             sudo npm i -g ignite-cli@latest react-native-cli
+      - run:
+          # We don't want to install Cocoapods on ubuntu where we run the tests.
+          name: Set up dummy `pod` command
+          command: |
+            sudo ln /bin/true /usr/local/bin/pod
       - run:
           name: Run tests
           command: yarn ci:test # this command will be added to/found in your package.json scripts
@@ -80,6 +70,16 @@ jobs:
           name: Install React Native CLI and Ignite CLI
           command: |
             sudo npm i -g ignite-cli react-native-cli detox-cli
+      - run:
+          name: Install Ruby and Cocoapods
+          command: |
+            sudo apt-get update &&
+            sudo apt-get install ruby-full &&
+            sudo gem install cocoapods --no-ri --no-rdoc
+      - run:
+          name: Install CocoaPods Specs
+          command: |
+            curl https://cocoapods-specs.circleci.com/fetch-cocoapods-repo-from-s3.sh | bash -s cf
       - run:
           name: Change Permissions
           command: sudo chown -R $(whoami) /Users/distiller/.config/
@@ -125,10 +125,7 @@ workflows:
   version: 2
   test_and_release:
     jobs:
-      - setup
-      - tests:
-          requires:
-            - setup
+      - tests
       # - detox # disabled until we can figure out detox CircleCI problems
       - publish:
           requires:

boilerplate.js

@@ -1,6 +1,9 @@
 const { merge, pipe, assoc, omit, __ } = require("ramda")
 const { getReactNativeVersion } = require("./lib/react-native-version")
 
+// We need this value here, as well as in our package.json.ejs template
+const REACT_NATIVE_GESTURE_HANDLER_VERSION = "^1.3.0"
+
 /**
  * Is Android installed?
  *
@@ -46,19 +49,6 @@ async function install(context) {
     .spin(`using the ${red("Infinite Red")} boilerplate v3 (code name 'Bowser')`)
     .succeed()
 
-  // attempt to install React Native or die trying
-  let rnInstall
-  rnInstall = await reactNative.install({
-    name,
-    version: getReactNativeVersion(context),
-    useNpm: !ignite.useYarn,
-  })
-  if (rnInstall.exitCode > 0) process.exit(rnInstall.exitCode)
-
-  // remove the __tests__ directory, App.js, and unnecessary config files that come with React Native
-  const filesToRemove = ["__tests__", "App.js", ".babelrc", ".flowconfig", ".buckconfig"]
-  filesToRemove.map(filesystem.remove)
-
   let includeDetox = false
   if (isMac) {
     const askAboutDetox = parameters.options.detox === undefined
@@ -69,21 +59,41 @@ async function install(context) {
     if (includeDetox) {
       // prettier-ignore
       print.info(`
-        You'll love Detox for testing your app! There are some additional requirements to
-        install, so make sure to check out ${cyan('e2e/README.md')} in your generated app!
-      `)
+          You'll love Detox for testing your app! There are some additional requirements to
+          install, so make sure to check out ${cyan('e2e/README.md')} in your generated app!
+        `)
     }
   } else {
     if (parameters.options.detox === true) {
       // prettier-ignore
       if (isWindows) {
-        print.info("Skipping Detox because it is only supported on macOS, but you're running Windows")
-      } else {
-        print.info("Skipping Detox because it is only supported on macOS")
-      }
+          print.info("Skipping Detox because it is only supported on macOS, but you're running Windows")
+        } else {
+          print.info("Skipping Detox because it is only supported on macOS")
+        }
     }
   }
 
+  // attempt to install React Native or die trying
+  let rnInstall
+  rnInstall = await reactNative.install({
+    name,
+    version: getReactNativeVersion(context),
+    useNpm: !ignite.useYarn,
+  })
+  if (rnInstall.exitCode > 0) process.exit(rnInstall.exitCode)
+
+  // remove the __tests__ directory, App.js, and unnecessary config files that come with React Native
+  const filesToRemove = [
+    ".babelrc",
+    ".buckconfig",
+    ".eslintrc.js",
+    ".flowconfig",
+    "App.js",
+    "__tests__",
+  ]
+  filesToRemove.map(filesystem.remove)
+
   // copy our App, Tests & storybook directories
   spinner.text = "▸ copying files"
   spinner.start()
@@ -119,6 +129,7 @@ async function install(context) {
     { template: ".prettierignore", target: ".prettierignore" },
     { template: ".solidarity", target: ".solidarity" },
     { template: ".babelrc", target: ".babelrc" },
+    { template: "react-native.config.js", target: "react-native.config.js" },
     { template: "tsconfig.json", target: "tsconfig.json" },
     { template: "app/app.tsx.ejs", target: "app/app.tsx" },
     {
@@ -134,6 +145,7 @@ async function install(context) {
     name,
     igniteVersion: ignite.version,
     reactNativeVersion: rnInstall.version,
+    reactNativeGestureHandlerVersion: REACT_NATIVE_GESTURE_HANDLER_VERSION,
     vectorIcons: false,
     animatable: false,
     i18n: false,
@@ -144,6 +156,18 @@ async function install(context) {
     directory: `${ignite.ignitePluginPath()}/boilerplate`,
   })
 
+  /**
+   * Because of https://github.com/react-native-community/cli/issues/462,
+   * we can't detox-test the release configuration. Turn on dead-code stripping
+   * to fix this.
+   */
+  if (includeDetox) {
+    await ignite.patchInFile(`ios/${name}.xcodeproj/xcshareddata/xcschemes/${name}.xcscheme`, {
+      replace: 'buildForRunning = "YES"\n            buildForProfiling = "NO"',
+      insert: 'buildForRunning = "NO"\n            buildForProfiling = "NO"',
+    })
+  }
+
   /**
    * Append to files
    */
@@ -170,7 +194,10 @@ async function install(context) {
       assoc("dependencies", merge(currentPackage.dependencies, newPackageJson.dependencies)),
       assoc(
         "devDependencies",
-        merge(currentPackage.devDependencies, newPackageJson.devDependencies),
+        merge(
+          omit(["@react-native-community/eslint-config"], currentPackage.devDependencies),
+          newPackageJson.devDependencies,
+        ),
       ),
       assoc("scripts", merge(currentPackage.scripts, newPackageJson.scripts)),
       merge(__, omit(["dependencies", "devDependencies", "scripts"], newPackageJson)),
@@ -192,13 +219,9 @@ async function install(context) {
 
     await system.spawn(`ignite add ${boilerplate} ${debugFlag}`, { stdio: "inherit" })
 
-    // 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" })
-    spinner.stop()
-
-    await ignite.addModule("react-native-gesture-handler", { version: "1.1.0", link: true })
+    await ignite.addModule("react-native-gesture-handler", {
+      version: REACT_NATIVE_GESTURE_HANDLER_VERSION,
+    })
 
     ignite.patchInFile(
       `${process.cwd()}/android/app/src/main/java/com/${name.toLowerCase()}/MainActivity.java`,
@@ -227,6 +250,11 @@ async function install(context) {
           "  }",
       },
     )
+
+    ignite.patchInFile(`${process.cwd()}/package.json`, {
+      replace: `"postinstall": "solidarity",`,
+      insert: `"postinstall": "solidarity && jetify && (cd ios; pod install)",`,
+    })
   } catch (e) {
     ignite.log(e)
     print.error(`
@@ -235,14 +263,14 @@ async function install(context) {
     throw e
   }
 
-  // re-run yarn
+  // re-run yarn; will also install pods, because of our postInstall script.
   const installDeps = ignite.useYarn ? "yarn" : "npm install"
   await system.run(installDeps)
   spinner.succeed(`Installed dependencies`)
 
-  // re-run react-native link
+  // run react-native link to link assets
   await system.spawn("react-native link", { stdio: "ignore" })
-  spinner.succeed(`Linked dependencies`)
+  spinner.succeed(`Linked assets`)
 
   // for Windows, fix the settings.gradle file. Ref: https://github.com/oblador/react-native-vector-icons/issues/938#issuecomment-463296401
   // for ease of use, just replace any backslashes with forward slashes

boilerplate/.gitignore.ejs

@@ -45,7 +45,7 @@ buck-out/
 .vscode
 
 # Cocoapods
-ios/Pods
+/ios/Pods
 
 
 # Bundle artifact

boilerplate/app/app.tsx.ejs

@@ -4,7 +4,7 @@
 
 import "./i18n"
 import * as React from "react"
-import { AppRegistry } from "react-native"
+import { AppRegistry, YellowBox } from "react-native"
 import { StatefulNavigator } from "./navigation"
 import { StorybookUIRoot } from "../storybook"
 import { RootStore, setupRootStore } from "./models/root-store"
@@ -13,6 +13,28 @@ import { BackButtonHandler } from "./navigation/back-button-handler"
 import { contains } from "ramda"
 import { DEFAULT_NAVIGATION_CONFIG } from "./navigation/navigation-config"
 
+/**
+ * Ignore some yellowbox warnings. Some of these are for deprecated functions
+ * that we haven't gotten around to replacing yet.
+ */
+ YellowBox.ignoreWarnings([
+  "componentWillMount is deprecated",
+  "componentWillReceiveProps is deprecated",
+])
+
+/**
+ * Storybook still wants to use ReactNative's AsyncStorage instead of the
+ * react-native-community package; this causes a YellowBox warning. This hack
+ * points RN's AsyncStorage at the community one, fixing the warning. Here's the
+ * Storybook issue about this: https://github.com/storybookjs/storybook/issues/6078
+ */
+const ReactNative = require('react-native')
+Object.defineProperty(ReactNative, 'AsyncStorage', {
+  get(): any {
+    return require('@react-native-community/async-storage').default;
+  },
+})
+
 interface AppState {
   rootStore?: RootStore
 }

boilerplate/app/components/button/button.story.tsx

@@ -4,6 +4,8 @@ import { storiesOf } from "@storybook/react-native"
 import { StoryScreen, Story, UseCase } from "../../../storybook/views"
 import { Button } from "./"
 
+declare var module
+
 const buttonStyleArray: ViewStyle[] = [{ paddingVertical: 100 }, { borderRadius: 0 }]
 
 const buttonTextStyleArray: TextStyle[] = [{ fontSize: 20 }, { color: "#a511dc" }]

boilerplate/app/components/checkbox/checkbox.story.tsx

@@ -8,6 +8,8 @@ import { StoryScreen, Story, UseCase } from "../../../storybook/views"
 import { Checkbox } from "./"
 import { Toggle } from "react-powerplug"
 
+declare var module
+
 const arrayStyle: ViewStyle[] = [{ paddingVertical: 40 }, { alignSelf: "flex-end" }]
 const arrayOutlineStyle: ViewStyle[] = [{ borderColor: "#b443c9" }, { borderWidth: 25 }]
 const arrayFillStyle: ViewStyle[] = [{ backgroundColor: "#55e0ff" }]

boilerplate/app/components/form-row/form-row.story.tsx

@@ -9,6 +9,8 @@ import { Text } from "../text"
 import { color } from "../../theme/color"
 import { ViewStyle } from "react-native"
 
+declare var module
+
 const TEXT_STYLE_OVERRIDE = {
   color: color.storybookTextColor,
 }

boilerplate/app/components/header/header.story.tsx

@@ -5,6 +5,8 @@ import { StoryScreen, Story, UseCase } from "../../../storybook/views"
 import { Header } from "./header"
 import { color } from "../../theme"
 
+declare var module
+
 const VIEWSTYLE = {
   flex: 1,
   backgroundColor: color.storybookDarkBg,

boilerplate/app/components/icon/icon.story.tsx

@@ -3,6 +3,8 @@ import { storiesOf } from "@storybook/react-native"
 import { StoryScreen, Story, UseCase } from "../../../storybook/views"
 import { Icon } from "./icon"
 
+declare var module
+
 storiesOf("Icon", module)
   .addDecorator(fn => <StoryScreen>{fn()}</StoryScreen>)
   .add("Names", () => (

boilerplate/app/components/switch/switch.story.tsx

@@ -8,6 +8,8 @@ import { StoryScreen, Story, UseCase } from "../../../storybook/views"
 import { Toggle } from "react-powerplug"
 import { Switch } from "."
 
+declare var module
+
 const styleArray: ViewStyle[] = [{ borderColor: "#686868" }]
 
 const trackOffStyle: ViewStyle[] = [

boilerplate/app/components/switch/switch.tsx

@@ -46,7 +46,7 @@ const THUMB: ViewStyle = {
   elevation: 2,
 }
 
-const enhance = (style, newStyles) => {
+const enhance = (style, newStyles): any => {
   return mergeAll(flatten([style, newStyles]))
 }
 

boilerplate/app/components/text-field/text-field.story.tsx

@@ -9,6 +9,8 @@ import { TextField } from "./"
 import { State } from "react-powerplug"
 import { ViewStyle, TextStyle, Alert } from "react-native"
 
+declare var module
+
 const styleArray: ViewStyle[] = [{ paddingHorizontal: 30 }, { borderWidth: 30 }]
 
 const inputStyleArray: TextStyle[] = [

boilerplate/app/components/text/text.story.tsx

@@ -8,6 +8,8 @@ import { StoryScreen, Story, UseCase } from "../../../storybook/views"
 import { color } from "../../theme"
 import { Text } from "./text"
 
+declare var module
+
 const VIEWSTYLE = {
   flex: 1,
   backgroundColor: color.storybookDarkBg,

boilerplate/app/components/wallpaper/wallpaper.story.tsx

@@ -3,6 +3,8 @@ import { storiesOf } from "@storybook/react-native"
 import { StoryScreen, Story, UseCase } from "../../../storybook/views"
 import { Wallpaper } from "./wallpaper"
 
+declare var module
+
 storiesOf("Wallpaper", module)
   .addDecorator(fn => <StoryScreen>{fn()}</StoryScreen>)
   .add("Style Presets", () => (

boilerplate/app/models/extensions/with-status.ts

@@ -27,7 +27,7 @@ export const withStatus = () => {
   /**
    * The observable backing store for the status field.
    */
-  let status: IObservableValue<string> = observable.box("idle")
+  const status: IObservableValue<string> = observable.box("idle")
 
   return {
     views: {