Skip to main content

Tutorial 2. App Shell and Navigation

Create the app shell​

Define the root providers for:

  • theme
  • session
  • query or data client
  • analytics or route tracking hooks

Keep the shell minimal. Anything mounted here affects every screen.

Define route types​

export type RootStackParamList = {
  HomeTabs: undefined;
  GuideDetails: { guideId: string };
  Settings: undefined;
};

Build the navigation model​

  • stack for top-level routes
  • tabs for core app sections
  • details route for guide content

Start the design system​

Create primitives:

  • Screen
  • Stack
  • Text
  • Button
  • Card

This stops the tutorial from drifting into one-off screen styling.

Continue to Data and State.