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.

Support

Nuclide has support for React Native for iOS.

From Nuclide, you can start a React Native development server, inspect React Native elements.

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

Launch the React Native Server from within Nuclide.

Run the React Native Application

Start your React Native application from the command-line.

Element Inspector

Nuclide 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.