Getting Started with React Native: Installation Guide For Windows & Linux

Ashutosh — Mon, 30 Sep 2024 19:36:50 +0000

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.

Mastering React Native Project Structure

Ashutosh — Fri, 20 Sep 2024 19:21:02 +0000

The organization of a React Native project often depends on personal choices and the specific demands of the application. That said, the structure outlined below is a commonly favored approach:

android

This folder contains the Android project files, such as Gradle configurations and native Android code. It is generated when the project is initialized for Android.

ios

It contains native iOS code and configurations. It includes the Xcode project, build files, and resources required for iOS-specific functionality.

node_modules

This folder stores all the dependencies and libraries installed through npm or yarn.

tests

This folder is commonly used to contain unit tests or integration tests for the application.

app.json

This file in a React Native project serves as a configuration file that contains essential metadata and settings for the app.

AppPro.tsx

its purpose depends on the specific project or naming convention used by the development team.

App.tsx or App.jsx

The main entry point of the app, defining the app's core component structure and setup.

babel.config.js

Configures Babel, the JavaScript compiler used to transpile modern JavaScript into a version compatible with older platforms.

index.js

The root file that registers the app for rendering, linking the App.js file to the underlying platform.

jest.config.js

This file is used to configure Jest, which is a testing framework commonly used for running tests. Jest is widely adopted for unit testing, integration testing, and snapshot testing in JavaScript projects, including React Native applications.

metro.config.js

Configuration file for Metro, the JavaScript bundler that React Native uses.

package.json

Lists the project dependencies and scripts for building, running, or testing the app.

package-lock.json

The package-lock.json file is crucial for managing dependencies in JavaScript projects, including those using React Native.

tsconfig.json

The tsconfig.json file is used in TypeScript projects to configure the behavior of the TypeScript compiler (tsc). This file defines various compiler options, file inclusions, and exclusions to control how TypeScript code is compiled to JavaScript.

AwesomeProject/
│
├── node_modules/
├── ios/
├── android/
├── app/
│   ├── components/
│   ├── screens/
│   ├── navigation/
│   ├── assets/
│   ├── styles/
│   ├── services/
│   ├── utils/
│   └── App.js
├── package.json
├── index.js
├── .gitignore
├── babel.config.js
└── metro.config.js

Keep in mind that this structure is flexible and can be adjusted according to your project’s unique requirements. What’s most important is to keep your project well-organized and maintain clear boundaries between different components or layers. This approach will help ensure that your project remains scalable and easy to maintain as it grows.

DEV Community: Ashutosh