{"@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":"mobile-app-fundamentals","title":"Mobile App Fundamentals for Vibe Coders","url":"https://ihatereading.in/roadmap/vibe-coding-mobile-app-development/mobile-app-fundamentals","machineUrl":"https://ihatereading.in/roadmap/vibe-coding-mobile-app-development/mobile-app-fundamentals.json","summary":{"breadcrumb":"Vibe Coding Mobile App Roadmap (Expo, Tailwind & AI Agents) → Mobile App Fundamentals for Vibe Coders","purpose":"How phone apps actually work — native vs cross-platform, React Native and Expo, app lifecycle, permissions, safe areas, platform differences and the store pipeline.","prerequisites":["Vibe Coding Foundations & the Agentic Workflow"],"afterThisChapter":["Expo Setup & Project Structure"]},"agentLens":null,"topics":[{"id":"native-vs-cross-platform","slug":"native-vs-cross-platform","title":"Native vs cross-platform","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["Native apps use Swift/Kotlin per platform."],"why":["Knowing the lifecycle, permission and store basics lets you catch the bugs agents commonly introduce: lost state, missing permission strings, and layouts that break on small screens."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Native apps use Swift/Kotlin per platform. Cross-platform frameworks such as React Native let one TypeScript codebase run on iOS and Android with native UI components underneath.","example":null,"mentalModel":"A phone app is a shop in a mall: the mall (iOS or Android) sets opening hours, signage rules and security checks; you only control what happens inside your unit.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Native vs cross-platform and when do you use it in a mobile app?"],"practice":["Draw a screen map for an app idea (max five screens), list the data on each, and write it as SPEC.md. Ask an agent to critique it for missing states (empty, loading, error)."],"interview":["What is the difference between React Native and a webview wrapper?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Draw a screen map for an app idea (max five screens), list the data on each, and write it as SPEC.md. Ask an agent to critique it for missing states (empty, loading, error).","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://reactnative.dev/docs/getting-started"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/expo-new-version-sdk-52"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"react-native-expo","slug":"react-native-expo","title":"React Native + Expo","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["React Native renders real native views from React components."],"why":["Knowing the lifecycle, permission and store basics lets you catch the bugs agents commonly introduce: lost state, missing permission strings, and layouts that break on small screens."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"React Native renders real native views from React components. Expo adds tooling, a router, and managed native modules so you rarely touch Xcode or Android Studio directly.","example":null,"mentalModel":"A phone app is a shop in a mall: the mall (iOS or Android) sets opening hours, signage rules and security checks; you only control what happens inside your unit.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is React Native + Expo and when do you use it in a mobile app?"],"practice":["Draw a screen map for an app idea (max five screens), list the data on each, and write it as SPEC.md. Ask an agent to critique it for missing states (empty, loading, error)."],"interview":["What is the difference between React Native and a webview wrapper?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Draw a screen map for an app idea (max five screens), list the data on each, and write it as SPEC.md. Ask an agent to critique it for missing states (empty, loading, error).","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://docs.expo.dev/"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/expo-new-version-sdk-52"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"app-lifecycle","slug":"app-lifecycle","title":"App lifecycle","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["Apps move between active, background and terminated states."],"why":["Knowing the lifecycle, permission and store basics lets you catch the bugs agents commonly introduce: lost state, missing permission strings, and layouts that break on small screens."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Apps move between active, background and terminated states. Timers pause, sockets drop and memory can be reclaimed, so anything important must be saved and resumable.","example":null,"mentalModel":"A phone app is a shop in a mall: the mall (iOS or Android) sets opening hours, signage rules and security checks; you only control what happens inside your unit.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is App lifecycle and when do you use it in a mobile app?"],"practice":["Draw a screen map for an app idea (max five screens), list the data on each, and write it as SPEC.md. Ask an agent to critique it for missing states (empty, loading, error)."],"interview":["What is the difference between React Native and a webview wrapper?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Draw a screen map for an app idea (max five screens), list the data on each, and write it as SPEC.md. Ask an agent to critique it for missing states (empty, loading, error).","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://reactnative.dev/docs/appstate"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/expo-new-version-sdk-52"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"permissions","slug":"permissions","title":"Permissions","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["Camera, location, notifications and photos require explicit user permission with a clear reason string."],"why":["Knowing the lifecycle, permission and store basics lets you catch the bugs agents commonly introduce: lost state, missing permission strings, and layouts that break on small screens."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Camera, location, notifications and photos require explicit user permission with a clear reason string. Ask at the moment of need, and handle denial gracefully.","example":null,"mentalModel":"A phone app is a shop in a mall: the mall (iOS or Android) sets opening hours, signage rules and security checks; you only control what happens inside your unit.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Permissions and when do you use it in a mobile app?"],"practice":["Draw a screen map for an app idea (max five screens), list the data on each, and write it as SPEC.md. Ask an agent to critique it for missing states (empty, loading, error)."],"interview":["What is the difference between React Native and a webview wrapper?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Draw a screen map for an app idea (max five screens), list the data on each, and write it as SPEC.md. Ask an agent to critique it for missing states (empty, loading, error).","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://docs.expo.dev/guides/permissions/"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/expo-new-version-sdk-52"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"safe-areas-and-layout","slug":"safe-areas-and-layout","title":"Safe areas and layout","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["Notches, status bars and home indicators cut into the screen."],"why":["Knowing the lifecycle, permission and store basics lets you catch the bugs agents commonly introduce: lost state, missing permission strings, and layouts that break on small screens."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Notches, status bars and home indicators cut into the screen. Use safe-area insets and flexbox, and test on small and large phones.","example":null,"mentalModel":"A phone app is a shop in a mall: the mall (iOS or Android) sets opening hours, signage rules and security checks; you only control what happens inside your unit.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Safe areas and layout and when do you use it in a mobile app?"],"practice":["Draw a screen map for an app idea (max five screens), list the data on each, and write it as SPEC.md. Ask an agent to critique it for missing states (empty, loading, error)."],"interview":["What is the difference between React Native and a webview wrapper?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Draw a screen map for an app idea (max five screens), list the data on each, and write it as SPEC.md. Ask an agent to critique it for missing states (empty, loading, error).","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://docs.expo.dev/develop/user-interface/safe-areas/"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/expo-new-version-sdk-52"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"platform-differences","slug":"platform-differences","title":"Platform differences","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["iOS and Android differ in navigation gestures, fonts, keyboards, permissions and back-button behaviour."],"why":["Knowing the lifecycle, permission and store basics lets you catch the bugs agents commonly introduce: lost state, missing permission strings, and layouts that break on small screens."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"iOS and Android differ in navigation gestures, fonts, keyboards, permissions and back-button behaviour. Test both; do not assume parity.","example":null,"mentalModel":"A phone app is a shop in a mall: the mall (iOS or Android) sets opening hours, signage rules and security checks; you only control what happens inside your unit.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Platform differences and when do you use it in a mobile app?"],"practice":["Draw a screen map for an app idea (max five screens), list the data on each, and write it as SPEC.md. Ask an agent to critique it for missing states (empty, loading, error)."],"interview":["What is the difference between React Native and a webview wrapper?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Draw a screen map for an app idea (max five screens), list the data on each, and write it as SPEC.md. Ask an agent to critique it for missing states (empty, loading, error).","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://developer.apple.com/design/human-interface-guidelines/"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/expo-new-version-sdk-52"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"stores-and-the-release-pipeline","slug":"stores-and-the-release-pipeline","title":"Stores and the release pipeline","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["Apps ship through Apple's App Store and Google Play with review, signing and privacy declarations."],"why":["Knowing the lifecycle, permission and store basics lets you catch the bugs agents commonly introduce: lost state, missing permission strings, and layouts that break on small screens."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Apps ship through Apple's App Store and Google Play with review, signing and privacy declarations. Plan for review time before a launch date.","example":null,"mentalModel":"A phone app is a shop in a mall: the mall (iOS or Android) sets opening hours, signage rules and security checks; you only control what happens inside your unit.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Stores and the release pipeline and when do you use it in a mobile app?"],"practice":["Draw a screen map for an app idea (max five screens), list the data on each, and write it as SPEC.md. Ask an agent to critique it for missing states (empty, loading, error)."],"interview":["What is the difference between React Native and a webview wrapper?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Draw a screen map for an app idea (max five screens), list the data on each, and write it as SPEC.md. Ask an agent to critique it for missing states (empty, loading, error).","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://developer.apple.com/app-store/review/guidelines/"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/expo-new-version-sdk-52"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]}],"updatedAt":"2026-10-23T06:02:37.081Z"}