Nuclide has built-in support for the React Native framework. React Native provides a set of components and extensions that allows you to easily write native iOS and Android applications using the Flow and JavaScript programming languages and the React UI library.

Features

If your React Native apps are primarily written in Flow, you get all of its features within Nuclide, including Autocomplete, Code Diagnostics, etc.

JavaScript works well with Nuclide as well.

You can also write native iOS (Objective-C) code with React Native, and get features such as Automatic Square Bracket Completion from Nuclide when doing so. Native Android code written in conjunction with React Native has minimal support.

Running applications

All React Native features are currently available from the Command Palette.

You run the React Native Packager and Server from Nuclide and your application from the command line.

React Native Packager

From the Command Palette, choose Nuclide React Native: Start Packager to start the React Native Server. The output in the Console panel indicates if the React Native Packager started or if it encountered any errors.

The server runs on the default port 8081. You can stop and restart the server at anytime.

Command Line

Ensure that you are in the root directory of the React Native project, then run the application from the command-line:

$ react-native run-ios
$ react-native run-android

This should bring up the Simulator with your running application inside.

Debugging

React Native for iOS has first-class support within Nuclide. The Debugger is no exception.

Debugging React Native for Android is currently not supported except for the Simulator logs.

From Nuclide, you can start a React Native development server, inspect React Native elements and use the Debugger to set and stop on breakpoints, etc.

In order to use React Native within Nuclide, you must install it.

Loading a React Native Project

You open a React Native project the usual way. Nuclide will automatically establish that you have a React Native project by seeing the node_modules/react-native directory from the root of your project.

React Native Server

Before starting the Debugger, launch the React Native Server from within Nuclide.

Prime the Debugger

After starting the server, you can prime the React Native Debugger for when the application begins running. From the Command Palette, launch Nuclide React Native: Start Debugging.

You might see that the Nuclide Debugger UI appears but doesn’t start, instead showing you a waiting condition.

This means that the Debugger is waiting to attach to the actual running process of the React Native application.

Run the React Native Application

Start your React Native application from the command-line.

Enable Debugging from the Application

From the Simulator, you will want to enable debugging the application. Press Cmd-D (Ctrl-D on Linux). This will bring up the debug options for your application. Select Debug JS Remotely.

If you have enabled debugging in a previous session, then debugging will still be enabled; thus, this step will not be necessary.

Start Debugging

After you enable debugging from the simulated application, Nuclide will attach to that debugging process automatically, since we primed the Debugger above. You can now set breakpoints, Watch Expressions, etc.

You can set breakpoints, Watch Expressions, etc. earlier than this step, but access to them will not be available until the debugging has been enabled.

If the Debugger is paused when it opens, you may have to click the resume execution button (i.e., the play icon) for debugging to begin.

Now you can start debugging your React Native application as normal.

Element Inspector

The React Native Debugger in Nuclide also provides an Element Inspector, where you can view and toggle properties of your application.

From the Command Palette, choose Nuclide React Native Inspector: Show to open the React Native Inspector tab in the main Editing Area.

To see the actual elements highlighted in the Nuclide Element Inspector also highlighted in the Simulator, you must enable the Simulator Inspector as well. Press Cmd-D (Ctrl-D on Linux) within the Simulator and choose Show Inspector.

Simulator Logs

Nuclide supports the iOS Simulator logs and Android Emulator logs directly within Nuclide.