Troubleshooting React Native Startup

For students enrolled in The Complete React Native and Redux Course and having trouble getting an app to start up in the emulator, the list of issues below may help. However, before looking at specific errors, make sure you have configured your development environment correctly. Check out Building Projects with Native Code in the Getting Started section of React Native's documentation.

This list will be updated with more issues and information, as needed

• [Linter] Error running ESLint
• No bundle URL present
• Print: Entry, ":CFBundleIdentifier", Does Not Exist
• transform.forEach is not a function
• Unable to resolve module /ReactComponentWithPureRenderMixin
• undefined is not an object (evaluating '_reactNative.ViewPropTypes.style')

[Linter] Error running ESLint

As of July 13, 2017, there is an issue with NPM version 5 that is causing libraries that eslint-config-rallycoding depends on to be installed in the incorrect directory. There should be an update to NPM that fixes this soon.

Solution 1:

Manually install the dependent libraries, specifying the correct version:
npm install eslint-plugin-react@6.10.3 eslint-plugin-jsx-a11y@2.2.3 eslint-plugin-import@1.16.0
Also, eslint-config-rallycoding requires version 3.X of ESLint, but this should have installed correctly. Finally, you may need to quit the test editor and reopen the project for the linter to work correctly.

Solution 2:

Use Yarn, instead of NPM, to install dependencies.

No bundle URL present

GitHub Issue if solutions do not work

Solution 1: iOS

Delete the build folder and rerun the project
rm -rf ios/build 
react-native run-ios

Solution 2: iOS

Open a second terminal window in the project directory and run npm start. Then in the first terminal window, run react-native run-ios.

Print: Entry, ":CFBundleIdentifier", Does Not Exist

GitHub Issue if solutions do not work

Solution 1:

Remove spaces from file or directory names.
Use/path/to/ReactNative/app1 instead of /path/to/React Native/app1.

Solution 2:

Make sure port 8081 is not already in use. On a Mac, run the following command to see if any processes are running on port 8081:
lsof -i :8081
If a process is running, terminate it using this command:
kill -9 <PID>
On Windows, follow these instructions.

Solution 3:

In the project directory, run the terminal command react-native upgrade. You can also use react-native-git-upgrade to do this.

Solution 4:

Specify a version of React Native when initializing a project: 
react-native init ProjectName --version 0.44.2

transform.forEach is not a function

GitHub Issue if solutions do not work

Solution 1:

Install the PropTypes library: 
npm install prop-types --save

Unable to resolve module /ReactComponentWithPureRenderMixin

In the course, this issue can occur when a version of React Native Router Flux (RNRF) is incompatible with a version of React Native

Solution 1:

Initialize the project using the same versions of React Native and RNRF used in the course:
react-native init manager --version 0.34.1 
npm install react-native-router-flux@3.35.0 --save

undefined is not an object (evaluating '_reactNative.ViewPropTypes.style')

In the course, this issue can occur when a newer version of React Native Router Flux (RNRF) is used with an older version of React Native

Solution 1:

Initialize the project using the same versions of React Native and RNRF used in the course:
react-native init manager --version 0.34.1 
npm install react-native-router-flux@3.35.0 --save