React Native Reload and Dev Tools Do Not Work

Question

TL;DR – My React Native project runs/renders successfully. The reload or developer tools on device shake abilities are not working.

---

I've setup React Native within an existing project following this guide. I am able to successfully render my React Native views with the following:

1. In project root: (JS_DIR=pwd/js; cd node_modules/react-native; npm run start -- --root $JS_DIR)
2. Build and run the project within Xcode

However, once the simulator is running I cannot use command+r to reload the JavaScript, nor am I able to use command+control+z to display the developer tools.

I did not use react-native init <ProjectName> to create the project. I am adding React Native to an existing Swift project. I am not using react-native run-ios as it throws the following errors:

** BUILD FAILED **


The following build commands failed:
    CompileC /Users/username/Sites/iOS/project-name/build/Build/Intermediates/Pods.build/Local-iphonesimulator/FXBlurView.build/Objects-normal/x86_64/FXBlurView.o FXBlurView/FXBlurView/FXBlurView.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
    CompileC /Users/username/Sites/iOS/project-name/build/Build/Intermediates/Pods.build/Local-iphonesimulator/FXBlurView.build/Objects-normal/i386/FXBlurView.o FXBlurView/FXBlurView/FXBlurView.m normal i386 objective-c com.apple.compilers.llvm.clang.1_0.compiler
    CompileC /Users/username/Sites/iOS/project-name/build/Build/Intermediates/Pods.build/Local-iphonesimulator/FXBlurView.build/Objects-normal/x86_64/FXBlurView-dummy.o Target\ Support\ Files/FXBlurView/FXBlurView-dummy.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
    CompileC /Users/username/Sites/iOS/project-name/build/Build/Intermediates/Pods.build/Local-iphonesimulator/FXBlurView.build/Objects-normal/i386/FXBlurView-dummy.o Target\ Support\ Files/FXBlurView/FXBlurView-dummy.m normal i386 objective-c com.apple.compilers.llvm.clang.1_0.compiler
(4 failures)
Installing build/Build/Products/Debug-iphonesimulator/ProjectName.app
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2):
Failed to install the requested application
An application bundle was not found at the provided path.
Provide a valid path to the desired application bundle.
Print: Entry, ":CFBundleIdentifier", Does Not Exist
/Users/username/Sites/iOS/project-name/node_modules/promise/lib/done.js:10
      throw err;
      ^

Error: Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/ProjectName.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist

    at checkExecSyncError (child_process.js:464:13)
    at Object.execFileSync (child_process.js:484:13)
    at _runIOS (runIOS.js:91:34)
    at runIOS.js:24:5
    at tryCallTwo (/Users/username/Sites/iOS/project-name/node_modules/promise/lib/core.js:45:5)
    at doResolve (/Users/username/Sites/iOS/project-name/node_modules/promise/lib/core.js:200:13)
    at new Promise (/Users/username/Sites/iOS/project-name/node_modules/promise/lib/core.js:66:3)
    at Array.runIOS (runIOS.js:23:10)
    at Object.run (/Users/username/Sites/iOS/project-name/node_modules/react-native/local-cli/cli.js:86:13)
    at Object.<anonymous> (/Users/username/.nvm/versions/node/v4.2.4/lib/node_modules/react-native-cli/index.js:88:7)

What should I look for to get the reload and developer tools abilities working?

Answer 1

If you have custom configurations and you're using Cocoapods, make sure the Podfile specifies that those configurations should be debug configurations. By default they are assumed to be release configurations. Add the following line to the top of your Podfile (assuming your custom configs are "Dev", "Local", and "Staging"):

For pre-1.0 Cocoapods use xcodeproj:

xcodeproj 'MyProject', 'Dev' => :debug, 'Local' => :debug, 'Staging' => :debug

For Cocoapods 1.0+ use project:

project 'MyProject', 'Dev' => :debug, 'Local' => :debug, 'Staging' => :debug

Then, to get the Pods.xcodeproj file to update:

rm -rf Pods/
pod install

This will ensure the DEBUG=1 Preprocessor Macro is set for those configurations for the Pods project.

Answer 2

It turns out if your Build Configuration is named anything other than "Debug", then reload and the dev menu is not available. Renaming the Build Configuration back to "Debug" resolved my issues for the short-term.

This seems like a bug with React Native, but there doesn't appear to be any movement on fixing this "issue" within the library.

Answer 3

Based on what you say it looks like you're running your app in release mode. That's when Reload and dev tools are disabled. Check this thread to see how can you switch between release and debug mode.

Also, if you followed the guide you mentioned, in order to hit the dev server, make sure the variable BOOL REACT_DEV_MODE is set to YES, otherwise you will always use the local bundle instead of the dev server.

BOOL REACT_DEV_MODE = YES;

After that, make sure that when you navigate in your app to your RN view, you see a request from your app hitting the local server (in your terminal) just like this:

BTW, It's expected for react-native run-ios to not work if you're adding it to your react native project. That command will work only for full RN apps.

Hope it helps...