React Native is a popular framework for building mobile applications using JavaScript and React. This guide will walk you through setting up your development environment on your local machine. Whether you're on macOS, Windows, or Linux, follow these steps to get started!
๐ Prerequisites
Before you begin, ensure you have the following installed:
1) Node.js: React Native requires Node.js, which you can download from Node.js official website.
2) Watchman (for macOS users): Watchman watches files and triggers actions when they change. Install it using Homebrew.
brew install watchman
3) JDK (Java Development Kit): Required for Android development. Install the JDK by downloading it from Oracle's website.
๐ Step 1: Installing React Native CLI
To create a new React Native project, you'll need to install the React Native CLI globally on your machine.
npm install -g react-native-cli
๐ฑ Step 2: Setting Up Your Development Environment
macOS Users (iOS and Android Development)
1.Install Xcode: Download Xcode from the Mac App Store.
Open Xcode and go to
Preferences
>Locations
to set the Command Line Tools to Xcode.Install Xcode Command Line Tools if prompted.
2.Install Android Studio: Download Android Studio from here.
Follow the setup wizard to install Android SDK, Android SDK Platform-Tools, and Android SDK Build-Tools.
Open
Android Studio
>Preferences
>Appearance
&Behavior
>System Settings
>Android SDK and install
the latest Android SDK.
3.Configure the ANDROID_HOME environment variable:
Add the following lines to your~/.bash_profile
or~/.zshrc
file:
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
Apply the changes:
source ~/.bash_profile
Windows Users (Android Development)
1) Install Chocolatey: Chocolatey is a package manager for Windows. Install it by running the following command in Command Prompt:
Set-ExecutionPolicy Bypass -Scope Process -Force; `
[System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; `
iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
Install Node.js, Python2, and JDK:
choco install -y nodejs.install python2 openjdk11
3) Install Android Studio: Download Android Studio from here.
Follow the setup wizard to install Android SDK, Android SDK Platform-Tools, and Android SDK Build-Tools.
Open
Android Studio
>Preferences
>Appearance
&Behavior
>System Settings
>Android SDK and install
the latest Android SDK.
4) Configure the ANDROID_HOME environment variable:
Open System Properties
> Environment Variables
.
Create a new variable named ANDROID_HOME and set it to the path of your Android SDK, typically C:\Users<Your-Username>\AppData\Local\Android\Sdk.
Add %ANDROID_HOME%\platform-tools to the Path variable in the Environment Variables section.
๐ Step 3: Creating a New React Native Project
Now that your environment is set up, create a new React Native project:
npx react-native init MyNewProject
cd MyNewProject
โถ๏ธ Step 4: Running Your React Native App iOS (macOS only)
To run the app on an iOS simulator:
npx react-native run-ios
Android (macOS, Windows, and Linux)
To run the app on an Android emulator:
1) Launch the Android emulator:
emulator -avd <emulator-name>
2) Run the React Native app:
npx react-native run-android
shop Link : https://buymeacoffee.com/pratik1110r/extras
LinkedIn : https://www.linkedin.com/in/pratik-tamhane-583023217/
Behance : https://www.behance.net/pratiktamhane