Project structure · Mobile
React Native with Expo project structure
Opens with creditsFor web developers who know React and want one TypeScript codebase for Android, iOS and the web. Routes are files in src/app (Expo Router), the business logic lives in feature folders under src/features split into data, domain and presentation, and the native android and ios folders are generated, not hand-written.
Curated by Tauseef FayyazIntermediate228 files and foldersExpo SDK 57, React Native 0.86, React 19.2Checked October 2026How it grows
Each stage opens the explorer there
- 1Day 1What the scaffold and your first hour give you38 files and folders
- 2GrowingWhat a real app with features and tests adds+102 files and folders
- ProductionWhat running it for real users adds+37 files and foldersOpens with credits
- ExpertWhat a team needs to keep it healthy for years+51 files and foldersOpens with credits
How it is organised
- Routes are files: src/app/(app)/orders/[id].tsx is the screen at /orders/123, on the phone and on the web. Keep route files thin: they read params and render a screen from a feature.
- Logic lives in src/features/<name>, grouped by feature (orders, auth), and inside each feature by layer: data (API calls and DTOs), domain (types, rules, schemas) and presentation (hooks and components). Moving a route never breaks data code.
- Shared, feature-free code goes in src/components, src/hooks, src/lib and src/providers. If only one feature uses it, it stays in that feature. Features import each other only through their index.ts.
- Continuous Native Generation: android/ and ios/ are generated from app.json, app.config.ts and config plugins by npx expo prebuild. Change the config, not the generated folders, and keep them out of git.
- Use npx expo install, not plain npm install, for anything native, so versions match your Expo SDK.
- Server data goes through TanStack Query; small UI state stays in components; a Zustand store holds the little client state several screens share. Tokens live in expo-secure-store, never in plain storage.
- Only EXPO_PUBLIC_ variables reach the app, and anyone who unpacks it can read them. Real secrets stay on your server or in EAS environment variables used at build time.
- Tests grow with the app: Jest and React Native Testing Library from Growing, Maestro flows on real builds at Production, performance, accessibility and visual checks at Expert.
At the top of the project
Open one in the explorer for the full story
- my-app/
- .expo/Local Expo dev server state and generated route types.
- .vscode/Recommended VS Code extension and save actions.2 inside
- android/Generated native Android project, from npx expo prebuild or npx expo run:android.
- assets/App icons, splash image, tab icons, fonts and other files bundled with the app.3 inside
- coverage/Jest coverage report from npm test -- --coverage.
- ios/Generated native iOS project, from npx expo prebuild or npx expo run:ios.
- node_modules/Installed npm packages.
- scripts/Project scripts. The template ships one: reset-project.js.1 inside
- src/All app code: routes in src/app, everything else beside it.11 inside
- .envPublic build settings such as EXPO_PUBLIC_API_URL.
- .env.localYour own overrides, for example your laptop's LAN IP as the API URL.
- .gitignoreIgnores node_modules, .expo, dist, signing files and the generated android and ios folders.
- .nvmrcThe Node version for the project, used by nvm, fnm and CI.
- .prettierrcPrettier formatting rules.
- AGENTS.mdInstructions for AI coding agents: commands, folder rules, libraries to use.
- CLAUDE.mdClaude Code instructions; usually just `@AGENTS.md`.
- README.mdHow to install, run, test and release the app.
- app.config.tsDynamic config: app name, bundle id and icon per variant, plugins, permissions and the update runtime version.
- app.jsonApp name, slug, version, icons, splash, URL scheme and config plugins.
- eas.jsonEAS Build, Submit and Update profiles: development, preview, e2e-test, production.
- eslint.config.jsESLint flat config extending eslint-config-expo, plus Prettier and accessibility rules.
- expo-env.d.tsType references Expo generates for TypeScript.
- jest.config.jsJest with the jest-expo preset, the setup file and coverage settings.
- jest.setup.tsRuns before every test file: starts the MSW server and mocks native modules Jest cannot load.
- lefthook.ymlGit hooks: lint and format staged files on commit, type-check and test on push.
- package-lock.jsonExact versions of every installed package.
- package.jsonDependencies, scripts and the expo-router entry point.
- tsconfig.jsonStrict TypeScript extending Expo's base, with the @/ alias for src/.
Learn more on Sefism
Roadmaps, cheat sheets and projects that go with React Native with Expo.
- Roadmap· React NativeMobile development roadmapApps for Android and iOS
- RoadmapFrontend development roadmapHTML, CSS, JavaScript and a framework
- RoadmapQA and test automation roadmapManual testing to automated suites
- RoadmapCoding with AI tools roadmapClaude Code, Cursor, Copilot, used well
- Cheat sheetMobile development cheat sheetApps for Android and iOS.
- Cheat sheetFrontend development cheat sheetHTML, CSS, JavaScript and a framework.
- Cheat sheetQA and test automation cheat sheetManual testing to automated suites.
- FYP idea· IntermediateOffline Order Booking and Route Planner for Field Sales RepsA final year project that builds a mobile app for FMCG and pharma field sales reps who visit 30 or more shops a day: an offline day plan, a suggested visit order, order booking against stock and credit limits, and sync when signal returns. Aimed at small distributors who cannot afford enterprise tools.
- FYP idea· BeginnerJob Quote and Invoice App for Electricians and PlumbersA beginner final year project that builds a mobile app for independent electricians, plumbers and AC technicians to write a quote on site in two minutes, share it on WhatsApp, turn it into an invoice and track who has paid. Offline price lists, photo notes and simple job history for tradespeople who work from their phone.
See 9 moreShow fewer
- FYP idea· IntermediateDeadline-Tracking Study Agent with Long-Term Memory for University StudentsBuild an AI agent that reads a student's course portal notices, emails and timetable, keeps a long-term memory of their courses, deadlines and preferences, and plans their week, asking for approval before it adds events or sends anything. The project is about memory done properly: per-student storage, correction, privacy and evals that prove the agent remembers the right things.
- QuestionHow do I choose between frontend, backend, mobile, cloud, cybersecurity, data and AI without trying them all for years?Do not try to pick the best field; pick the one whose daily problems you can tolerate on a bad day. Run a short, cheap experiment in two or three candidates, compare what you enjoyed doing rather than what sounded exciting, check the local job market, and commit for six to nine months.
- QuestionHow do I build a developer portfolio as a beginner with nothing to show?Start with two or three small but complete projects that solve a real problem, each with a clear README, screenshots and a live link or easy run steps. Put them on a simple one-page site or a tidy GitHub profile. Depth and finish matter far more than the number of projects or a fancy design.
- QuestionHow do I learn Git and GitHub properly instead of just copying commands?Learn the model first: commits are snapshots, branches are pointers, and remotes are copies. Then use Git daily on your own projects, practise a team workflow with branches and pull requests, and break things on purpose, such as merge conflicts, so you learn to recover calmly.
- Resource· GuideExpo DocumentationThe official documentation for Expo, the framework and tooling most React Native apps now start with. It covers creating a project, a step-by-step tutorial app, file based navigation with Expo Router, the SDK modules for camera, notifications and more, and building, submitting and updating apps with EAS. It suits JavaScript and React developers moving to mobile, and it removes much of the native setup that used to make React Native hard for beginners.
- Resource· GuideReact Native DocumentationThe official React Native documentation from Meta, covering core components, styling, Flexbox layout, networking, debugging, performance and platform-specific native code, with runnable examples in the browser. It suits web developers who know React and want to build Android and iOS apps. The docs recommend starting new apps with a framework such as Expo, so read them together with the Expo documentation.
- Resource· GuideReact DocumentationThe official React documentation at react.dev is a full course as well as a reference. Its Learn track moves from a quick start through describing the UI, adding interactivity, managing state and escape hatches, with interactive sandboxes and challenges on nearly every page. It suits anyone learning React and any React developer whose habits come from older class-based tutorials, and it should be read before paying for a React course.
- Resource· GuideOWASP Mobile Application Security (MASVS and MASTG)OWASP's mobile security project for Android and iOS. The MASVS standard defines what a secure app must do across storage, cryptography, authentication, networking, platform interaction, code, resilience and privacy, and the MASTG testing guide shows how to check each on a real device. Use it to decide where tokens and personal data may live, and as a security checklist before release.
- Resource· GuideThe TypeScript HandbookThe TypeScript Handbook is the official, free guide to TypeScript's type system from the TypeScript team, written for working programmers and kept current with each release. It covers everyday types, narrowing, functions, object types, generics, type manipulation, classes and modules, and it is designed to be read in a few hours. It suits JavaScript developers adopting TypeScript and anyone who writes types by copying patterns without understanding them.
Checked against 17 official sources, October 2026. If something has changed, the docs win.Show sourcesHide sources
- Expo: Create a project
- expo-template-default on npm (files create-expo-app copies)
- Expo Router: file-based routing
- Expo Router: native tabs
- Expo Router: protected routes
- Expo: Unit testing with Jest
- Expo: Multiple app variants
- Expo: Environment variables
- Expo: Localization
- Expo: Work with monorepos
- EAS Workflows: get started
- EAS Workflows: deploy to production
- EAS Workflows: e2e tests with Maestro
- EAS Update: runtime versions
- Sentry: React Native with Expo
- TanStack Query: React Native
- OWASP Mobile Application Security (MASVS)
Best practices and checklists for this stack
Picked from the other libraries by shared topics.
Best practices
See all- React Native Best PracticesReact Native best practices for 2026: Expo and the New Architecture, fast lists, smooth animations, safe storage, deep links, accessibility and release builds.
- Flutter Best PracticesFlutter best practices for 2026: sound null safety, cheap build methods, layered architecture, smooth frames, go_router, accessibility, testing and safe releases.
Checklists
See all- App Store and Google Play Launch ChecklistLaunch a mobile app on the App Store and Google Play: accounts, build rules, review guidelines, privacy labels, Data safety, listing, in-app purchases, testing, crashes and staged rollout.
- Mobile App Security ChecklistCheck an Android or iOS app against OWASP MASVS: data storage, network security, authentication, platform interaction, code quality, resilience and privacy.
Work with me
Stuck on something specific?
Writing only gets you so far. If you want an answer to your situation rather than the general case, book a session and we will work through it together. Sessions are free for approved Sefism members, and a few slots open each week.
- 1:1 Mentorship
- Fresh Graduate Mentorship
- Career Guidance
Brand deals, promos and partnerships: tauseeffayyaz@gmail.com