Navigation

The Expo Startup template uses Expo Router, a file-system based router for React Native and web applications. Expo Router provides a simple way to create native navigation experiences across platforms.

Navigation Types

The template includes two main types of navigation:

1. Tab Navigation - Bottom tabs for navigating between main sections of your app
2. Drawer Navigation - Side drawer for additional navigation options and user profile

Key Features

• File-System Based Routing - Create navigation simply by adding files to your app directory
• Type-Safe Navigation - Full TypeScript support for navigation parameters and routes
• Nested Navigation - Support for complex navigation patterns like tabs inside drawer
• Automatic Deep Linking - URLs work seamlessly across platforms
• Theming Support - Navigation elements adapt to your app's light/dark theme

Directory Structure

The template uses Expo Router's group notation for navigation:

app/
├── (drawer)/       # Drawer navigation group
│   ├── _layout.tsx  # Drawer layout configuration
│   └── (tabs)/      # Nested tabs inside drawer
│       ├── _layout.tsx  # Tab bar configuration
│       ├── home.tsx     # Home tab screen
│       ├── profile.tsx  # Profile tab screen
│       └── ...          # Other tab screens
├── _layout.tsx     # Root layout
└── ...             # Other routes

Getting Started

To navigate between screens, you can use Expo Router's Link component or the router object:

import { Link, router } from 'expo-router';
 
// Using Link component
<Link href="/profile">Go to Profile</Link>
 
// Using router.push
<Button onPress={() => router.push('/profile')}>Go to Profile</Button>

For detailed documentation on specific navigation components, check out the Tab Navigation and Drawer Navigation sections.