๐Ÿš€ Setting Up Your React Native Development Environment

Pratik Tamhane - Sep 3 - - Dev Community

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

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

๐Ÿ“ฑ 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

Enter fullscreen mode Exit fullscreen mode

Apply the changes:

source ~/.bash_profile

Enter fullscreen mode Exit fullscreen mode

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'))

Enter fullscreen mode Exit fullscreen mode

Install Node.js, Python2, and JDK:

choco install -y nodejs.install python2 openjdk11
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

โ–ถ๏ธ Step 4: Running Your React Native App iOS (macOS only)

To run the app on an iOS simulator:

npx react-native run-ios

Enter fullscreen mode Exit fullscreen mode

Android (macOS, Windows, and Linux)

To run the app on an Android emulator:

1) Launch the Android emulator:

emulator -avd <emulator-name>

Enter fullscreen mode Exit fullscreen mode

2) Run the React Native app:

npx react-native run-android

Enter fullscreen mode Exit fullscreen mode

shop Link : https://buymeacoffee.com/pratik1110r/extras

LinkedIn : https://www.linkedin.com/in/pratik-tamhane-583023217/

Behance : https://www.behance.net/pratiktamhane

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .