Guides
Plan-enterprise-icon
Expo Application Services
API Reference

Introduction

We're about to embark on a journey of building universal apps. In this tutorial, we'll create a universal app that runs on Android, iOS, and the 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 Expo App
  • 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 will provide a good foundation for learning the fundamentals of building a mobile app. The tutorial is self-paced and can take two to three hours to complete.
To keep it beginner friendly, we divided the tutorial into eight chapters so that you can follow along or put it down and come back to it later. Each chapter also contains all the necessary code so that you can follow along by creating an app from scratch or using Snack examples to copy and paste the code if you get lost.
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:

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 the app by creating the app from scratch.
Throughout the tutorial, any important code or code that has changed between examples will be highlighted in yellow. You can hover over the highlights (on desktop) or tap them (on mobile) to see more context on the change. For example, the code highlighted in the snippet below explains what it does:
Hello world
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',
  },
});
Info-icon
Wait, what is this "Open in Snack" button?
Snack is a web-based editor that works similarly to an Expo project. It's a great way to share code snippets and experiment without downloading any tools on your computer.
Go ahead, press the above button. You will see the above code running in a Snack. Try to switch between iOS, Android, or the web tabs. You can also open it on your device in the Expo Go app from the My device tab.
Throughout this tutorial, use Snack to copy and paste the code into your own project on your computer. We will continue to provide Snacks for each module, but we recommend you create the app on your machine to go through the experience of building the app.

Up next

If you're already familiar with Expo, feel free to jump ahead to specific chapters. However, if you'd like to start from scratch, continue to the next chapter in which we will learn how to create your first app with Expo.
  • Message-iconAsk a question on the forums
  • Edit-iconEdit this page

Was this doc helpful?