Getting Started With React Native: Installation & Setup

Mohammad Ali — Sun, 16 Jun 2024 15:26:37 +0000

React Native is a popular framework for building mobile applications using JavaScript and React. In this guide, we'll walk you through the steps to get started with React Native, including installation, environment setup, and project initialization. Today I will cover only Windows Setup!

Prerquisites

1. Installation

First of all, we need to install JDK (Java Development Kit) and Android Studio on our machine.

JDK Install: Open an Administrator Command Prompt (right-click Command Prompt and select "Run as Administrator"), then run the following command:

choco install -y microsoft-openjdk17

Android Studio Installation: There are lots of versions of Android Studio. You may download a suitable version of your PC requirements. After Installation make sure you have downloaded these or relevant dependencies.
Android SDK Platform 34
Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the Android SDK Build-Tools entry, then make sure that 34.0.0 is selected.

Finally, click "Apply" to download and install the Android SDK and related build tools.

2. Environment Setup

The React Native tools require some environment variables to be set up to build apps with native code.

1. Configure the ANDROID_HOME environment variable

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:

2. 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.

C:\Users\username\AppData\Local\Android\Sdk\platform-tools

We will need an Android device to run our 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.

Either way, you will need to prepare the device to run Android apps for development.

3. Create a New React Native Project

Once the development environment is set up, you can create a new React Native project using the React Native CLI:

npx react-native init MyReactNativeApp

This command creates a new directory called MyReactNativeApp with all the necessary files and dependencies.

Navigate to your project directory:

cd MyReactNativeApp

React Navigation Native Stack Setup (optional)
If you don't want to implement React Navigation, you may skip this part.

React Navigation is the most popular library for Routing and navigation for Expo and React Native apps. Run the below command to work with React Navigation.

npm install @react-navigation/native @react-navigation/native-stack

npm install react-native-screens react-native-safe-area-context

react-native-screens package requires one additional configuration step to properly work on Android devices. Edit MainActivity.kt or MainActivity.java file which is located under android/app/src/main/java/<your package name>/.

Add the highlighted code to the body of the MainActivity class:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(null)
}

and make sure to add the following import statement at the top of this file below your package statement:

import android.os.Bundle;

This change is required to avoid crashes related to View state being not persisted consistently across Activity restarts.

Now, we need to wrap the whole app in NavigationContainer. Usually, you'd do this in your entry file, such as index.js or App.js:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

If you want to use the Native stack follow code block below to setup the native stack:

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Notifications" component={Notifications} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

4. Run the project

If all the setup is done, then it's time to see some magic by running the project. Open the terminal and run the below command:

npx react-native run-android

Conclusion

You now have a basic React Native setup ready for development. From here, you can start building your mobile application using React Native. Happy coding!

Note:

I am not a React Native Expert. Still, If you have any questions or run into any issues or if there are any corrections, feel free to leave a comment below.

About the Author:

I am Mohammad Ali, a Full Stack Developer (MERN). You can connect with me and see my work through the following links:

Feel free to reach out for any collaborations or inquiries. Happy coding!

DEV Community: Mohammad Ali