Understanding Navigation

Navigation is how people move between screens in your app—like going from a Home screen to a Details screen, opening a tab bar at the bottom, or showing a one‑time onboarding flow. In Draftbit, your app runs on Expo + React Native using Expo Router under the hood. You don’t need to code navigation yourself: you describe what you want, and the AI (or presets) creates the right screens and folders.

Good to know

Expo Router uses a simple “file‑based” approach. The way screens and folders are arranged determines your app’s routes (URLs/paths) and navigation hierarchy. You’ll see this in the Screens list and the Preview’s All Routes view.

Navigation patterns

• Stack: Think of a deck of cards. You push a new screen on top (e.g., from Home to Product Details) and go back to the previous one.
• Tabs: A bar at the bottom (or top) with multiple sections (e.g., Home, Search, Profile). Each tab can have its own stack of screens.
• Drawers: A side panel that slides in (often used on Android) with links to key areas.

Most real apps use a combination, typically: Tabs at the bottom; each tab contains a Stack; sometimes there’s a Drawer around everything for power navigation.

How Expo Router maps to files

Here’s how structure translates to behavior under the hood:

• app/: The root of your screens. Each file or folder becomes a route (screen or group).
• (tabs)/: A “group” that renders a Tab navigator. Screens inside become Tab items.
• (stack)/: A group that renders a Stack navigator. Screens inside push on top of each other.
• _layout.tsx: The layout file inside a group that defines the navigator and screen options (titles, icons, etc.).
• index.tsx: The default screen for a folder (e.g., app/index.tsx is your Home route).
• [id].tsx: A dynamic route for details pages (e.g., /products/42).
• modal.tsx or (modals)/: Screens that appear as modals.

You don’t need to write these files yourself; the AI creates and maintains them when you describe the structure you want.

Recommended structure

For a typical consumer app, we recommend this high‑level setup:

Onboarding & Auth (optional but common)

• Show once for new users, or when logged out
• Screens: Welcome → Sign up → Log in → Forgot password

Main Tabs (core areas of the app)

• Home
• Browse/Search
• Activity/Notifications
• Profile/Account

Details Screens (opened from lists/cards)

• Product details, Post details, User profiles, etc.

Modal Screens (quick tasks)

• Filters, Create post, Edit profile, Settings

Route tree

A simple visual reference to how this looks in a file-based structure that Expo Router understands:

• Directoryapp

  • Directory(auth)

    • _layout.tsx
    • welcome.tsx
    • login.tsx
    • signup.tsx
  • Directory(tabs)

    • _layout.tsx
    • Directoryhome

      • index.tsx
      • [id].tsx
    • Directorysearch

      • index.tsx
      • filters.tsx
    • Directoryactivity

      • index.tsx
    • Directoryprofile

      • index.tsx
      • edit-profile.tsx

In the Preview’s All Routes view, you’ll see these sections laid out so you can sanity‑check flow.

Best practices

• Start simple, then expand: Begin with one or two tabs and a straightforward flow. Add more screens as your content grows.
• Name screens for people, not code: Clear names like “Order Details” or “Find Products” help everyone (and the AI) stay aligned.
• Group related screens: Keep list → details screens within the same tab/stack. It’s easier to reason about back behavior.
• Use modals for short tasks: Quick edits, filters, confirmations, and pickers feel better as modals than full screens.
• Keep the first tap obvious: Your index (home) screen should explain what to do next—primary CTA, top content, or simple menu.
• Avoid deep nesting: If users tap more than 3 levels deep, consider promoting important screens to a tab or using shortcuts.
• Test with Preview’s All Routes: Quickly check for missing screens, unexpected paths, or confusing names.

Naming screens

You can customize how a screen’s name appears in the Screens List without changing the actual file name or route. Open the screen, go to the Config tab in the Utility Panel, and set a File Label. See the AI App Builder → Config section for details.

Using AI

You can use plain language to create or change navigation in the AI Chat. Here are some example prompts:

• “Create a 4‑tab layout: Home, Search, Activity, Profile. Each tab should be a stack.”
• “Add a details screen that opens from Home when someone taps an item.”
• “Make a modal called Filters accessible from the Search tab.”
• “Add an onboarding stack with Welcome and Login, before the tabs.”
• “Rename ‘Activity’ to ‘Notifications’ and set the title to ‘Inbox’.”
• “In Profile, add an Edit Profile modal I can open from a button.”

Common tasks

• Link a button to another screen: Select the button, open the Config tab, choose “Navigate to…”, and pick the target screen.
• Open as a modal: When linking, choose the modal presentation option if available (or ask the AI to change presentation to modal).
• Pass data to a details screen: From a list, link to a details screen and pass the item’s ID (ask the AI to wire this up if unsure).
• Customize screen titles/icons: Ask the AI to “Set the Home tab’s icon to a house” or “Change the title of Details to Product.”
• Reorder tabs: Ask the AI: “Move Profile to the last tab.”

Pitfalls

• Duplicate or unclear names: If you have two “Details” screens in different places, rename them to “Product Details” vs “Order Details”.
• Missing index screens: Each group should have an index screen so navigation has a default destination.
• Overusing modals: Modals are great for quick tasks. For longer reading or multi‑step forms, use regular screens.
• Too many tabs: If you have more than 5 tabs, users may miss important areas. Consider tabs + stacks + shortcuts.

Troubleshooting

• “I can’t find my screen in Preview” → Switch to All Routes view; check naming; confirm the screen is inside the right group.
• “Back behaves strangely” → Ensure the screen lives in the correct stack/tab. Moving it to the right group usually fixes the back path.
• “My details screen is empty” → Make sure you’re passing the item data (or its ID). Ask the AI to wire the parameter into the screen.
• “Tabs not showing” → Confirm you actually have a (tabs) group with an _layout and at least one child screen.

Glossary

Term	Definition
Route	A path to a screen (like an address). The combination of folders/files defines it.
Stack	A pile of screens—new ones sit on top; back returns to the one below.
Tabs	A row of buttons at the bottom (or top) for switching sections.
Drawer	A side menu that slides in with navigation links.
Layout	A file that defines how screens in a folder work together (e.g., as tabs or a stack).
Dynamic route	A screen whose path includes a variable (like /products/[id]).