PyCharm 2018.2 Help

React Native

With React Native you can develop native mobile applications for iOS and Android using JavaScript and React. It is created by Facebook and used for such well-known apps as Instagram, Airbnb, and now JetBrains’ own YouTrack mobile application. Learn more from React Native Official website.

PyCharm helps you create, edit, lint, run, debug, and maintain your React Native applications. PyCharm also provides code completion for React and Flow symbols.

Installing react-native-cli globally

  • Open the built-in Terminal (View | Tool Windows | Terminal) and type <nmp_path>\npm install -g react-native-cli at the command prompt.

Creating a new React Native application

To create an application

  1. Choose File | New | Project on the main menu or click Create New Project on the Welcome screen. The New Project dialog box opens.

  2. In the left-hand pane, choose React Native.

  3. In the right-hand pane, specify the project folder, the Node.js interpreter to use, and the path to the react-native-cli package.

  4. When you click Create, PyCharm generates a React Native-specific project with all the required configuration files.

To download the project dependencies, do one of the following:

  • Open the embedded Terminal (View | Tool Windows | Terminal or Alt+F12) and type <nmp_path>\npm install at the command prompt.

  • Choose Run 'npm install' on the context menu of the package.json file in your project root.

Starting with an existing React Native application

To continue developing an existing React Native application, open it in PyCharm and download the required dependencies.

To open the application sources that are already on your machine

  • Click Open on the Welcome screen or choose File | Open on the main menu. In the dialog that opens, select the folder where your sources are stored.

To check out the application sources from your version control

  1. Click Check out from Version Control on the Welcome screen or choose VCS | Check out from Version Control on the main menu.

  2. Select your version control system from the list.

  3. In the VCS-specific dialog that opens, type your credentials and the repository to check out the application sources from.

To download the dependencies

  • Click Run 'npm install' in the pop-up window:

    Opening an Angular application and downloading the dependencies from package.json

Install other tools to get started with React Native, for example, an iOS simulator. The list of these tools depends on your operating system and the mobile platform you are going to target your application at. See React Native Getting Started guide for detailed installation instructions.

Coding assistance

PyCharm provides code completion for React APIs and JSX in JavaScript code. Code completion works for React methods, React-specific attributes, HTML tags and component names, React events, component properties, etc. Learn more from React: Completing Code.

Running and debugging a React Native application

You can run and debug your application on a physical device or on a simulator. Before you launch your application, make sure that the simulator is already running or, if you are using a physical device, it is already connected to your computer.

PyCharm makes running and debugging React Native applications very flexible. For example, if you are starting your application for the first time, you can choose to run the React Native bundler, build the application, and open it on the simulator - all that as part of a running or debugging session. You can also skip launching the bundler if it is already running or refuse building the application if you have not made any changes to its native code since the previous run.

To create a React Native run/debug configuration

  1. On the main menu, choose Run | Edit Configurations, click icons general add svg and choose React Native from the list.

  2. Choose whether you want PyCharm to build and launch the application for you:
    • Select the Build and launch checkbox if you are launching your application for the first time or if you have updated its native code since the last run.

    • Clear this checkbox if you haven't made any changes to the native code of your application since the last build. When you start debugging, PyCharm waits for you to open your application in the simulator with the Remote debug enabled as described on the React Native Official website.

    • If your application uses Expo, clear the checkbox because this bundler takes care of the process itself.

  3. If you selected the Build and launch checkbox, choose the target platform, Android or iOS. Depending on your choice, PyCharm will run the bundler with react-native run-ios or with react-native run-android. Optionally, type the arguments to be passed to React Native, for example, specify the simulator type through the ‑‑simulator flag: ‑‑simulator="iPhone 4s".

  4. In the Bundler port, specify the port on which the React Native bundler runs, by default 8081 is chosen, learn more from the React Native Official website.

  5. Choose the Node.js interpreter to use. This can be a local Node.js interpreter or a Node.js on Windows Subsystem for Linux. Specify the path to react-native-cli and the working directory of the application. Optionally, type the environment variables for react-native run-android or react-native run-ios.

  6. By default, PyCharm starts the React Native bundler automatically when you invoke the run/debug configuration. If you have already started the bundler from outside PyCharm, for example, from the command line, you can re-use it without stopping and restarting. Select your bundler in the Before Launch area and click icons general remove svg.

    React Native Run/Debug Configuration

To prepare an Android device

To prepare an iOS simulator

  • Open the embedded Terminal (View | Tool Windows | Terminal or Alt+F12) and type <nmp_path>\npm install --global ios-sim at the command prompt.

To run an application

  • Choose the newly created React Native configuration in the Select run/debug configuration drop-down list on the toolbar and click icons toolwindows toolWindowRun svg next to it. PyCharm opens the Run tool window and first starts the React Native bundler in a new React Native tab. After that, the react-native run-ios or react-native run-android command is executed, depending on the selected target platform. If the build is successful, the simulator shows your application:

    ws_react_native_packager_running.png

Last modified: 12 October 2018

See Also