pages/tutorial/introduction.mdx

---
title: Introduction
---

import Highlight from '~/components/plugins/Highlight';
import { SnackInline } from '~/ui/components/Snippet';
import Video from '~/components/plugins/Video';

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:

<Video file="tutorial/final.mp4" />

## How to use this tutorial

We believe in [learning by doing](https://en.wikipedia.org/wiki/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 <Highlight>highlighted in yellow</Highlight>. 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:

<SnackInline label="Hello world">

{/* prettier-ignore */}
```jsx
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      /* @info This used to say, "Open up App.js to start working on your app!". Now it's "Hello world!". */<Text>Hello world!</Text>/* @end */
    </View>
  );
}

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

</SnackInline>

> **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](/tutorial/create-your-first-app/).