guides

835 notes in this subject, read out of this brain and free to use. This is page 13 of 14.

AI agent tutorial workflow loop

The tutorial follows a repeating loop for each chapter: Prompt (paste a suggested prompt into your AI agent), Build (the agent writes the code and the app updates on your phone within seconds), Verify (check that the app does what you asked on your phone), and Re-prompt (if something looks off, tell the agent what you see and let it fix the problem).

System requirements for AI agent tutorial

To complete the tutorial, you need a computer running macOS, Windows, or Linux; an Android or iOS phone; and about an hour of time. The first chapter walks you through installing every tool from scratch, so you don't need anything set up in advance.

StickerSmash app features and capabilities

StickerSmash is an Expo app that runs on Android, iOS, and the web. It lets you pick a photo, place an emoji sticker on it, move and resize the sticker with your fingers, and save the result to your photo library.

Web support for save functionality with dom-to-image

Since react-native-view-shot does not support web, use the dom-to-image library to capture the image on web platforms and download it as a file instead. This allows the same app to work on both native and web by using platform-specific branches.

Save photo to library with react-native-view-shot and expo-media-library

To save a decorated photo to the device's photo library, use the react-native-view-shot library to capture just the photo with stickers (not the whole screen) and expo-media-library to save the result. Request permission the first time if needed, and show an alert confirming that the image was saved.

Expo Go mobile testing app

Expo Go is a free app that lets you test your Expo project on your phone while you build it without app store publishing. Every time the agent changes the code, the app on your phone updates within seconds.

Codex Expo Skills installation

To install Expo Skills in Codex, run `codex plugin add expo@openai-curated` in the terminal.

Prerequisites for Build with AI tutorial

To start the Build with AI tutorial, you need: a computer running macOS, Windows, or Linux; an Android or iOS phone connected to the same Wi-Fi network as your computer; an AI coding agent and an account with its service; and about 20 minutes for setup.

Supported AI agents for Build with AI tutorial

The Build with AI tutorial supports Claude Code, Codex, Cursor, and other agents that can edit files and run commands on your computer.

Node.js requirement for Expo tools

Node.js is the runtime that powers Expo's developer tools. The tutorial requires installation of the Long-Term Support (LTS) version from nodejs.org.

Expo account creation

Create a free account at expo.dev/signup on your computer, and sign into it on your phone in the Expo Go app.

Expo Skills for AI agents

Expo Skills are instruction files that teach AI agents how to build Expo apps well, including which libraries to use, how to structure screens, and how to avoid common mistakes. They must be installed for optimal agent performance.

Claude Code Expo Skills installation

To install Expo Skills in Claude Code, start `claude`, then run `/plugin install expo@claude-plugins-official`.

Cursor Expo Skills installation

To install Expo Skills in Cursor, run `npx skills add expo/skills` in the terminal, then reopen Cursor and verify the skills appear under Settings > Rules, Skills, Subagents > Skills.

Expo MCP server purpose

The Expo MCP server gives your agent direct access to Expo's tools: it can read the latest Expo documentation, install the right packages, and inspect your project.

Claude Code Expo MCP server installation

To install the Expo MCP server in Claude Code, run `claude mcp add --transport http expo https://mcp.expo.dev/mcp` in the terminal. Then start `claude` and run `/mcp` inside it to sign in with your Expo account.

Codex Expo MCP server installation

To install the Expo MCP server in Codex, run `codex mcp add expo --url https://mcp.expo.dev/mcp` in the terminal and sign in with your Expo account when prompted.

Cursor Expo MCP server installation

To install the Expo MCP server in Cursor, click the provided deep link to install the MCP server, then sign in with your Expo account.

StatusBar component basic usage

Import StatusBar from expo-status-bar and use it in your app. Group it with other components using React's Fragment component. Example: <StatusBar style="light" /> sets a light status bar style.

App icon path configuration in app.json

The icon property in app.json configures the app icon path. By default, a new Expo project sets this to ./assets/images/icon.png. The icon should be a 1024px by 1024px image.

expo-splash-screen pre-installed in create-expo-app

The expo-splash-screen library comes pre-installed in every project created using create-expo-app. It provides a config plugin to configure the splash screen.

Splash screen image configuration in app.json

The expo-splash-screen plugin is configured in app.json under the plugins array. It uses the image property to specify the splash screen image path, for example ./assets/images/splash-icon.png.

Cannot test splash screen in Expo Go or development builds

To test the splash screen, you cannot use Expo Go or a development build. You must create a preview or production build of your app to verify splash screen behavior.

Splash screen testing requires preview or production build

To test the splash screen configuration, create either a preview build using Internal distribution, or a production build for Android or iOS. See the Internal distribution guide or Android/iOS production build guides for instructions.

expo-status-bar pre-installed in create-expo-app

The expo-status-bar library comes pre-installed in every project created using create-expo-app. It provides a StatusBar component to configure the app's status bar style.

create-expo-app command usage

To initialize a new Expo app, run `npx create-expo-app@latest ProjectName` with npm, `yarn create expo-app ProjectName` with yarn, `pnpm create expo-app ProjectName` with pnpm, or `bun create expo ProjectName` with bun. The CLI will prompt to select an Expo SDK version; SDK 54 is the current standard for this tutorial. After creation, navigate to the project directory with `cd ProjectName`.

SDK 54 default template contents

The SDK 54 default template created by create-expo-app includes: the expo package, Expo CLI, Expo Router with a tab navigator for basic navigation, automatic configuration for Android, iOS, and web platforms, and TypeScript configured by default.

reset-project script purpose

The reset-project script resets the app directory structure by copying boilerplate files from the project root to a sub-directory called app-example, leaving only index.tsx and _layout.tsx in the app directory. This allows building the app from scratch and understanding file-based navigation.

app/index.tsx entry point

The app/index.tsx file is the entry point of the app and executes when the development server starts. It defines the text and components displayed on the app's screen using React Native components like View and Text.

Prerequisites for Expo app development

Required prerequisites are: Expo Go installed on a physical Android or iOS device, Node.js LTS version, a code editor such as VS Code, and a developer machine (macOS, Linux, or Windows with PowerShell and WSL2) with a terminal window. Familiarity with TypeScript and React is assumed.

React Native styling with StyleSheet

React Native components accept a style prop that takes a JavaScript object. StyleSheet should be imported from react-native to define custom styles. Properties are similar to CSS but use JavaScript object syntax, such as backgroundColor, color, flex, alignItems, and justifyContent.

React Native color format support

React Native supports the same color formats as web: hex triplets (like #fff), rgba, hsl, and named colors (such as red, green, blue, peru, papayawhip).

Example: IconButton component with label and icon

An icon button component that displays a MaterialIcons icon with a text label below it. The component accepts icon (keyof typeof MaterialIcons.glyphMap), label (string), and onPress (function) props. Code: ```tsx import { Pressable, StyleSheet, Text } from 'react-native'; import MaterialIcons from '@expo/vector-icons/MaterialIcons'; type Props = { icon: keyof typeof MaterialIcons.glyphMap; label: string; onPress: () => void; }; export default function IconButton({ icon, label, onPress }: Props) { return ( <Pressable style={styles.iconButton} onPress={onPress}> <MaterialIcons name={icon} size={24} color="#fff" /> <Text style={styles.iconButtonLabel}>{label}</Text> </Pressable> ); } const styles = StyleSheet.create({ iconButton: { justifyContent: 'center', alignItems: 'center', }, iconButtonLabel: { color: '#fff', marginTop: 12, }, }); ```

FlatList horizontal prop renders list horizontally

The FlatList component from React Native accepts a horizontal prop that renders the list horizontally instead of vertically. The showsHorizontalScrollIndicator prop can be used with React Native's Platform module to conditionally display the horizontal scroll bar.

Example: CircleButton component with MaterialIcons

A circular button component using React Native's Pressable and View components with MaterialIcons from @expo/vector-icons. The example shows styling with width 84, height 84, marginHorizontal 60, borderWidth 4, borderColor '#ffd33d', borderRadius 42, and backgroundColor '#fff' for the inner button. Code: ```tsx import { View, Pressable, StyleSheet } from 'react-native'; import MaterialIcons from '@expo/vector-icons/MaterialIcons'; type Props = { onPress: () => void; }; export default function CircleButton({ onPress }: Props) { return ( <View style={styles.circleButtonContainer}> <Pressable style={styles.circleButton} onPress={onPress}> <MaterialIcons name="add" size={38} color="#25292e" /> </Pressable> </View> ); } const styles = StyleSheet.create({ circleButtonContainer: { width: 84, height: 84, marginHorizontal: 60, borderWidth: 4, borderColor: '#ffd33d', borderRadius: 42, padding: 3, }, circleButton: { flex: 1, justifyContent: 'center', alignItems: 'center', borderRadius: 42, backgroundColor: '#fff', }, }); ```

Example: EmojiPicker modal component

A modal component that displays a title and close button. It accepts isVisible (boolean) and onClose (function) props to control visibility and handle closing. The modal uses animationType="slide", transparent={true}, and positions at the bottom. Code: ```tsx import { Modal, View, Text, Pressable, StyleSheet } from 'react-native'; import { PropsWithChildren } from 'react'; import MaterialIcons from '@expo/vector-icons/MaterialIcons'; type Props = PropsWithChildren<{ isVisible: boolean; onClose: () => void; }>; export default function EmojiPicker({ isVisible, children, onClose }: Props) { return ( <View> <Modal animationType="slide" transparent={true} visible={isVisible}> <View style={styles.modalContent}> <View style={styles.titleContainer}> <Text style={styles.title}>Choose a sticker</Text> <Pressable onPress={onClose}> <MaterialIcons name="close" color="#fff" size={22} /> </Pressable> </View> {children} </View> </Modal> </View> ); } const styles = StyleSheet.create({ modalContent: { height: '25%', width: '100%', backgroundColor: '#25292e', borderTopRightRadius: 18, borderTopLeftRadius: 18, position: 'absolute', bottom: 0, }, titleContainer: { height: '16%', backgroundColor: '#464C55', borderTopRightRadius: 10, borderTopLeftRadius: 10, paddingHorizontal: 20, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', }, title: { color: '#fff', fontSize: 16, }, }); ```

Example: EmojiList component with FlatList

A component that renders a horizontal list of emoji images using FlatList. It accepts onSelect (function to set selected emoji) and onCloseModal (function to close modal) props. Uses expo-image Image component for rendering. Code: ```tsx import { useState } from 'react'; import { ImageSourcePropType, StyleSheet, FlatList, Platform, Pressable } from 'react-native'; import { Image } from 'expo-image'; type Props = { onSelect: (image: ImageSourcePropType) => void; onCloseModal: () => void; }; export default function EmojiList({ onSelect, onCloseModal }: Props) { const [emoji] = useState<ImageSourcePropType[]>([ require("../assets/images/emoji1.png"), require("../assets/images/emoji2.png"), require("../assets/images/emoji3.png"), require("../assets/images/emoji4.png"), require("../assets/images/emoji5.png"), require("../assets/images/emoji6.png"), ]); return ( <FlatList horizontal showsHorizontalScrollIndicator={Platform.OS === 'web'} data={emoji} contentContainerStyle={styles.listContainer} renderItem={({ item, index }) => ( <Pressable onPress={() => { onSelect(item); onCloseModal(); }}> <Image source={item} key={index} style={styles.image} /> </Pressable> )} /> ); } const styles = StyleSheet.create({ listContainer: { borderTopRightRadius: 10, borderTopLeftRadius: 10, paddingHorizontal: 20, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', }, image: { width: 100, height: 100, marginRight: 20, }, }); ```

Example: EmojiSticker component to display selected emoji

A simple component that displays a selected emoji image as a sticker on top of another image. It accepts imageSize (number) and stickerSource (ImageSourcePropType) props. Uses expo-image Image component. Code: ```tsx import { ImageSourcePropType, View } from 'react-native'; import { Image } from 'expo-image'; type Props = { imageSize: number; stickerSource: ImageSourcePropType; }; export default function EmojiSticker({ imageSize, stickerSource }: Props) { return ( <View style={{ top: -350 }}> <Image source={stickerSource} style={{ width: imageSize, height: imageSize }} /> </View> ); } ```

React Native Modal component for drawing user attention

React Native provides a Modal component that presents content above the rest of your app. In general, modals are used to draw a user's attention toward critical information or guide them to take action.

Modal component props: animationType slide transparent visible

The Modal component accepts several key props: animationType determines how it enters and leaves the screen (e.g., 'slide' makes it slide from the bottom), transparent is a boolean that determines whether the modal fills the entire view, and visible takes a boolean value to control whether the modal is open or closed.

Development process overview guide

The 'Develop an app with Expo' guide provides an overview of the development process and helps build a mental model of the core development loop.

Gestures and animations libraries for React Native

For implementing gestures and animations in React Native, recommended libraries and documentation are React Native Gesture Handler and React Native Reanimated.

Expo Go compatibility with SDK versions

If you plan to use Expo Go on a physical device, use an SDK 54 project. Otherwise, use `--template default@sdk-57` to create an SDK 57 project.

Recommended learning path after creating an Expo project

After creating a new Expo project, recommended learning resources include: Development tools (reference of Expo tools), Development builds (gaining full control over app's build process and testing on device or simulator), Development overview (high-level overview of key concepts and development loop), Expo Router (documentation for navigation library), App icon and splash screen (customization guides and app.json configuration reference), App distribution and submission to app stores (release and submission guidance), and Debugging (tools for finding and fixing errors).

React and React Native prerequisites for Expo development

Having a solid understanding of React is essential to using Expo. Recommended reading includes React Quick Start section and Hooks section from React documentation. For React Native, start with the React Native basics guide and review View API reference, Text API reference, Platform specific code, and Presenting data in a list documentation. Flexbox is used for component layout; recommended resources are Height and Width and Layout with Flexbox documentation.

Expo tutorial topics covered

The tutorial covers: creating an app using the default template with TypeScript enabled; implementing a two-screen bottom tabs layout with Expo Router; breaking down app layout and implementing with flexbox; using each platform's system UI to select an image from the media library; creating a sticker modal using Modal and FlatList components from React Native; adding touch gestures to interact with a sticker; using third-party libraries to capture a screenshot and save to disk; handling platform differences between Android, iOS, and web; and configuring a status bar, splash screen, and icon.

StickerSmash sample app

The tutorial builds an app named StickerSmash that runs on Android, iOS, and the web. This is the example app used throughout the tutorial to demonstrate Expo capabilities. The complete source code for StickerSmash is available on GitHub.

Tutorial: Using React Native and Expo

This tutorial guides developers through building a universal Expo app that runs on Android, iOS, and web from a single codebase. The tutorial covers creating an app with TypeScript, implementing a two-screen bottom tabs layout with Expo Router, using flexbox for layout, selecting images from the media library with platform-specific system UI, creating a sticker modal with React Native components, adding touch gestures, capturing screenshots, handling platform differences, and configuring status bar, splash screen, and icon. The tutorial builds a sample app called StickerSmash and is structured in nine chapters designed to be completed in up to two hours. The complete source code is available on GitHub.

Tutorial learning approach

The tutorial emphasizes learning by doing rather than just explaining. Code snippets are provided in each chapter so learners can either follow along by creating an app from scratch or copy and paste code. Important code or code that has changed between examples is highlighted in green, and users can hover (on desktop) or tap (on mobile) to learn more about what the highlighted code does.

Build with AI tutorial: no programming experience required

The Build with AI tutorial allows developers to build their first app by directing an AI coding agent without any programming experience. It covers setting up tools from scratch and verifying the app on a phone at every step.

CI/CD tutorial: automate building, testing, and releasing with EAS Workflows

The CI/CD tutorial covers automating the building, testing, and releasing of Expo apps with EAS Workflows. It includes development, preview, and production pipelines, from first workflow file setup to tag-based releases and web deployments.

Expo tutorial: step-by-step guide for new developers

The Expo tutorial is designed for developers new to Expo who want to write code themselves. It provides a step-by-step guide on how to build an Expo app that runs on Android, iOS, and web.

EAS tutorial covers Build, Update, and Submit workflows

The EAS tutorial is designed for developers looking to learn about building Android and iOS apps using Expo Application Services. It covers the EAS Build, Update, and Submit workflows.

Spring animation with withSpring function

The `withSpring()` function from `react-native-reanimated` provides a spring-based animation that feels alive because it is based on real-world physics of a spring. It takes a shared value as input and animates the transition to that value using spring physics.

GestureHandlerRootView setup for gesture handling

To enable gesture interactions in an Expo app, render `<GestureHandlerRootView>` from the `react-native-gesture-handler` library at the top level of your component, replacing the root `<View>` component.

Animated components from Reanimated for gesture animations

The Reanimated library exports animated components such as `<Animated.View>`, `<Animated.Text>`, `<Animated.ScrollView>`, and `<Animated.Image>`. These components look at the `style` prop and animate values to create smooth animations. Import `Animated` from `react-native-reanimated` to use them.

Gesture.Tap() for tap gesture detection

`Gesture.Tap()` from `react-native-gesture-handler` creates a tap gesture detector. Chain `.numberOfTaps(n)` to specify how many taps to recognize (e.g., `.numberOfTaps(2)` for double tap). Use `.onStart()` callback to execute code when the gesture is recognized.

Gesture.Pan() for pan/drag gesture detection

`Gesture.Pan()` from `react-native-gesture-handler` creates a pan/drag gesture detector. Use `.onChange()` callback to execute code while the gesture is active and moving. The event parameter contains `changeX` and `changeY` properties that hold the change in position since the last event.

Double tap gesture with scale animation example

Example showing double tap gesture that scales an emoji sticker: ```tsx import { Gesture, GestureDetector } from 'react-native-gesture-handler'; import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated'; import { ImageSourcePropType, View } from 'react-native'; type Props = { imageSize: number; stickerSource: ImageSourcePropType; }; export default function EmojiSticker({ imageSize, stickerSource }: Props) { const scaleImage = useSharedValue(imageSize); const doubleTap = Gesture.Tap() .numberOfTaps(2) .onStart(() => { if (scaleImage.value !== imageSize * 2) { scaleImage.value = scaleImage.value * 2; } else { scaleImage.value = Math.round(scaleImage.value / 2); } }); const imageStyle = useAnimatedStyle(() => { return { width: withSpring(scaleImage.value), height: withSpring(scaleImage.value), }; }); return ( <View style={{ top: -350 }}> <GestureDetector gesture={doubleTap}> <Animated.Image source={stickerSource} resizeMode="contain" style={[{ width: imageSize, height: imageSize }, imageStyle]} /> </GestureDetector> </View> ); } ``` This example shows how to use `useSharedValue` to track scale, `Gesture.Tap().numberOfTaps(2)` for double tap detection, `useAnimatedStyle` to create animated styles, `withSpring` for spring-based animation, and `GestureDetector` to wrap the animated component.

useSharedValue hook for gesture state tracking

The `useSharedValue()` hook from `react-native-reanimated` creates a shared value that can be mutated and used to run animations based on the current value. Access and modify the shared value using the `.value` property. This is useful for tracking gesture state like scale, translation, and other animated values.

Give your agent this brain