1. Home
  2. REACT NATIVE
  3. How to create a new React Native project with Expo CLI
REACT NATIVE

How to create a new React Native project with Expo CLI

  • BY Cynthia
  • August 1, 2024
  • 82 Views

Creating a new React Native project can be a daunting task, especially if you’re new to the ecosystem. Expo CLI simplifies this process significantly by providing a set of tools that streamline the setup and development of React Native applications. In this blog post, we’ll walk you through the steps to create a new React Native project using Expo CLI.

Prerequisites

Before we start, make sure you have the following installed on your machine:

  1. Node.js: You can download and install Node.js from nodejs.org.
  2. Expo CLI: You can install Expo CLI globally using npm (which comes with Node.js) or yarn.
   npm install -g expo-cli
  1. Expo Go app: This app allows you to run your React Native projects on a physical device. It is available on both Google Play Store and Apple App Store.

Steps to Create a New React Native Project with Expo CLI

Step 1: Create a New Project

Open your terminal and run the following command to create a new project:

expo init MyNewProject

You will be prompted to choose a template. For beginners, we recommend starting with the “blank” template:

? Choose a template: (Use arrow keys)
  ----- Managed workflow -----
❯ blank                 a minimal app as clean as an empty canvas
  blank (TypeScript)    same as blank but with TypeScript configuration
  tabs (TypeScript)     several example screens and tabs using react-navigation and TypeScript
  ----- Bare workflow -----
  minimal               bare and minimal, just the essentials to get you started

After selecting a template, Expo CLI will set up your project. This might take a few minutes as it installs the necessary dependencies.

Step 2: Navigate to Your Project Directory

Once the project is created, navigate into your project directory:

cd MyNewProject

Step 3: Start the Development Server

Run the following command to start the development server:

expo start

This command will open a new browser window with the Expo DevTools. The DevTools provide a dashboard where you can manage your project, view logs, and access other development tools.

Step 4: Run Your Project on a Device or Emulator

On a Physical Device

  1. Open the Expo Go app on your Android or iOS device.
  2. Scan the QR code displayed in the terminal or Expo DevTools. Your app should load on your device.

On an Emulator

If you prefer to use an emulator, you need to have Android Studio or Xcode installed on your machine. Here are the basic steps for each:

For Android:
  1. Open Android Studio and start an Android Virtual Device (AVD).
  2. In the Expo DevTools, click on “Run on Android device/emulator.”
For iOS:
  1. Open Xcode and start an iOS simulator.
  2. In the Expo DevTools, click on “Run on iOS simulator.”

Step 5: Edit Your Project

Now that your project is running, you can start editing the code. Open the project in your favorite code editor (we recommend Visual Studio Code).

The entry point for your app is the App.js file located in the root directory. Open this file and start making changes. The app will automatically reload with your changes thanks to Expo’s hot reloading feature.

Here’s an example of a simple modification to the App.js file:

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

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

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

Conclusion

Creating a new React Native project with Expo CLI is a straightforward process that involves setting up a project, starting the development server, and running the project on a device or emulator. Expo CLI simplifies many of the complexities associated with React Native development, making it an excellent choice for both beginners and experienced developers.

With your new project set up, you can now focus on building your app. Explore the various features and tools Expo provides to enhance your development workflow. Happy coding!

en_USEnglish
en_USEnglish