Getting Started With React Native: Installation & Setup

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

• Chocolatey
• Node JS

---

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:

• Portfolio
• LinkedIn
• GitHub

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