- Running applications
- Simulator Logs
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.
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.
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 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
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
Enable Debugging from the Application
From the Simulator, you will want to enable debugging the application. Press
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.
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.
The React Native Debugger in Nuclide also provides an Element Inspector, where you can view and toggle properties of your application.
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
Ctrl-D on Linux) within
the Simulator and choose Show Inspector.