Set Up Your Environment · React Native (2024)

Installing dependencies

You will need Node, the React Native command line interface, a JDK, and Android Studio.

While you can use any editor of your choice to develop your app, you will need to install Android Studio in order to set up the necessary tooling to build your React Native app for Android.

Node

Follow the installation instructions for your Linux distribution to install Node 18 or newer.

Java Development Kit

React Native currently recommends version 17 of the Java SE Development Kit (JDK). You may encounter problems using higher JDK versions. You may download and install OpenJDK from AdoptOpenJDK or your system packager.

Android development environment

Setting up your development environment can be somewhat tedious if you're new to Android development. If you're already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps.

1. Install Android Studio

Download and install Android Studio. While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device

Then, click "Next" to install all of these components.

If the checkboxes are grayed out, you will have a chance to install these components later on.

Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.

2. Install the Android SDK

Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 14 (UpsideDownCake) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.

To do that, open Android Studio, click on "Configure" button and select "SDK Manager".

The SDK Manager can also be found within the Android Studio "Settings" dialog, under Languages & FrameworksAndroid SDK.

Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 14 (UpsideDownCake) entry, then make sure the following items are checked:

  • Android SDK Platform 34
  • Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that 34.0.0 is selected.

Finally, click "Apply" to download and install the Android SDK and related build tools.

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order to build apps with native code.

Add the following lines to your $HOME/.bash_profile or $HOME/.bashrc (if you are using zsh then ~/.zprofile or ~/.zshrc) config file:

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

.bash_profile is specific to bash. If you're using another shell, you will need to edit the appropriate shell-specific config file.

Type source $HOME/.bash_profile for bash or source $HOME/.zprofile to load the config into your current shell. Verify that ANDROID_HOME has been set by running echo $ANDROID_HOME and the appropriate directories have been added to your path by running echo $PATH.

Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Settings" dialog, under Languages & FrameworksAndroid SDK.

Watchman

Follow the Watchman installation guide to compile and install Watchman from source.

Watchman is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance and increased compatibility in certain edge cases (translation: you may be able to get by without installing this, but your mileage may vary; installing this now may save you from a headache later).

Preparing the Android device

You will need an Android device to run your React Native Android app. This can be either a physical Android device, or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer.

Either way, you will need to prepare the device to run Android apps for development.

Using a physical device

If you have a physical Android device, you can use it for development in place of an AVD by plugging it in to your computer using a USB cable and following the instructions here.

Using a virtual device

If you use Android Studio to open ./AwesomeProject/android, you can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this:

Set Up Your Environment · React Native (1)

If you have recently installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the UpsideDownCake API Level 34 image.

We recommend configuring VM acceleration on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it.

That's it!

Congratulations! You successfully set up your development environment.

Set Up Your Environment · React Native (2)

Now what?

  • If you want to add this new React Native code to an existing application, check out the Integration guide.
  • If you're curious to learn more about React Native, check out the Introduction to React Native.
Set Up Your Environment · React Native (2024)

FAQs

How do I set up a development environment for React Native? ›

React Native - Environment Setup
  1. Step 1: Install create-react-native-app. ...
  2. Step 2: Create project. ...
  3. Step 3: NodeJS Python Jdk8. ...
  4. Step 4: Install React Native CLI. ...
  5. Step 5: Start react native. ...
  6. Step 6: Eject the project. ...
  7. Step 7: Installing Android Studio. ...
  8. Step 8: Configuring AVD Manager.

How to setup environment variables for React Native? ›

The React Native tools require some environment variables to be set up in order to build apps with native code.
  1. Open the Windows Control Panel.
  2. Click on User Accounts, then click User Accounts again.
  3. Click on Change my environment variables.
  4. Click on New...
May 15, 2024

How do I set up React Native environment on Mac? ›

React Native installation on Mac can be done globally by running npm install -g react-native-cli in your terminal. This can be done using npm (Node Package Manager). Make sure Node. js is installed before continuing.

Is it worth it to learn React Native in 2024? ›

React Native stands as a compelling choice for mobile app development in 2024, offering a blend of cross-platform efficiency and native-like performance. Its advantages, including a shared codebase, native UI, and robust community support, make it a popular framework among developers.

How do I set up my react environment? ›

Setting Up Your Development Environment for React: A Comprehensive Guide
  1. Prerequisites. ...
  2. Step 1: Create a React Application. ...
  3. Step 2: Navigate to Your Project Directory. ...
  4. Step 3: Start the Development Server. ...
  5. Step 4: Project Structure. ...
  6. Step 5: Install Additional Dependencies. ...
  7. Conclusion.
Oct 5, 2023

How to setup env in reactjs? ›

Here's how you can use a . env file in a React. js project
  1. Create an . env file: In the root directory of your React project, create a file named . env . ...
  2. Define environment variables: In the . env file, you can define environment variables using the KEY=VALUE syntax.
Oct 28, 2023

How do I set up React Native Web? ›

Adding React Native web support using CRA
  1. Create required files for the web platform, and use CRA's react-scripts 's default configuration.
  2. Create required files for the web platform, and use a bundler (i.e., webpack) for web packaging/releasing with a custom bundler configuration.
Jul 21, 2023

How to setup React Native in Visual Studio Code? ›

Here's how:
  1. Open Visual Studio Code and press Ctrl+Shift+N or select File > New Window.
  2. Press Ctrl+Shift+P or select View > Command Palette.
  3. Type “React Native: New Project,” and press Enter.
  4. Follow the prompts to configure your project and click “Create.”
Aug 25, 2023

Which UI library is best for React Native? ›

The best styling libraries for React Native include NativeBase, React Native Elements, React Native Paper, and React Native UI Kitten. You can choose from these options to build your mobile app.

Is Flutter replacing React Native? ›

When it comes to performance, Flutter has the upper hand as it's compiled to ARM or x86 native libraries, which makes it really fast. React Native isn't compiled to native code, and it still has the JavaScript layer, making it less performant than Flutter.

Is React Native better than Python? ›

React. js is generally used for front-end development, whereas Python may be used on both the front-end and the back-end. According to Google Trends, both Python and ReactJS are developing frameworks, albeit Python is more well-liked.

Is React Native tough? ›

Building apps with React Native is hard. To be successful, you not only need a strong React foundation, but you should also have familiarity with Android, iOS, and their respective features, guidelines, and app stores.

How do you set up a development environment? ›

How to set up a dev environment on Windows
  1. Install Windows Terminal.
  2. Install Visual Studio Code.
  3. Install Git.
  4. Install NodeJS and npm.
  5. Install Express.js.
  6. Install React.
  7. Install PostgreSQL.

How do I run React Native in dev mode? ›

Accessing the Dev Menu​

React Native provides an in-app developer menu which offers several debugging options. You can access the Dev Menu by shaking your device or via keyboard shortcuts: iOS Simulator: Cmd ⌘ + D (or Device > Shake) Android emulators: Cmd ⌘ + M (macOS) or Ctrl + M (Windows and Linux)

What IDE is needed for React Native? ›

However, React Native is not a standalone framework. It needs IDEs to optimize coding and development processes along different tech stacks. In this regard, Visual Code Studio, Atom, WebStorm, and Sublime Text are commonly used React Native text editors and IDEs.

What are the requirements for React Native app development? ›

React Native requires Android 6.0 (Marshmallow) SDK or later. We recommend using the latest SDK. Create environment variable paths for the Java SDK and Android SDK: In the Windows search menu, enter: "Edit the system environment variables", this will open the System Properties window.

Top Articles
Latest Posts
Article information

Author: Lakeisha Bayer VM

Last Updated:

Views: 5737

Rating: 4.9 / 5 (49 voted)

Reviews: 80% of readers found this page helpful

Author information

Name: Lakeisha Bayer VM

Birthday: 1997-10-17

Address: Suite 835 34136 Adrian Mountains, Floydton, UT 81036

Phone: +3571527672278

Job: Manufacturing Agent

Hobby: Skimboarding, Photography, Roller skating, Knife making, Paintball, Embroidery, Gunsmithing

Introduction: My name is Lakeisha Bayer VM, I am a brainy, kind, enchanting, healthy, lovely, clean, witty person who loves writing and wants to share my knowledge and understanding with you.