1--- 2title: 'Tutorial: Introduction' 3sidebar_title: Introduction 4--- 5 6import Highlight from '~/components/plugins/Highlight'; 7import { SnackInline } from '~/ui/components/Snippet'; 8import Video from '~/components/plugins/Video'; 9import { BoxLink } from '~/ui/components/BoxLink'; 10import { BookOpen02Icon } from '@expo/styleguide-icons'; 11 12We'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! 13 14## About this tutorial 15 16The objective of this tutorial is to get started with Expo and become familiar with the Expo SDK. It'll cover the following topics: 17 18- Create an Expo App 19- Break down the app layout and implement it with flexbox 20- Use each platform's system UI to select an image from the media library 21- Create a sticker modal using the `<Modal>` and `<FlatList>` components from React Native 22- Add touch gestures to interact with a sticker 23- Use third-party libraries to capture a screenshot and save it to the disk 24- Handle platform differences between Android, iOS, and web 25- Finally, go through the process of configuring a status bar, a splash screen, and an icon to complete the app 26 27These 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. 28 29To 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. 30 31Before 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: 32 33<Video file="tutorial/final.mp4" /> 34 35> **info** The complete source code for this tutorial is available on [Snack](https://snack.expo.dev/@expo-team-snacks/image-app). 36 37## How to use this tutorial 38 39We 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. 40 41Throughout 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: 42 43<SnackInline label="Hello world"> 44 45{/* prettier-ignore */} 46```jsx 47import { StyleSheet, Text, View } from 'react-native'; 48 49export default function App() { 50 return ( 51 <View style={styles.container}> 52 /* @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 */ 53 </View> 54 ); 55} 56 57const styles = StyleSheet.create({ 58 container: { 59 flex: 1, 60 backgroundColor: '#fff', 61 alignItems: 'center', 62 justifyContent: 'center', 63 }, 64}); 65``` 66 67</SnackInline> 68 69> **Wait, what is this "Open in Snack" button?** 70> 71> Snack is a web-based editor that works similarly to an Expo project. It's a great way to share code snippets and experiments without downloading any tools on your computer. 72> 73> Go ahead and 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. 74> 75> Throughout this tutorial, use Snack to copy and paste the code into your 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**. 76 77## Next step 78 79<BoxLink 80 title="Create your first app with Expo" 81 Icon={BookOpen02Icon} 82 description="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." 83 href="/tutorial/create-your-first-app" 84/> 85