React Native is a popular framework for creating native mobile applications using JavaScript, based on the ReactJS library. While React Native shares similarities with ReactJS, it has distinct differences specific to mobile app development.
To properly install React Native, you can follow this guide that covers everything you need to get started. The framework supports building apps for devices running iOS 17.6 and Android 15.0 (API level 35) or later
Step 1: Install Node.js
Install the latest version of the node.js here.Nodejs LTS Version is recommended.
Next,you must check whether node.js >= 18.8 or newer is installed on your computer, To check the version:
node -version
on the command prompt. The above command is used in both Windows and Linux.
Step 2: Install JDK(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.
Then, Check Java Version:
java -version
Step 3: Setup Android development environment
Configuring your development environment can be a bit challenging if you're new to Android development. Even if you have experience, there might still be some settings you'll need to adjust. In both situations, it's important to follow the upcoming steps closely to ensure everything is set up correctly.
Install Android Studio
Download and install Android Studio. During the installation process, ensure that all the checkboxes next to the following items are selected.
Android SDK
Android SDK Platform
Android Virtual Device
React Native requires Android 14. (UpsideDownCake) SDK to be installed. To check the SDK version follow the following:
Open Android Studio > More Actions > SDK Manager > Android SDK > SDK Platforms > Make sure to select Android 14.0 (UpsideDownCake)
Then,Move to next Tab,
SDK Tools > Android SDK Build-Tools 35 > Make sure to select 34.0.0
Note: If you are on Linux, you have to select Android SDK Command Line tools (latest) under SKD Tools
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.
Open the Windows Control Panel. Click on User Accounts, then click User Accounts again Click on Change my environment variables Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:
The SDK is installed, by default, at the following location:
%LOCALAPPDATA%\Android\Sdk
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.
Open powershell Copy and paste Get-ChildItem -Path Env:\ into powershell Verify ANDROID_HOME has been added
Add platform-tools to Path
Open the Windows Control Panel. Click on User Accounts, then click User Accounts again Click on Change my environment variables Select the Path variable. Click Edit. Click New and add the path to platform-tools to the list.
The default location for this folder is:
%LOCALAPPDATA%\Android\Sdk\platform-tools
Note For Linux:
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
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
Step 4: 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.
A) Using a physical device (Click Here To SetUp)
B) Using a virtual device.
Step 5: Create your First React Native Project
If you ever installed react-native-cli globally, I recommend you to uninstall that, because instead of installing and managing react native cli specific version globally on your pc, you can create the project in the latest version at runtime using npx.
If you previously installed a global react-native-cli package, please remove it as it may cause unexpected issues. To uninstall the react-native-cli:
npm uninstall -g react-native-cli @react-native-community/cli
Now let's create a project AwesomeProject:
npx react-native@latest init AwesomeProject
Now your project is created with a default template. Run your project using:
npm start
npm run android
This will start the metro development server for your project. Make sure to connect your mobile or start the virtual device.
Top comments (0)