Create an App with Expo (React Native)

by
Tiempo de lectura: 2 minutos

Reading time: 2 minutes

Hello! In this tutorial, I will show you how to create a mobile application with Expo.

Expo is a mobile app development platform that allows developers to quickly create mobile applications using React Native. Expo provides tools to simplify mobile app development, such as a set of pre-built components, an API for accessing mobile device features, and a platform for sharing your app with others.

Step 1: Install Expo CLI

To get started, we need to install Expo CLI on our system. To do this, open the terminal and run the following command:

npm install -g expo-cli

This command will install Expo CLI globally on your system.

Step 2: Create a New Expo Project

Once we have installed Expo CLI, we can create a new Expo project. To do this, run the following command in the terminal:

expo init MyNewApp

This command will create a new Expo project named “MyNewApp” in your current directory. Note that the project creation may take a few minutes.

Step 3: Run the App in the Emulator

Once the project has been created, we can run our app in the emulator. To do this, we first need to open an Android or iOS emulator. You can do this using Android Studio or Xcode.

After opening the emulator, navigate to the project directory and run the following command:

expo start

This command will start the Expo development server and open a browser window showing the Metro Bundler. From here, you can select the emulator on which you want to run the app.

Step 4: Edit the Source Code

Now that we have created a new Expo project and ran it in the emulator, we can start editing the source code. Open the App.js file in your favorite code editor and replace its contents with the following code:

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

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

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

This code imports the necessary React Native libraries and defines a component function called “App” that returns a view component and a text component. The view component is used for styling, and the text component is used to display the message “Hello, world!”

Step 5: Run the Updated App

Once we have edited the source code, we can rebuild the app and run it in the emulator. To do this, simply go back to the terminal and run the same command you used before:

expo start

Then, select the emulator on which you want to run the app.

That’s it! Now you should see a blank screen with the message “Hello, world!” on the emulator you selected. You can continue editing the source code and exploring Expo’s tools to build your mobile application.

Post Views: 7

Leave a Comment