React Native Troubleshooting Tips and Tricks

While building a React Native iOS and Android application, I've run into a number of tricky, unintuitive issues. The following processes and guide are how to solve weird issues.

React Native Debugging

General Process

1. Checkout what the debugger has to say: http://localhost:8081/debugger-ui/
2. Check language, package, framework and any other versions
3. Update dependencies
4. Kill any processes hanging around
5. Restart your computer
6. Bust a cache in that app

Specific Questions:

• Did you update packages or dependencies? npm install && cd ios pod install
• Has NVM loaded the right Node version?
• Do you have all of the correct packages installed?
• Are you running the right version of XCode?
• Have you installed the XCode command-line tools?
• Are there any unlinked React Native packages? Link them.
• Are there processes hanging around? Kill them. ps awwux | grep storybook
• Did you do something that requires a new build?
• Did configuration change or are you missing some secrets?

Cache Busting Cheatsheet

# React Native
rm -rf ~/.rncache

# Babel 
rm ~/.babel.json

# iOS Build
rm -rf ios/build    

# NPM - Cache and Clean Slate               
npm cache clean --force # cache
rm -rf node_modules && npm install 

# Watchman - clears watches/triggers
watchman watch-del-all

XCode Issues

1. "Could not parse the simulator list output"

dyld: Symbol not found: _SimDeviceBootKeyDisabledJobs
  Referenced from: /Applications/Xcode.app/Contents/Developer/usr/bin/simctl
  Expected in: /Library/Developer/PrivateFrameworks/CoreSimulator.framework/Versions/A/CoreSimulator
 in /Applications/Xcode.app/Contents/Developer/usr/bin/simctl

Could not parse the simulator list output

Solution:

This one is pretty dumb. You just need to open and close the XCode app. This usually happens after an XCode upgrade.

Source: https://joelennon.com/index.php/resolving-could-not-parse-the-simulator-list-output-when-running-react-native-apps-on-ios-simulator

2. pod install fails because of glog

Installing glog (0.3.4)
<Thread:0x00007fd5a59c8060@/Users/stephen/.rvm/gems/ruby-2.5.1@brink-rn/gems/cocoapods-1.5.3/lib/cocoapods/executable.rb:166 run> terminated with exception (report_on_exception is true):

Solution:

(1) Double check you're using the correct version of the xcode CLI:

$ xcode-select -v
xcode-select version 2349.

(2) Double check your xcode-select path. If it looks like the following, you'll want to relink it:

$ xcode-select -p

/Library/Developer/CommandLineTools

Relink to Xcode:

$ sudo xcode-select --switch /Applications/Xcode.app

pod install should now succeed.

Source: https://github.com/facebook/react-native/issues/16279

3. "CocoaPods could not find compatible versions for pod"

This is probably because an NPM package got upgraded and the versions are out of sync. I would expect a manual pod install to fail:

$ cd ios && pod install

Find the right package and run:

$ pod upgrade my-package-name

Everything should work now.

React Native Issues

Sources for assign MUST be an object.

TypeError: In this environment the sources for assign MUST be an object. This error is a performance optimization and not spec compliant.

This vague error means you've probably passing in the wrong value to a prop (e.g, boolean when a prop is expecting an object).

Local Assets aren't being rendered

After checking your paths and the React render chain to the point you think you're now crazy, take a look at the image docs. I can't find the original URL where I learned this but, by default, React Native won't render images larger than the device dimesions. Try this approach for large images:

...the packager will bundle and serve the image corresponding to device's screen density. For example, check@2x.png, will be used on an iPhone 7, whilecheck@3x.png will be used on an iPhone 7 Plus or a Nexus 5. If there is no image matching the screen density, the closest best option will be selected.

Flow Issues

If you run into weird flow issues, force a restart of the process or kill it entirely:

npx flow stop && npx flow start