How to Use Expo in React Native: Quick Start Guide

To use Expo in React Native, first install the expo-cli tool, then create a new project with expo init. You can run your app on a device or emulator using expo start, which opens a development server and QR code for easy testing.

Syntax

Using Expo in React Native involves a few simple commands:

• npm install -g expo-cli: Installs the Expo command line tool globally.
• expo init ProjectName: Creates a new React Native project with Expo.
• cd ProjectName: Moves into your project folder.
• expo start: Starts the development server and opens the Expo Dev Tools.

These commands let you create, run, and test your React Native app easily.

bash

npm install -g expo-cli
expo init MyApp
cd MyApp
expo start

Output

Starting project at /path/to/MyApp
Expo Dev Tools is running at http://localhost:19002
Scan the QR code with Expo Go app to run on your device.

Example

This example shows a simple React Native app created with Expo that displays a welcome message.

javascript

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

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

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

Output

A white screen with centered text: "Welcome to Expo in React Native!"

Common Pitfalls

Some common mistakes when using Expo include:

• Not installing expo-cli globally before starting.
• Trying to run react-native run-android or react-native run-ios commands instead of expo start.
• Forgetting to install the Expo Go app on your mobile device to scan the QR code.
• Modifying native code which Expo managed workflow does not support directly.

Always use expo start to run your app and test on devices or simulators.

bash

/* Wrong way: Trying to run native commands in Expo project */
// react-native run-android

/* Right way: Use Expo CLI to start */
// expo start

Quick Reference

Here is a quick cheat sheet for using Expo with React Native:

Command	Purpose
npm install -g expo-cli	Install Expo CLI globally
expo init ProjectName	Create a new Expo React Native project
cd ProjectName	Navigate to project folder
expo start	Start development server and open Expo Dev Tools
Scan QR code with Expo Go	Run app on physical device
Press 'a' or 'i' in terminal	Open Android or iOS simulator

Key Takeaways

Install Expo CLI globally to start using Expo in React Native.

Use 'expo init' to create a new project and 'expo start' to run it.

Test your app easily on devices using the Expo Go app and QR code.

Avoid running native commands directly in Expo managed projects.

Expo simplifies React Native development with minimal setup.