React Native just crashes after splash screen

Question

The Metro Bundler gives me no messages, it does absolutely nothing when I click on the app, doesn't tell me why it has crashed. On the localhost:8081/debugger-ui all I get is this

WebSocket connection to 'ws://localhost:8081/debugger-proxy?role=debugger&name=Chrome' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

but that is not very helpful at all since I ensured that 8081 is not already in use.

This is my environment:

React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
      Memory: 35.21 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 11.10.1 - /usr/local/bin/node
      Yarn: 1.10.1 - /usr/local/bin/yarn
      npm: 6.7.0 - /usr/local/bin/npm
      Watchman: 4.7.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 23, 25, 26, 27, 28
        Build Tools: 23.0.1, 26.0.2, 27.0.3, 28.0.3
    IDEs:
      Android Studio: 3.4 AI-183.5429.30.34.5452501
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3
      react-native: 0.59.9 => 0.59.9
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

There is just a lot of noise out there that leads nowhere except going around in circles.

This is my package.json file:

"scripts": {
    "start": "nps",
    "test": "nps setup && nps test",
    "build": "nps build",
    "prepare": "nps patcher",
    "setup": "nps setup && nps appcenter",
    "react-devtools": "react-devtools"
  },
  "dependencies": {
    "appcenter": "2.0.0",
    "appcenter-analytics": "2.0.0",
    "appcenter-crashes": "2.0.0",
    "axios": "0.16.2",
    "date-fns": "^1.29.0",
    "lodash": "4.17.4",
    "moment": "2.20.1",
    "payment": "2.3.0",
    "prop-types": "15.6.0",
    "react": "16.8.3",
    "react-native": "0.59.9",
    "react-native-autoheight-webview": "0.6.1",
    "react-native-calendar-events": "1.6.1",
    "react-native-device-info": "0.21.5",
    "react-native-exception-handler": "2.8.9",
    "react-native-image-progress": "1.0.1",
    "react-native-immediate-phone-call": "1.0.0",
    "react-native-keyboard-aware-scroll-view": "0.4.4",
    "react-native-keyboard-manager": "4.0.13-12",
    "react-native-material-buttons": "0.5.0",
    "react-native-material-dropdown": "0.5.2",
    "react-native-material-tabs": "3.5.0",
    "react-native-material-textfield": "0.10.0",
    "react-native-onesignal": "3.0.7",
    "react-native-popup-menu": "0.8.3",
    "react-native-sentry": "0.32.0",
    "react-native-size-matters": "0.1.0",
    "react-native-splash-screen": "3.0.6",
    "react-native-svg": "6.3.1",
    "react-native-swipe-view": "https://github.com/jjd314/react-native-swipe-view",
    "react-native-tab-view": "1.3.2",
    "react-native-vector-icons": "6.1.0",
    "react-native-xcode-packager": "0.1.0",
    "react-navigation": "1.5.11",
    "react-redux": "5.0.6",
    "reactotron-react-native": "3.5.0",
    "reactotron-redux": "3.1.0",
    "recompose": "0.26.0",
    "redux": "4.0.1",
    "redux-thunk": "2.2.0",
    "replace-in-file": "3.1.1"
  },
  "devDependencies": {
    "@babel/core": "7.4.5",
    "@babel/plugin-proposal-optional-chaining": "7.2.0",
    "@babel/runtime": "7.4.5",
    "async": "2.6.0",
    "babel-cli": "6.24.1",
    "babel-eslint": "8.0.2",
    "babel-jest": "23.0.0",
    "babel-plugin-module-resolver": "3.0.0",
    "babel-preset-env": "1.4.0",
    "babel-preset-flow": "6.23.0",
    "babel-preset-stage-2": "6.24.1",
    "babel-watch": "2.0.6",
    "chalk": "1.1.3",
    "detox": "8.2.3",
    "eslint": "4.12.0",
    "eslint-import-resolver-babel-module": "4.0.0-beta.3",
    "eslint-plugin-import": "2.8.0",
    "eslint-plugin-prettier": "2.3.1",
    "eslint-plugin-react": "7.5.1",
    "flow-bin": "0.46.0",
    "fs-extra": "5.0.0",
    "jest": "23.0.0",
    "metro-react-native-babel-preset": "0.54.1",
    "nps": "5.7.1",
    "nps-utils": "^1.5.0",
    "patch-package": "5.1.1",
    "postinstall-prepare": "1.0.1",
    "prettier": "1.8.2",
    "prettier-eslint": "8.2.2",
    "react-devtools": "3.6.1",
    "react-test-renderer": "16.2.0",
    "redux-mock-store": "1.3.0",
    "yargs": "8.0.1"
  },
  "jest": {
    "preset": "react-native",
    "setupTestFrameworkScriptFile": "./jest-setup.js",
    "transformIgnorePatterns": [
      "/node_modules/(?!parse)/"
    ],
    "unmockedModulePathPatterns": [
      "react",
      "react-navigation",
      "axios",
      "redux",
      "redux-thunk",
      "lodash",
      "date-fns"
    ],
    "verbose": true
  },
  "detox": {
    "configurations": {
      "ios.sim.debug": {
        "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/NFIBEngage.app",
        "build": "xcodebuild -workspace ios/NFIBEngage.xcworkspace -configuration Debug -scheme NFIBEngage -sdk iphonesimulator -derivedDataPath ios/build",
        "type": "ios.simulator",
        "name": "iPhone 6"
      }
    },
    "test-runner": "jest"
  }
}

So is it an issue with dependencies? What is going on? Last time I heard from anyone from the react native team, I was told I needed to upgrade my RN project from 0.53.3 to 0.59.9 and I have done so and now I get an app that crashes silently.

react-native log-ios does not tell me anything except some message about re-spawning in 5 seconds. It would be great if I knew why my app was crashing and I attempted to install bugsnag only to find it has its own problems so I did not want to continue down that rabbit hole.

Any sure-fire way of at least knowing why the app crashes upon splash screen without installing yet another package for monitoring?

I don't necessarily think it's a version issue, because when I go back to RN version 0.53.3, that one crashes after splash screen as well.

One "solution" that I did not fully explore was to run grep -R "View.proptypes.style" node_modules.

I did run that command but if the issue is with code inside of node modules, is it best practice for me to be tweaking code inside of node modules?

Also version 0.53.3 that is crashing returns nothing from that, but version 0.59.9 does return a bunch of files. I just don't think that is it. Whatever is causing version 0.53.3 to crash has got to be what ended up causing 0.59.9 to crash, but prior to the upgrade and during the upgrade the app was not crashing.

In fact, even when I go into branches I have not worked on in a couple of weeks and try to boot the app from there, it's crashing as well, so is this an Xcode issue with the simulator?

Answer 1

I was able to access the MacOS logs by going to spotlight and typing in console, clearing out the console and then observing it as I attempted to open the app within the simulator.

There will be a lot to look over as with most logs, but the error message that is a good starting point:

Terminating app due to uncaught exception 'RCTFatalException: Unhandled JS Exception: Cannot create styled-component for component: [object Object]', reason: 'Unhandled JS Exception: Cannot create styled-component for component: [object Object]