Getting Started With React Native: Installation & Setup
Tags: reactnative, react, android, javascript
Published: 2024-06-16 15:26:37

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](https://chocolatey.org/install)
- [Node JS](https://nodejs.org)

---

## 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:
``` powershell
choco install -y microsoft-openjdk17
```
- **Android Studio Installation:** There are lots of versions of [Android Studio](https://developer.android.com/studio/index.html). 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 Account**s 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:

![Environment Variable Setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x5qgtzsp0z6iumov75mb.png)

**2. Add platform-tools to Path**

- Open the **Windows Control Panel**
- Click on **User Accounts**, then click **User Account**s 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:

``` powershell
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:

``` powershell
cd MyReactNativeApp
```

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

[React Navigation](https://reactnavigation.org) is the most popular library for Routing and navigation for `Expo` and `React Native` apps. Run the below command to work with React Navigation.

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

``` powershell
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:

``` kotlin
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:

``` kotlin
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:

``` typescript
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:

``` typescript
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:

``` powershell
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](https://itsproali.me/)
- [LinkedIn](https://www.linkedin.com/in/itsproali/)
- [GitHub](https://www.github.com/itsproali/)

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