Creating Your First React Native App

We will create a simple React Native application that displays a welcome message on the mobile screen.

My First App
      ↓
Hello React Native!

The goal is to understand the basic React Native project workflow before building more advanced applications.

Before creating the application, check whether Node.js is installed.

node --version

If a version number is displayed, Node.js is available in the terminal.

Next, check whether npm is available.

npm --version

npm is used to manage the packages required by the React Native project.

Open a terminal and use the Expo project creation command.

npx create-expo-app@latest my-first-app

Here, my-first-app is the name of our project.

When the command runs, the project creation tool prepares a new React Native application.

npx create-expo-app@latest my-first-app
                    ↓
              Create Project
                    ↓
             React Native App

The generated project contains the files and dependencies needed to start development.

After creating the project, move into the project directory.

cd my-first-app

All project commands should normally be executed from the project directory.

You can open the project in Visual Studio Code using:

code .

The dot means that VS Code should open the current directory.

If required, install the project dependencies using:

npm install

npm reads the project configuration and installs the required packages.

Start the Expo development server with:

npx expo start

The terminal will display information about the running development server and available ways to open the application.

The development server provides the environment needed to develop and test the application.

It can provide options for opening the application on a physical device, emulator or other supported development environment.

You can test a compatible Expo project on a physical mobile device.

For many learning projects, Expo Go can provide a convenient way to open the application during development.

If an Android development environment and emulator are configured, the application can be tested on a virtual Android device.

Android Studio provides the tools required to create and manage Android virtual devices.

The generated project contains starter application code.

You can replace the starter interface with your own React Native components.

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

export default function App() {
    return (
        <View>
            <Text>Hello React Native!</Text>
        </View>
    );
}

The View and Text components can be imported from react-native.

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

View can be used as a container, while Text displays text.

The App component can represent the main component of our application.

export default function App() {
    return (
        <View>
            <Text>Hello React Native!</Text>
        </View>
    );
}

The component returns the interface that should be displayed.

We can use StyleSheet to organize the application's styles.

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

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
    }
});

We can apply the style to our View component.

export default function App() {
    return (
        <View style={styles.container}>
            <Text>Hello React Native!</Text>
        </View>
    );
}

The content will be positioned in the center of the available screen.

Multiple Text components can be placed inside the View.

<View style={styles.container}>

    <Text>Welcome to React Native</Text>

    <Text>
        My First Mobile App
    </Text>

</View>

The Pressable component can be used to create an interactive area.

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

<Pressable
    onPress={() => alert("Hello!")}
>
    <Text>Press Me</Text>
</Pressable>

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

export default function App() {

    function showMessage() {
        alert("Welcome to React Native!");
    }

    return (
        <View style={styles.container}>

            <Text style={styles.title}>
                My First React Native App
            </Text>

            <Text>
                Welcome to Soopro Pathshala
            </Text>

            <Pressable
                style={styles.button}
                onPress={showMessage}
            >

                <Text style={styles.buttonText}>
                    Press Me
                </Text>

            </Pressable>

        </View>
    );
}

const styles = StyleSheet.create({

    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        padding: 20
    },

    title: {
        fontSize: 24,
        fontWeight: "bold",
        marginBottom: 15
    },

    button: {
        marginTop: 20,
        padding: 15,
        borderRadius: 8,
        backgroundColor: "blue"
    },

    buttonText: {
        color: "white",
        fontSize: 16
    }

});

App Component
      ↓
     View
      ↓
 ┌────┴─────────┐
 ↓              ↓
Text         Pressable
                 ↓
              onPress
                 ↓
          JavaScript Function

This simple application already demonstrates components, styling, events and JavaScript functions.

After changing your code, save the file in VS Code.

When Fast Refresh is available, many changes can appear automatically in the running application.

This allows you to quickly test changes while developing.

Press the button displayed in the application.

Press Me
   ↓
onPress
   ↓
showMessage()
   ↓
Alert Message

This demonstrates how user interaction can trigger JavaScript logic.

A newly created Expo project contains configuration files, source files, dependencies and assets.

my-first-app/
├── app/
├── assets/
├── node_modules/
├── package.json
├── app.json
└── ...

The exact files depend on the project template and Expo version.

The package.json file can contain scripts used to run the project.

{
    "scripts": {
        "start": "expo start"
    }
}

The exact scripts depend on the project template.

If the terminal reports that a command is not recognized, first check that Node.js is installed correctly.

node --version
npm --version

Also make sure you are using a new terminal after installing Node.js.

React Native commands should normally be run from the project folder.

cd my-first-app

npx expo start

If the terminal is in another directory, the expected project files may not be found.

If your changes do not appear immediately:

• Save the file.
• Check the terminal for errors.
• Check the application console.
• Restart the development server if necessary.
• Verify that you edited the correct project file.

Check Node.js
      ↓
Create Expo Project
      ↓
Open Project
      ↓
Install Dependencies
      ↓
Start Expo
      ↓
Create Components
      ↓
Add Styles
      ↓
Add Events
      ↓
Test App
      ↓
Fix Errors

Here is a simple complete application that combines the main concepts learned in this lesson:

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

export default function App() {

    const handlePress = () => {
        alert("Button Pressed!");
    };

    return (
        <View style={styles.container}>

            <Text style={styles.title}>
                Welcome to React Native
            </Text>

            <Text style={styles.subtitle}>
                My First Mobile Application
            </Text>

            <Pressable
                style={styles.button}
                onPress={handlePress}
            >

                <Text style={styles.buttonText}>
                    Click Me
                </Text>

            </Pressable>

        </View>
    );
}

const styles = StyleSheet.create({

    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        padding: 20
    },

    title: {
        fontSize: 26,
        fontWeight: "bold",
        textAlign: "center"
    },

    subtitle: {
        marginTop: 10,
        fontSize: 16,
        textAlign: "center"
    },

    button: {
        marginTop: 25,
        paddingVertical: 12,
        paddingHorizontal: 25,
        borderRadius: 8,
        backgroundColor: "blue"
    },

    buttonText: {
        color: "white",
        fontSize: 16,
        fontWeight: "bold"
    }

});

You have now created a basic React Native application with a screen, text, styling and an interactive button.