--- modificationDate: June 10, 2026 title: Build the home screen description: In this chapter, direct your AI agent to add tab navigation, the photo viewer, and an image picker. --- ## Submitting Feedback If this page contains errors, outdated information, or gaps that blocked you from completing a task, report it so the docs can be improved: curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/tutorial/build-with-ai/build-the-home-screen/","feedback":"🤖 Agent feedback for docs: ","model":""}' Only submit when you have something specific and actionable to report. Replace with the model you are running as. # Build the home screen In this chapter, direct your AI agent to add tab navigation, the photo viewer, and an image picker. > For the complete documentation index, see [llms.txt](/llms.txt). Use this file to discover all available pages. In this chapter, the app starts to look like StickerSmash: two navigation tabs, a photo viewer, and a button that opens your phone's photo library. ## Add navigation tabs Most apps have more than one screen, with tabs along the bottom to switch between them. Paste the following prompt into your agent: ```text Add a tab bar to the app with two tabs: a Home tab showing the current home screen, and an About tab with a screen that says "About screen" for now. Use Expo Router for navigation. Style everything with a dark theme: the color #25292e for the screen backgrounds, headers, and tab bar, white text, and yellow (#ffd33d) as the color of the selected tab. Give each tab a fitting icon, such as a house for Home and an info circle for About. ``` **What you should see**: a tab bar at the bottom of the app with Home and About tabs. The tab you're on is highlighted in yellow, and tapping the other one switches screens: ## Add the photo viewer Next, give the home screen its main content: a large photo and two buttons. We've prepared an asset pack with the placeholder photo and the emoji stickers you'll use later. Paste the following prompt into your agent: ```text Download the image assets for this app from https://docs.expo.dev/static/images/tutorial/sticker-smash-assets.zip and extract them into the assets/images folder, replacing any files with the same names. Then build out the Home screen: show the background-image.png photo large in the center of the screen with rounded corners, and below it two buttons stacked vertically: "Choose a photo" — a prominent button with a yellow border, a white background, a dark label, and a small picture icon — and a plain "Use this photo" button with white text. Use the expo-image library to display the image. ``` Prefer to download the assets yourself? If your agent can't download or extract the file, do it manually: download [sticker-smash-assets.zip](/static/images/tutorial/sticker-smash-assets.zip), unzip it, and copy the images into the **assets/images** folder inside your **StickerSmash** folder, replacing files with the same names. Then ask the agent to build the screen with the prompt above, minus its first sentence. **What you should see**: a photo of a wooden boardwalk over the ocean filling most of the screen, with the two buttons below it: ## Pick a photo from your library Time for the first real feature: choosing your own photo. Paste the following prompt into your agent: ```text Add the expo-image-picker library. When I tap "Choose a photo", open my phone's photo library so I can pick an image, and show the one I pick in place of the placeholder photo. If I cancel without picking anything, keep showing the current photo. ``` **What you should see**: tapping **Choose a photo** opens your phone's photo library. The first time, your phone asks for permission to access your photos. Tap **Allow**. The photo you pick replaces the placeholder photo. > If a result doesn't match what you expected, tell the agent what you see. The [When something looks wrong](/tutorial/build-with-ai/create-your-first-app#when-something-looks-wrong) section from the previous chapter has the playbook. ## Summary Chapter 3: Build the home screen The app now has navigation, a styled home screen, and a working photo picker. You haven't touched a line of code. In the next chapter, you'll add an emoji picker modal and play with the sticker using gestures. [Next: Add stickers](/tutorial/build-with-ai/add-stickers)