{"@context":"https://ihatereading.in/roadmap/schema/v1","type":"roadmap-chapter","roadmap":{"slug":"vibe-coding-mobile-app-development","title":"Vibe Coding Mobile App Roadmap (Expo, Tailwind & AI Agents)","url":"https://ihatereading.in/roadmap/vibe-coding-mobile-app-development","machineUrl":"https://ihatereading.in/roadmap/vibe-coding-mobile-app-development.json"},"slug":"screens-routing-and-navigation","title":"Pages, Routing & Navigation","url":"https://ihatereading.in/roadmap/vibe-coding-mobile-app-development/screens-routing-and-navigation","machineUrl":"https://ihatereading.in/roadmap/vibe-coding-mobile-app-development/screens-routing-and-navigation.json","summary":{"breadcrumb":"Vibe Coding Mobile App Roadmap (Expo, Tailwind & AI Agents) → Pages, Routing & Navigation","purpose":"Build the screens of your app with Expo Router: stacks, tabs, modals, deep links, protected routes, lists, forms and keyboard handling.","prerequisites":["UI with Tailwind (NativeWind) & Design Systems"],"afterThisChapter":["State Management"]},"agentLens":null,"topics":[{"id":"file-based-routes","slug":"file-based-routes","title":"File-based routes","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["`app/index.tsx` is the home route, `app/settings.tsx` is `/settings`, and `app/post/[id].tsx` is a dynamic route."],"why":["A clear route tree makes agent output predictable and makes deep links, auth gates and analytics straightforward later."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"`app/index.tsx` is the home route, `app/settings.tsx` is `/settings`, and `app/post/[id].tsx` is a dynamic route. Folders group routes and `_layout.tsx` files wrap them.","example":null,"mentalModel":"Routes are the floor plan of a building: lobby (index), floors (tabs), rooms (stack screens) and a private office (modal). Visitors need signs (links) to find each room.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is File-based routes and when do you use it in a mobile app?"],"practice":["Build a three-tab app with a detail route `/item/[id]`, a login modal, and a redirect that sends signed-out users to login from the root layout."],"interview":["How do you protect routes in Expo Router?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Build a three-tab app with a detail route `/item/[id]`, a login modal, and a redirect that sends signed-out users to login from the root layout.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://docs.expo.dev/router/introduction/"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/ai-chat-app-template-next-js-vercel-ai-sdk-firebase"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"stacks-tabs-and-modals","slug":"stacks-tabs-and-modals","title":"Stacks, tabs and modals","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["A Stack pushes screens on top of each other, Tabs switch between top-level sections, and a modal presents a focused task."],"why":["A clear route tree makes agent output predictable and makes deep links, auth gates and analytics straightforward later."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"A Stack pushes screens on top of each other, Tabs switch between top-level sections, and a modal presents a focused task. Combine them in nested layouts.","example":null,"mentalModel":"Routes are the floor plan of a building: lobby (index), floors (tabs), rooms (stack screens) and a private office (modal). Visitors need signs (links) to find each room.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Stacks, tabs and modals and when do you use it in a mobile app?"],"practice":["Build a three-tab app with a detail route `/item/[id]`, a login modal, and a redirect that sends signed-out users to login from the root layout."],"interview":["How do you protect routes in Expo Router?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Build a three-tab app with a detail route `/item/[id]`, a login modal, and a redirect that sends signed-out users to login from the root layout.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://docs.expo.dev/router/basics/core-concepts/"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/ai-chat-app-template-next-js-vercel-ai-sdk-firebase"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"params-and-typed-routes","slug":"params-and-typed-routes","title":"Params and typed routes","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["Read dynamic values with `useLocalSearchParams` and navigate with `router.push`."],"why":["A clear route tree makes agent output predictable and makes deep links, auth gates and analytics straightforward later."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Read dynamic values with `useLocalSearchParams` and navigate with `router.push`. Typed routes make wrong paths a compile error, which protects you from agent typos.","example":null,"mentalModel":"Routes are the floor plan of a building: lobby (index), floors (tabs), rooms (stack screens) and a private office (modal). Visitors need signs (links) to find each room.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Params and typed routes and when do you use it in a mobile app?"],"practice":["Build a three-tab app with a detail route `/item/[id]`, a login modal, and a redirect that sends signed-out users to login from the root layout."],"interview":["How do you protect routes in Expo Router?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Build a three-tab app with a detail route `/item/[id]`, a login modal, and a redirect that sends signed-out users to login from the root layout.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://docs.expo.dev/router/introduction/"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/ai-chat-app-template-next-js-vercel-ai-sdk-firebase"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"protected-routes","slug":"protected-routes","title":"Protected routes","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["Redirect signed-out users to a login screen from a layout, or use the router's protected-route support in recent versions."],"why":["A clear route tree makes agent output predictable and makes deep links, auth gates and analytics straightforward later."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Redirect signed-out users to a login screen from a layout, or use the router's protected-route support in recent versions. Keep the auth check in one place.","example":null,"mentalModel":"Routes are the floor plan of a building: lobby (index), floors (tabs), rooms (stack screens) and a private office (modal). Visitors need signs (links) to find each room.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Protected routes and when do you use it in a mobile app?"],"practice":["Build a three-tab app with a detail route `/item/[id]`, a login modal, and a redirect that sends signed-out users to login from the root layout."],"interview":["How do you protect routes in Expo Router?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Build a three-tab app with a detail route `/item/[id]`, a login modal, and a redirect that sends signed-out users to login from the root layout.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://docs.expo.dev/router/advanced/authentication/"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/ai-chat-app-template-next-js-vercel-ai-sdk-firebase"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"lists-done-right","slug":"lists-done-right","title":"Lists done right","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["Use `FlatList` or Shopify's `FlashList` for long lists, give each row a stable key, and avoid rendering hundreds of views at once."],"why":["A clear route tree makes agent output predictable and makes deep links, auth gates and analytics straightforward later."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Use `FlatList` or Shopify's `FlashList` for long lists, give each row a stable key, and avoid rendering hundreds of views at once.","example":null,"mentalModel":"Routes are the floor plan of a building: lobby (index), floors (tabs), rooms (stack screens) and a private office (modal). Visitors need signs (links) to find each room.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Lists done right and when do you use it in a mobile app?"],"practice":["Build a three-tab app with a detail route `/item/[id]`, a login modal, and a redirect that sends signed-out users to login from the root layout."],"interview":["How do you protect routes in Expo Router?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Build a three-tab app with a detail route `/item/[id]`, a login modal, and a redirect that sends signed-out users to login from the root layout.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://reactnative.dev/docs/flatlist"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/ai-chat-app-template-next-js-vercel-ai-sdk-firebase"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"forms-and-the-keyboard","slug":"forms-and-the-keyboard","title":"Forms and the keyboard","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["Handle keyboard overlap, input focus order, validation messages and submit states."],"why":["A clear route tree makes agent output predictable and makes deep links, auth gates and analytics straightforward later."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Handle keyboard overlap, input focus order, validation messages and submit states. Use a form library such as React Hook Form with a schema validator like Zod if forms grow.","example":null,"mentalModel":"Routes are the floor plan of a building: lobby (index), floors (tabs), rooms (stack screens) and a private office (modal). Visitors need signs (links) to find each room.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Forms and the keyboard and when do you use it in a mobile app?"],"practice":["Build a three-tab app with a detail route `/item/[id]`, a login modal, and a redirect that sends signed-out users to login from the root layout."],"interview":["How do you protect routes in Expo Router?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Build a three-tab app with a detail route `/item/[id]`, a login modal, and a redirect that sends signed-out users to login from the root layout.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://reactnative.dev/docs/keyboardavoidingview"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/ai-chat-app-template-next-js-vercel-ai-sdk-firebase"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"deep-links","slug":"deep-links","title":"Deep links","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["Links like `myapp://post/42` or a universal link open a specific screen."],"why":["A clear route tree makes agent output predictable and makes deep links, auth gates and analytics straightforward later."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Links like `myapp://post/42` or a universal link open a specific screen. Plan routes so every important screen has a stable path.","example":null,"mentalModel":"Routes are the floor plan of a building: lobby (index), floors (tabs), rooms (stack screens) and a private office (modal). Visitors need signs (links) to find each room.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Deep links and when do you use it in a mobile app?"],"practice":["Build a three-tab app with a detail route `/item/[id]`, a login modal, and a redirect that sends signed-out users to login from the root layout."],"interview":["How do you protect routes in Expo Router?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Build a three-tab app with a detail route `/item/[id]`, a login modal, and a redirect that sends signed-out users to login from the root layout.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://docs.expo.dev/linking/overview/"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/ai-chat-app-template-next-js-vercel-ai-sdk-firebase"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]}],"updatedAt":"2026-10-23T06:01:57.841Z"}