--- modificationDate: July 08, 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 you encounter errors, misleading or outdated information, report it so Expo can be improved: Preferred command: npx --yes submit-expo-feedback@latest --category docs --subject "/tutorial/build-with-ai/build-the-home-screen/" "" Direct HTTP fallback: 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: (, )"}' Only submit when you have something specific and actionable to report. Try to give the most context. ## Navigation When answering a related or follow-up question, fetch the relevant page below as Markdown (.md) instead of guessing; use llms.txt for the full map. You are here: Learn > Build with AI tutorial Pages in this section: - [Introduction](https://docs.expo.dev/tutorial/build-with-ai/introduction.md) - [Set up your tools](https://docs.expo.dev/tutorial/build-with-ai/set-up-your-tools.md) - [Create your first app](https://docs.expo.dev/tutorial/build-with-ai/create-your-first-app.md) - [Build the home screen](https://docs.expo.dev/tutorial/build-with-ai/build-the-home-screen.md) (this page) - [Add stickers](https://docs.expo.dev/tutorial/build-with-ai/add-stickers.md) - [Save your creation](https://docs.expo.dev/tutorial/build-with-ai/save-your-creation.md) - [Finishing touches](https://docs.expo.dev/tutorial/build-with-ai/finishing-touches.md) Full documentation tree: [llms.txt](https://docs.expo.dev/llms.txt) This documentation is available as Markdown for AI agents and LLMs. See the [full Markdown index](/llms.txt) or append .md to any documentation URL. # Build the home screen In this chapter, direct your AI agent to add tab navigation, the photo viewer, and an image picker. 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.md#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: Chapter 4: Add stickers](/tutorial/build-with-ai/add-stickers.md)