Navigation Patterns
Every app needs a way to move between screens. The choice of how - bottom tabs, a side menu, push-and-pop, modals - is one of the first things users notice, and one of the hardest to change later.
This page covers the four common patterns, when each fits, and how to ask the agent for the one you want.
The four patterns
1. Bottom tab bar
A row of icons at the bottom of the screen. Each is a top-level area. The most common pattern in modern apps.
Think Instagram, Twitter, TikTok, most banking apps. You tap a tab and you're in that area. Tap a different tab and you're somewhere else.
Use it when: your app has 3-5 top-level areas (Home, Discover, Messages, Profile).
"Use a bottom tab bar with four tabs: Home, Discover, Messages, Profile."
2. Stack - push and pop
The web-browser-style "go forward, go back." You tap something to go deeper (push a new screen on top). You hit back to return (pop to the previous one).
Every tab in a tab bar typically has its own stack: in Instagram, tapping a profile from the home tab pushes a profile screen inside that tab.
Use it when: users drill into details (a post → its comments → a reply → the replier's profile).
3. Modal - slides up from the bottom
A screen that slides up from below, usually for a focused, temporary task. Swipe down to dismiss.
Think: compose-a-tweet, confirm-a-purchase, edit-this-thing.
Use it when: a task is brief and has a clear start and end.
4. Drawer - the hamburger menu
A side panel that slides in from the edge. Contains links to other areas.
Think: most enterprise/B2B apps, Gmail, some admin tools.
Use it when: you have more than 5 top-level areas and a tab bar would be too crowded. Or it's a B2B app where users won't switch areas as often.
Don't use: consumer apps with 3-5 areas. Bottom tab bars are clearer.
Picking the primary pattern for your app
Most consumer mobile apps end up with:
Bottom tabs → with a stack inside each → with modals for focused tasks.
That's what Appsanic defaults to. It works for almost every app.
If you find yourself wanting more than 5 tabs, ask: can I combine some? If you genuinely can't (you're building an enterprise tool with 10 sections), switch to a drawer.
Asking the agent for navigation
You describe the user experience. The agent picks the right primitives.
Add a tab
"Add a 'Discover' tab between Home and Profile. Its first screen should show a feed of public posts."
Tap a row to drill in
"When a user taps a post in the home feed, open a post-detail screen. The tab bar at the bottom should stay visible."
By default, drilling into details inside a tab keeps the tab bar visible. Users don't feel "lost." If you want a full-screen experience that hides the tab bar (e.g., for a video player), ask explicitly.
A modal for a focused task
"Add a 'Compose' button at the bottom of the home tab. Tapping it slides up a compose modal. Swipe down or tap the X to close."
Different paths for signed-in vs signed-out users
"Signed-out users see only the log-in screen. Signed-in users see the tab bar."
The agent handles the routing logic. You don't have to wire up "if user is logged in, show this, else show that."
Deep links to a specific screen
"A link to /post/123 should open the post-detail screen directly."
See Deep Linking for setup.
Navigation feel - small things that matter
Swipe-back on iOS
By default, swiping from the left edge on iOS goes back. Don't override this unless you have a very specific reason (e.g., a payment flow where you don't want accidental dismissal):
"Disable swipe-to-go-back on the checkout screen so users don't lose their progress."
Android hardware back
The hardware/gesture back button on Android pops the stack. Same rule: don't override it unless you have to.
Headers (the title bar at the top)
Configurable per screen. Title, back button label, right-side actions:
"On the post-detail screen, set the header title to the post author's name, and add a Share button on the right."
Transition style
Default transitions are platform-native (slide on iOS, fade on Android). You can customise per screen:
"Use a fade transition instead of slide when moving between onboarding screens."
Patterns you see everywhere
If you want a particular look, sometimes the easiest description is a reference.
- Instagram-style - 5 tabs (Home, Search, Add, Reels, Profile), stacks inside each, modal for compose.
- Uber-style - main map with floating controls, bottom sheet for trip actions, modals for log-in and payment.
- Twitter-style - 4 tabs, floating compose button that opens a modal.
- Linear-style - drawer for accounts, tab bar for areas within an account, stack for drilling down.
"Lay out the app like Twitter: 4 bottom tabs (Home, Explore, Notifications, DMs) with a floating compose button that opens a modal."
What to avoid
- Deep stacks. If a user has to drill through 5 screens to do something, something's wrong with the design. Use a modal or a dedicated section.
- Tab bars that disappear unexpectedly. Users get lost.
- Custom back buttons that look like system back but don't work like it. Hugely frustrating.
- Modals on modals on modals. Users feel trapped. One modal at a time is the rule.
Under the hood (for engineers)
Appsanic builds navigation on React Navigation v7 (there is no Expo Router). Navigators are composed in code rather than inferred from a file tree. A typical exported project nests them like this:
App.tsx <- root: forks on auth state
screens/
HomeScreen.tsx
DiscoverScreen.tsx
LoginScreen.tsx
PostDetailScreen.tsx
ComposeScreen.tsx- The root navigator in
App.tsxtypically switches between an auth stack (signed-out) and the main app (signed-in). - The main app is usually a bottom tab navigator, and each tab holds its own native stack navigator so drilling in keeps the tab bar visible.
- Modals are presented by a stack screen configured with
presentation: 'modal'. - Dynamic destinations such as a post detail receive their id through route params (for example
navigation.navigate('PostDetail', { id })), and deep links map a URL like/post/123onto that route via thelinkingconfig. See Editing Exported Code for the full project layout.
Next
Read Deep Linking to make your navigation addressable from URLs.