Hướng dẫn build react-native với expo

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 & Watchman

We recommend installing Node and Watchman using Homebrew. Run the following commands in a Terminal after installing Homebrew:

brew install node
brew install watchman

If you have already installed Node on your system, make sure it is Node 18 or newer.

Watchman is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance.

Java Development Kit

We recommend installing the OpenJDK distribution called Azul Zulu using Homebrew. Run the following commands in a Terminal after installing Homebrew:

brew tap homebrew/cask-versions
brew install --cask zulu17

# Get path to where cask was installed to double-click installer
brew info --cask zulu17

After you install the JDK, update your

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

1 environment variable. If you used above steps, JDK will likely be at

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

2

The Zulu OpenJDK distribution offers JDKs for both Intel and M1 Macs. This will make sure your builds are faster on M1 Macs compared to using an Intel-based JDK.

If you have already installed JDK on your system, we recommend JDK 17. You may encounter problems using higher JDK versions.

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:

• export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/platform-tools

  3

• export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/platform-tools

  4

• export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/platform-tools

  5

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

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

6 SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.

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

The SDK Manager can also be found within the Android Studio "Settings" dialog, under Languages & Frameworks → Android 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

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

6 entry, then make sure the following items are checked:

• export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/platform-tools

  8

• export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/platform-tools

  9 or

  npm uninstall -g react-native-cli @react-native-community/cli

  0 or (for Apple M1 Silicon)

  npm uninstall -g react-native-cli @react-native-community/cli

  1

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

npm uninstall -g react-native-cli @react-native-community/cli

2 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

npm uninstall -g react-native-cli @react-native-community/cli

3 or

npm uninstall -g react-native-cli @react-native-community/cli

4 (if you are using

npm uninstall -g react-native-cli @react-native-community/cli

5, then

npm uninstall -g react-native-cli @react-native-community/cli

6 or

npm uninstall -g react-native-cli @react-native-community/cli

7. config file:

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

Run

npm uninstall -g react-native-cli @react-native-community/cli

8 (or

npm uninstall -g react-native-cli @react-native-community/cli

9 for

npm uninstall -g react-native-cli @react-native-community/cli

5. to load the config into your current shell. Verify that ANDROID_HOME has been set by running

npx react-native@latest init AwesomeProject

1 and the appropriate directories have been added to your path by running

npx react-native@latest init AwesomeProject

2.

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 & Frameworks → Android SDK.

React Native Command Line Interface

React Native has a built-in command line interface. Rather than install and manage a specific version of the CLI globally, we recommend you access the current version at runtime using

npx react-native@latest init AwesomeProject

3, which ships with Node.js. With

npx react-native@latest init AwesomeProject

4, the current stable version of the CLI will be downloaded and executed at the time the command is run.

Creating a new application

If you previously installed a global

npx react-native@latest init AwesomeProject

5 package, please remove it as it may cause unexpected issues:

npm uninstall -g react-native-cli @react-native-community/cli

React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using

npx react-native@latest init AwesomeProject

3, which ships with Node.js. Let's create a new React Native project called "AwesomeProject":

npx react-native@latest init AwesomeProject

This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Expo, or if you're adding Android support to an existing React Native project (see Integration with Existing Apps). You can also use a third-party CLI to init your React Native app, such as Ignite CLI.

[Optional] Using a specific version or template

If you want to start a new project with a specific React Native version, you can use the

npx react-native@latest init AwesomeProject

7 argument:

npx [email protected] init AwesomeProject --version X.XX.X

You can also start a project with a custom React Native template with the

npx react-native@latest init AwesomeProject

8 argument.

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

npx react-native@latest init AwesomeProject

9, 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:

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 Tiramisu API Level 33 image.

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, then proceed to the next step.

Running your React Native application

Step 1: Start Metro

Metro is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder:

• npm
• Yarn

note

If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses Babel to transform syntax such as JSX into executable JavaScript.

Step 2: Start your application

• npm
• Yarn

If everything is set up correctly, you should see your new app running in your Android emulator shortly.

This is one way to run your app - you can also run it directly from within Android Studio.

If you can't get this to work, see the Troubleshooting page.

Modifying your app

Now that you have successfully run the app, let's modify it.

• Open

  npx [email protected] init AwesomeProject --version X.XX.X

  0 in your text editor of choice and edit some lines.
• Press the R key twice or select

  npx [email protected] init AwesomeProject --version X.XX.X

  1 from the Dev Menu (Cmd ⌘ + M) to see your changes!

That's it!

Congratulations! You've successfully run and modified your first React Native app.

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.

Installing dependencies

You will need Node, Watchman, the React Native command line interface, Xcode and CocoaPods.

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

Node & Watchman

We recommend installing Node and Watchman using Homebrew. Run the following commands in a Terminal after installing Homebrew:

brew install node
brew install watchman

If you have already installed Node on your system, make sure it is Node 18 or newer.

Watchman is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance.

Xcode

The easiest way to install Xcode is via the Mac App Store. Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app.

If you have already installed Xcode on your system, make sure it is version 10 or newer.

Command Line Tools

You will also need to install the Xcode Command Line Tools. Open Xcode, then choose Settings... (or Preferences...) from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

Installing an iOS Simulator in Xcode

To install a simulator, open Xcode > Settings... (or Preferences...) and select the Platforms (or Components) tab. Select a simulator with the corresponding version of iOS you wish to use.

If you are using Xcode version 14.0 or greater than to install a simulator, open Xcode > Settings > Platforms tab, then click "+" icon and select iOS… option.

CocoaPods

CocoaPods is one of the dependency management system available for iOS. CocoaPods is a Ruby gem. You can install CocoaPods using the version of Ruby that ships with the latest version of macOS.

For more information, please visit CocoaPods Getting Started guide.

React Native Command Line Interface

React Native has a built-in command line interface. Rather than install and manage a specific version of the CLI globally, we recommend you access the current version at runtime using

npx react-native@latest init AwesomeProject

3, which ships with Node.js. With

npx react-native@latest init AwesomeProject

4, the current stable version of the CLI will be downloaded and executed at the time the command is run.

Creating a new application

If you previously installed a global

npx react-native@latest init AwesomeProject

5 package, please remove it as it may cause unexpected issues:

npm uninstall -g react-native-cli @react-native-community/cli

You can use React Native's built-in command line interface to generate a new project. Let's create a new React Native project called "AwesomeProject":

npx react-native@latest init AwesomeProject

This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Expo, or if you're adding iOS support to an existing React Native project (see Integration with Existing Apps). You can also use a third-party CLI to init your React Native app, such as Ignite CLI.

info

If you are having trouble with iOS, try to reinstall the dependencies by running:

1. npx [email protected] init AwesomeProject --version X.XX.X

   5 to navigate to the

   npx [email protected] init AwesomeProject --version X.XX.X

   6 folder.

2. npx [email protected] init AwesomeProject --version X.XX.X

   7 to install Bundler

3. npx [email protected] init AwesomeProject --version X.XX.X

   8 to install the iOS dependencies managed by CocoaPods.

[Optional] Using a specific version or template

If you want to start a new project with a specific React Native version, you can use the

npx react-native@latest init AwesomeProject

7 argument:

npx [email protected] init AwesomeProject --version X.XX.X

You can also start a project with a custom React Native template with the

npx react-native@latest init AwesomeProject

8 argument.

Note If the above command is failing, you may have old version of

brew install node brew install watchman

1 or

npx react-native@latest init AwesomeProject

5 installed globally on your pc. Try uninstalling the cli and run the cli using

npx react-native@latest init AwesomeProject

3.

[Optional] Configuring your environment

Starting from React Native version 0.69, it is possible to configure the Xcode environment using the

brew install node
brew install watchman

4 file provided by the template.

The

brew install node
brew install watchman

4 file contains an environment variable to export the path to the

brew install node
brew install watchman

6 executable in the

brew install node
brew install watchman

7 variable. This is the suggested approach to decouple the build infrastructure from the system version of

brew install node
brew install watchman

6. You should customize this variable with your own path or your own

brew install node
brew install watchman

6 version manager, if it differs from the default.

On top of this, it's possible to add any other environment variable and to source the

brew install node
brew install watchman

4 file in your build script phases. If you need to run script that requires some specific environment, this is the suggested approach: it allows to decouple the build phases from a specific environment.

info

If you are already using NVM (a command which helps you install and switch between versions of Node.js) and zsh, you might want to move the code that initialize NVM from your

npm uninstall -g react-native-cli @react-native-community/cli

4 into a

npm uninstall -g react-native-cli @react-native-community/cli

2 file to help Xcode find your Node executable:

brew tap homebrew/cask-versions
brew install --cask zulu17

# Get path to where cask was installed to double-click installer
brew info --cask zulu17

0

You might also want to ensure that all "shell script build phase" of your Xcode project, is using

npm uninstall -g react-native-cli @react-native-community/cli

3 as its shell.

Running your React Native application

Step 1: Start Metro

Metro is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder:

• npm
• Yarn

note

If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses Babel to transform syntax such as JSX into executable JavaScript.

Step 2: Start your application

Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:

• npm
• Yarn

You should see your new app running in the iOS Simulator shortly.

This is one way to run your app. You can also run it directly from within Xcode.

If you can't get this to work, see the Troubleshooting page.

Running on a device

The above command will automatically run your app on the iOS Simulator by default. If you want to run the app on an actual physical iOS device, please follow the instructions here.

Modifying your app

Now that you have successfully run the app, let's modify it.

• Open

  npx [email protected] init AwesomeProject --version X.XX.X

  0 in your text editor of choice and edit some lines.
• Hit Cmd ⌘ + R in your iOS Simulator to reload the app and see your changes!

That's it!

Congratulations! You've successfully run and modified your first React Native app.

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.

Target OS

• Android
• iOS

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, JDK

We recommend installing Node via Chocolatey, a popular package manager for Windows.

It is recommended to use an LTS version of Node. If you want to be able to switch between different versions, you might want to install Node via nvm-windows, a Node version manager for Windows.

React Native also requires Java SE Development Kit (JDK), which can be installed using Chocolatey as well.

Open an Administrator Command Prompt (right click Command Prompt and select "Run as Administrator"), then run the following command:

brew tap homebrew/cask-versions
brew install --cask zulu17

# Get path to where cask was installed to double-click installer
brew info --cask zulu17

1

If you have already installed Node on your system, make sure it is Node 18 or newer. If you already have a JDK on your system, we recommend JDK17. You may encounter problems using higher JDK versions.

You can find additional installation options on Node's Downloads page.

If you're using the latest version of Java Development Kit, you'll need to change the Gradle version of your project so it can recognize the JDK. You can do that by going to

npm uninstall -g react-native-cli @react-native-community/cli

5 and changing the

npm uninstall -g react-native-cli @react-native-community/cli

6 value to upgrade the Gradle version. You can check out here the latest releases of Gradle.

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:

• export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/platform-tools

  3

• export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/platform-tools

  4

• export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/platform-tools

  5
• If you are not already using Hyper-V:

  npx react-native@latest init AwesomeProject

  0 (See here for AMD or Hyper-V)

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

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

6 SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.

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

The SDK Manager can also be found within the Android Studio "Settings" dialog, under Languages & Frameworks → Android 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

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

6 entry, then make sure the following items are checked:

• export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/platform-tools

  8

• export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/platform-tools

  9 or

  npm uninstall -g react-native-cli @react-native-community/cli

  0

Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the

npx react-native@latest init AwesomeProject

6 entry, then make sure that

npm uninstall -g react-native-cli @react-native-community/cli

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

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... to create a new

   npx react-native@latest init AwesomeProject

   8 user variable that points to the path to your Android SDK:

The SDK is installed, by default, at the following location:

brew tap homebrew/cask-versions
brew install --cask zulu17

# Get path to where cask was installed to double-click installer
brew info --cask zulu17

2

You can find the actual location of the SDK in the Android Studio "Settings" dialog, under Languages & Frameworks → Android SDK.

Open a new Command Prompt window to ensure the new environment variable is loaded before proceeding to the next step.

1. Open powershell
2. Copy and paste Get-ChildItem -Path Env:\ into powershell
3. Verify

   npx react-native@latest init AwesomeProject

   8 has been added

4. Add platform-tools to Path

1. Open the Windows Control Panel.
2. Click on User Accounts, then click User Accounts again
3. Click on Change my environment variables
4. Select the Path variable.
5. Click Edit.
6. Click New and add the path to platform-tools to the list.

The default location for this folder is:

brew tap homebrew/cask-versions
brew install --cask zulu17

# Get path to where cask was installed to double-click installer
brew info --cask zulu17

3

React Native Command Line Interface

React Native has a built-in command line interface. Rather than install and manage a specific version of the CLI globally, we recommend you access the current version at runtime using

npx react-native@latest init AwesomeProject

3, which ships with Node.js. With

npx react-native@latest init AwesomeProject

4, the current stable version of the CLI will be downloaded and executed at the time the command is run.

Creating a new application

If you previously installed a global

npx react-native@latest init AwesomeProject

5 package, please remove it as it may cause unexpected issues:

npm uninstall -g react-native-cli @react-native-community/cli

React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using

npx react-native@latest init AwesomeProject

3, which ships with Node.js. Let's create a new React Native project called "AwesomeProject":

npx react-native@latest init AwesomeProject

This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Expo, or if you're adding Android support to an existing React Native project (see Integration with Existing Apps). You can also use a third-party CLI to init your React Native app, such as Ignite CLI.

[Optional] Using a specific version or template

If you want to start a new project with a specific React Native version, you can use the

npx react-native@latest init AwesomeProject

7 argument:

npx [email protected] init AwesomeProject --version X.XX.X

You can also start a project with a custom React Native template with the

npx react-native@latest init AwesomeProject

8 argument.

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

npx react-native@latest init AwesomeProject

9, 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:

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 Tiramisu API Level 33 image.

If you don't have HAXM installed, click on "Install HAXM" or follow these instructions to set it up, then 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, then proceed to the next step.

Running your React Native application

Step 1: Start Metro

Metro is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder:

• npm
• Yarn

note

If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses Babel to transform syntax such as JSX into executable JavaScript.

Step 2: Start your application

Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:

• npm
• Yarn

If everything is set up correctly, you should see your new app running in your Android emulator shortly.

This is one way to run your app - you can also run it directly from within Android Studio.

If you can't get this to work, see the Troubleshooting page.

Modifying your app

Now that you have successfully run the app, let's modify it.

• Open

  npx [email protected] init AwesomeProject --version X.XX.X

  0 in your text editor of choice and edit some lines.
• Press the R key twice or select

  npx [email protected] init AwesomeProject --version X.XX.X

  1 from the Dev Menu (Ctrl + M) to see your changes!

That's it!

Congratulations! You've successfully run and modified your first React Native app.

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.

Unsupported

A Mac is required to build projects with native code for iOS. You can follow the Expo Go Quickstart to learn how to build your app using Expo instead.