--- modificationDate: September 15, 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. --- This documentation is available as Markdown for AI agents and LLMs. See the [full Markdown index](https://docs.expo.dev/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. ## 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) 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 Prompt 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 from the @expo/vector-icons library, 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: Image: App with a two-tab layout ## 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 Prompt 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](https://docs.expo.dev/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: Image: Home screen with the photo viewer and two buttons ## Pick a photo from your library Time for the first real feature: choosing your own photo. Paste the following prompt into your agent: ```text Prompt 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](https://docs.expo.dev/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](https://docs.expo.dev/tutorial/build-with-ai/add-stickers.md)