Expo Tutorial: Introduction

An introduction to a tutorial on how to build a universal app that runs on Android, iOS and the web using Expo.

We're about to embark on a journey of building universal apps. In this tutorial, we'll create an Expo app that runs on Android, iOS, and web; all with a single codebase. Let's get started!

About this tutorial

The objective of this tutorial is to get started with Expo and become familiar with the Expo SDK. It'll cover the following topics:

• Create an app using the default template with TypeScript enabled
• Implement a two-screen bottom tabs layout with Expo Router
• Break down the app layout and implement it with flexbox
• Use each platform's system UI to select an image from the media library
• Create a sticker modal using the <Modal> and <FlatList> components from React Native
• Add touch gestures to interact with a sticker
• Use third-party libraries to capture a screenshot and save it to the disk
• Handle platform differences between Android, iOS, and web
• Finally, go through the process of configuring a status bar, a splash screen, and an icon to complete the app

These topics provide a foundation to learn the fundamentals of building an Expo app. The tutorial is self-paced and can take up to two hours to complete.

To keep it beginner friendly, we divided the tutorial into nine chapters so that you can follow along or put it down and come back to it later. Each chapter contains the necessary code snippets to complete the steps, so you can follow along by creating an app from scratch or copy and paste it.

Before we get started, take a look at what we'll build. It's an app named StickerSmash that runs on Android, iOS, and the web:

The complete source code for this tutorial is available on GitHub.

How to use this tutorial

We believe in learning by doing, so this tutorial emphasizes doing over explaining. You can follow along the journey of building an app by creating the app from scratch.

Throughout the tutorial, any important code or code that has changed between examples will be highlighted in green. You can hover over the highlights (on desktop) or tap them (on mobile) to learn more about the change. For example, the code highlighted in the snippet below explains what it does:

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

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

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

Next step

We're ready to start building our app.