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

Before you start

Make sure you have Node.js on your computer.
Make sure the JavaScript and TypeScript and JavaScript Debugger required plugins are enabled on the Settings | Plugins page, tab Installed. For more information, refer to Managing plugins.

Creating a new React Native application

Click Create New Project on the Welcome screen or select File | New | Project from the main menu. The New Project dialog opens.
In the left-hand pane, choose React Native.
In the right-hand pane:
1. Specify The path to the folder where the project-related files will be stored.
2. In the Node Interpreter field, specify the Node.js interpreter to use. Select a configured interpreter from the list or choose Add to configure a new one.
3. From the React Native list, select npx --package react-native-cli react-native.
  Alternatively, for npm version 5.1 and earlier, install the react-native-cli package yourself by running npm install -g react-native-cli in the Terminal Alt+F12. When creating an application, select the folder where the react-native-cli package is stored.
When you click Create, PyCharm generates a React Native-specific project with all the required configuration files, downloads the dependencies, and creates a run/debug configuration of the type React Native with default settings..

Starting with an existing React Native application

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

Open the application sources that are already on your machine

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

Check out the application sources from your version control

Click Clone Repository on the Welcome screen.
Alternatively, select File | New | Project from Version Control or Git | Clone or VCS | Get from Version Control from the main menu.
Instead of Git in the main menu, you may see any other Version Control System that is associated with your project. For example, Mercurial or Perforce.
In the dialog that opens, select your version control system from the list and specify the repository to check out the application sources from. For more information, refer to Check out a project (clone).

Download the dependencies

Click Run 'npm install' or Run 'yarn install' in the popup:
You can use npm, Yarn 1, or Yarn 2, refer to npm and Yarn for details.
Alternatively, select Run 'npm install' or Run 'yarn install' from the context menu of package.json in the editor or in the Project tool window.

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.

Project security

When you open a project that was created outside PyCharm and was imported into it, PyCharm displays a dialog where you can decide how to handle this project with unfamiliar source code.

Select one of the following options:

Preview in Safe Mode: in this case, PyCharm opens the project in a preview mode. It means that you can browse the project's sources but you cannot run tasks and script or run/debug your project.
PyCharm displays a notification on top of the editor area, and you can click the Trust project link and load your project at any time.
Trust Project: in this case, PyCharm opens and loads a project. That means the project is initialized, project's plugins are resolved, dependencies are added, and all PyCharm features are available.
Don't Open: in this case, PyCharm doesn't open the project.

Learn more from Project security.

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, and so on. See React: Completing Code for more information.

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.

Create a React Native run/debug configuration

Select Edit Configurations from the Run/Debug Configurations widget on the toolbar, click the Add New Configuration button () and select React Native from the list to open the configuration settings.
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.
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.
- To emulate the Android platform, use an Android virtual device.
- To emulate the iOS platform, you need to install the ios-sim command-line tool globally. You can do it through the Node Package Manager (npm), refer to npm, pnpm, and Yarn, or by running the sudo npm install ios-sim -g command, depending on your operating system.
Learn more from the React Native official website.
Optionally, in the Arguments field, type the arguments to be passed to React Native, for example, specify the simulator type through the ‑‑simulator flag: ‑‑simulator="iPhone 4s".
Specify the browser to use.
In debugging React Native applications, PyCharm relies on the Chrome runtime, which is used by React Native itself. You can also use DevTools together with PyCharm. When you initiate a debugging session, PyCharm starts a new Chrome instance and attaches to it.
In the Bundler host field, specify the host where the React Native bundler runs, the default value is localhost.
If you are using Expo, you may need to change the default bundler host to ensure successful connection with the debugger. This connection may fail because PyCharm by default uses localhost to start debugging while Expo expects 127.0.0.1 or an external IP address depending on what is selected in Connection field of the Metro bundler configuration.
In the Bundler port field, specify the port on which the React Native bundler runs, by default 8081 is chosen, learn more from the React Native official website.
If your application uses Expo, you may need to change the port to 19000 or 19001, depending on the Expo configuration.
Specify the Node.js interpreter to use.
If you choose the Project alias, PyCharm will automatically use the project default interpreter from the Node interpreter field on the Node.js page . In most cases, PyCharm detects the project default interpreter and fills in the field itself.
You can also choose another configured local or remote interpreter or click and configure a new one.
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.
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 .

For more information about the settings that are common for all run/debug configurations, see Run/debug configurations.

Prepare a device or a simulator

If you are using an Android device, you need to prepare it every time you start working with an application.

An iOS simulator has to be installed only once, after that PyCharm starts it automatically with react-native run-ios.

To prepare an Android device, launch an Android virtual device or enable debugging over USB and connect to a physical Android device via USB.
Learn more from the React Native official website.
To prepare an iOS simulator, open the embedded Terminal (Alt+F12) and type:
<nmp_path>\npm install --global ios-sim

Run an application

From the Run/Debug Configurations list on the toolbar, select the newly created React Native configuration and click 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:

Last modified: 11 October 2024