Ignite: wrong react-navigation version

[FelixButzbach]

Hey there! Ignite CLI seems to be having a problem, eh?

---

What's going on?
I just installed ignite and wanted to give it a try but I can't get it running on my Android phone (via ubuntu).

This is the error on the phone:
undefined is not a function (evaluating '(0, _reactNavigation.createStackNavigator)')

It looks like the Andross boilerplate comes with a wrong version of react-navigation. See the generated package.json below:

{
  "name": "IgniteTest2",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "clean": "rm -rf $TMPDIR/react-* && watchman watch-del-all && npm cache clean --force",
    "clean:android": "cd android/ && ./gradlew clean && cd .. && 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",
    "coverage": "jest --coverage && open coverage/lcov-report/index.html || xdg-open coverage/lcov-report/index.html",
    "android:build": "cd android && ./gradlew assembleRelease",
    "android:install": "cd android && ./gradlew assembleRelease && ./gradlew installRelease",
    "android:hockeyapp": "cd android && ./gradlew assembleRelease && puck -submit=auto app/build/outputs/apk/app-release.apk",
    "android:devices": "$ANDROID_HOME/platform-tools/adb devices",
    "android:logcat": "$ANDROID_HOME/platform-tools/adb logcat *:S ReactNative:V ReactNativeJS:V",
    "android:shake": "$ANDROID_HOME/platform-tools/adb devices | grep '\\t' | awk '{print $1}' | sed 's/\\s//g' | xargs -I {} $ANDROID_HOME/platform-tools/adb -s {} shell input keyevent 82",
    "storybook": "storybook start -p 7007",
    "lint": "standard --verbose | snazzy",
    "lintdiff": "git diff --name-only --cached --relative | grep '\\.js$' | xargs standard | snazzy",
    "fixcode": "standard --fix",
    "git-hook": "npm run lint -s && npm run test -s"
  },
  "dependencies": {
    "apisauce": "^0.14.2",
    "format-json": "^1.0.3",
    "identity-obj-proxy": "^3.0.0",
    "lodash": "^4.17.11",
    "prop-types": "15.6.0",
    "querystringify": "1.0.0",
    "ramda": "^0.25.0",
    "react": "16.6.1",
    "react-native": "0.57.7",
    "react-native-config": "^0.10.0",
    "react-native-device-info": "0.11.0",
    "react-native-gesture-handler": "1.0.9",
    "react-navigation": "1.0.0-beta.11",
    "react-navigation-redux-helpers": "^2.0.6",
    "react-redux": "^5.0.6",
    "redux": "^4.0.0",
    "redux-saga": "^0.16.0",
    "reduxsauce": "0.7.0",
    "seamless-immutable": "^7.1.2"
  },
  "devDependencies": {
    "@storybook/addon-storyshots": "^3.4.0",
    "@storybook/addons": "^3.4.0",
    "@storybook/channels": "^3.4.0",
    "@storybook/react-native": "^3.4.0",
    "babel-core": "6.26.0",
    "babel-eslint": "7.1.1",
    "babel-jest": "23.6.0",
    "babel-plugin-ignite-ignore-reactotron": "^0.3.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react-native": "^3.0.2",
    "enzyme": "^3.2.0",
    "enzyme-adapter-react-16": "^1.1.0",
    "ignite-andross": "^3.0.3",
    "ignite-dev-screens": "~>2.3.0",
    "ignite-standard": "~>1.0.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.51.1",
    "mockery": "^2.1.0",
    "react-devtools-core": "3.4.3",
    "react-dom": "16.3.0",
    "react-test-renderer": "16.6.1",
    "reactotron-react-native": "^2.1.0",
    "reactotron-redux": "^2.1.0",
    "reactotron-redux-saga": "^2.1.0",
    "snazzy": "^8.0.0",
    "standard": "10.0.2"
  },
  "jest": {
    "testMatch": [
      "<rootDir>/Tests/**/*.js",
      "**/?(*.)(spec|test).js?(x)"
    ],
    "testPathIgnorePatterns": [
      "/node_modules/",
      "<rootDir>/Tests/Setup.js"
    ],
    "moduleNameMapper": {
      "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "identity-obj-proxy"
    },
    "transform": {
      "^.+\\.(js)$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
    },
    "setupFiles": [
      "<rootDir>/Tests/Setup"
    ],
    "preset": "react-native"
  },
  "config": {},
  "standard": {
    "parser": "babel-eslint",
    "globals": [
      "describe",
      "test",
      "jest",
      "expect",
      "fetch",
      "navigator",
      "__DEV__",
      "XMLHttpRequest",
      "FormData",
      "React$Element"
    ]
  }
}

I assume that it should be at least react-navigation 2.x because of the way it is implemented in AppNavigation.js and also because it states on the Andross repo that it ships with react-native 3.0.0 (https://github.com/infinitered/ignite-andross)

When choosing the Bowser boilerplate, the correct react-navigation version is used (3.0.0) and it runs fine on the phone.

---

Steps to reproduce

  (                  )   (
  )\ )   (        ( /(   )\ )    *   )
 (()/(   )\ )     )\()) (()/(  ` )  /(   (
  /(_)) (()/(    ((_)\   /(_))  ( )(_))  )\
 (_))    /(_))_   _((_) (_))   (_(_())  ((_)
 |_ _|  (_)) __| | \| | |_ _|  |_   _|  | __|
  | |     | (_ | | .` |  | |     | |    | _|
 |___|     \___| |_|\_| |___|    |_|    |___|
-----------------------------------------------

An unfair headstart for your React Native apps.
https://infinite.red/ignite

-----------------------------------------------

🔥 igniting app IgniteTest2
? Which boilerplate would you like to use? Andross (React Navigation, Redux, & Redux Saga)
✔ using the Infinite Red boilerplate v2 (code name 'Andross')
✔ added React Native 0.57.7 in 66.72s
? Would you like Ignite Development Screens? Yes
? What vector icon library will you use? none
? What internationalization library will you use? none
? What animation library will you use? none
? Would you like to include redux-persist? No
✔ added ignite-andross in 116.22s
✔ added ignite-dev-screens in 39.84s
✔ added ignite-standard in 43.32s
✔ configured git
✔ ignited IgniteTest2 in 383.2s

    Ignite CLI ignited IgniteTest2 in 383.2s

    To get started:

      cd IgniteTest2
      react-native run-ios
      react-native run-android
      ignite --help

    Read the walkthrough at https://github.com/infinitered/ignite-andross/blob/master/readme.md#boilerplate-walkthrough

    Need additional help? Join our Slack community at http://community.infinite.red.

    Now get cooking! 🍽

---

ignite doctor results:

  platform           linux
  arch               x64
  cpu                4 cores                                         Intel(R) Core(TM) i5-3230M CPU @ 2.60GHz
  directory          /home/felix/Projects/react-native/ignite-test

JavaScript
  node               8.12.0       /usr/local/bin/node
  npm                6.4.1        /usr/local/bin/npm
  yarn               1.12.3       /usr/bin/yarn

React Native
  react-native-cli   2.0.1

Ignite
  ignite             2.2.1        /home/felix/.yarn/bin/ignite

Android
  java               1.8.0_191    /usr/bin/java
  android home       -            /home/felix/Android/Sdk

[ruddell]

Fixed by https://github.com/infinitered/ignite-andross/pull/239

Andross specifies some older versions for dependencies like "ignite-dev-screens": "~>2.3.0", which still has that old react-native-navigation library (removed in 2.4.2).

Ignite was recently updated to allow version specifications, which caused Andross to install the specified versions rather than the latest.

The workaround for now is to clone the boilerplate with the changes in the PR and generate from that:

git clone -b fix-ignite-plugin-versions https://github.com/ruddell/ignite-ir-boilerplate.git
ignite new NewApp --boilerplate /full/path/to/cloned/repository

[nidzola]

Hm, strange, I'm on Mac, and I have the same issue, will try the fix, thanks 😄

[ruddell]

I updated the comment with better reasoning and a workaround until it's fixed

[FelixButzbach]

@ruddell thanks for the reply.
I just followed your instructions and was able to initiate a new ignite project with the Andross boilerplate that contains all plugins and there have been no errors!

Everything seams to be working. But I can't really tell much apart from there are no errors and it loads the dev screens without problems (Its my first Ignite and react-native project).

One note, just to be sure, ignite NewApp should be ignite new NewApp, or is this an alternative way of starting a new project?

Anyways, thanks for looking into this!

[ruddell]

Yep, the new keyword is required. I updated the comment. Glad you could get it working.

[jamonholmgren]

ignite-andross released with the fix for this in 3.0.4. Thanks @ruddell !

https://github.com/infinitered/ignite-andross/pull/239#issuecomment-454233081