Steps to create first React Native App

React Native is an open-source framework by Meta (Facebook) for building native mobile apps using JavaScript and a single codebase.

• Supports iOS, Android, and other platforms.
• Enables faster development and quicker deployment.
• Delivers near-native performance with reusable components.

Prerequisites

Before starting with React Native development using Expo, ensure the following requirements are met:

• Node.js installed.
• npm or Yarn package manager.
• Basic knowledge of JavaScript and React.
• Expo Go app installed on your mobile device (for testing).

Expo

Expo is a framework and platform built on top of React Native that simplifies building, running, and deploying apps across multiple platforms using a single codebase.

• Built around React Native for faster development.
• Supports iOS, Android, and web apps.
• Provides tools and services for development, build, and deployment.

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

Select the blank template to generate a minimal React Native project setup.

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

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)

Reset the project to the default boilerplate by running the command below.

npm run reset-project

• The CLI prompts to preserve existing project files.
• Selecting y moves the current boilerplate to the /app-example directory.
• This operation performs a file relocation, not deletion, ensuring code safety.

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.

• Android: Install Expo Go from the Play Store, open the app, tap Scan QR Code, and scan the QR to run the app on your device.
• iOS: Scan the QR code directly using the Camera app to launch the app.
• Web: A localhost URL is provided to run the app in the browser.

Output of Method 1:

Output of Method 2:

Example: We will render a text and put some style on the text, like text color and background color.

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',
  },
});

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

Output of Method 1:

Output of Method 2: