🚀 Setting Up Your React Native Development Environment

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 st…


This content originally appeared on DEV Community and was authored by Pratik Tamhane

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


This content originally appeared on DEV Community and was authored by Pratik Tamhane


Print Share Comment Cite Upload Translate Updates
APA

Pratik Tamhane | Sciencx (2024-09-03T16:04:41+00:00) 🚀 Setting Up Your React Native Development Environment. Retrieved from https://www.scien.cx/2024/09/03/%f0%9f%9a%80-setting-up-your-react-native-development-environment/

MLA
" » 🚀 Setting Up Your React Native Development Environment." Pratik Tamhane | Sciencx - Tuesday September 3, 2024, https://www.scien.cx/2024/09/03/%f0%9f%9a%80-setting-up-your-react-native-development-environment/
HARVARD
Pratik Tamhane | Sciencx Tuesday September 3, 2024 » 🚀 Setting Up Your React Native Development Environment., viewed ,<https://www.scien.cx/2024/09/03/%f0%9f%9a%80-setting-up-your-react-native-development-environment/>
VANCOUVER
Pratik Tamhane | Sciencx - » 🚀 Setting Up Your React Native Development Environment. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/03/%f0%9f%9a%80-setting-up-your-react-native-development-environment/
CHICAGO
" » 🚀 Setting Up Your React Native Development Environment." Pratik Tamhane | Sciencx - Accessed . https://www.scien.cx/2024/09/03/%f0%9f%9a%80-setting-up-your-react-native-development-environment/
IEEE
" » 🚀 Setting Up Your React Native Development Environment." Pratik Tamhane | Sciencx [Online]. Available: https://www.scien.cx/2024/09/03/%f0%9f%9a%80-setting-up-your-react-native-development-environment/. [Accessed: ]
rf:citation
» 🚀 Setting Up Your React Native Development Environment | Pratik Tamhane | Sciencx | https://www.scien.cx/2024/09/03/%f0%9f%9a%80-setting-up-your-react-native-development-environment/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts