What are the steps to create first React Native App ?

React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, etc. We’re always looking for shorter development cycles, quicker time to deployment, and better app performance. And there are so many hybrid mobile frameworks such as NativeScript, React Native, Ionic, Xamarin, PhoneGap, etc.

React Native: It is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UIs for both platforms.

Building with React Native is extremely efficient and highly addictive, but getting started can be a little tricky. React Native uses Node.js, a JavaScript runtime, to build your JavaScript code. If you don’t already have Node.js installed, it’s time to get it!

Installation: Here we will use the Expo CLI version which makes it much smoother to run your React Native applications. Follow the below steps one by one to set up your React native environment.

Expo: It is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase.

There are many ways to create a React Native app, but we will discuss a couple of ways in this article.

Note: If you wish to create a project in JavaScript, follow Method 1. For a TypeScript project, use Method 2.

Step-by-Step Implementation

Step 1: Create a React Native Project

Open your terminal and run the command below.

- Method 1: Using create-expo-app using template

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.

- Method 2: Using create-expo-app

npx create-expo-app@latest project-name

Result of Method 1 and Method 2:

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now, go into the created folder and start the server by using the following command.

cd "project-name"

Step 2: Reset-Project (Only for Method 2)

We need to reset the project to the above boilerplate code. For that, run the below command.

npm run reset-project

You will be prompted to move the existing file to the `/app-example` directory instead of deleting it. If you wish to keep that file, type 'y' and press Enter. This process will not delete the existing code; instead, it will transfer all the boilerplate code to the `app-example` folder, as shown in the image below.

Step 3: Run the app

To start the react-native program, execute this command in the terminal of the project folder.

npx expo start

Then, the application will display a QR code.

• For Android users, download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.
• For iOS users, simply scan the QR code using the Camera app.
• If you're using a web browser, it will provide a local host link that you can use as mentioned in below image.

Output of Method 1:

Output of Method 2:

Example: In this example, we render a text and put some style on the text, like text color and background color.

Note: Whether you are using method 1 or method 2, you can use below code.

App.js | App/index.tsx:

import { Text, View, StyleSheet } from "react-native";

export default function Index() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>GeeksforGeeks</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#008000',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: '#FFFFFF',
  },
});

Output of Method 1:

Output of Method 2: