Back to Rules

Expo Router Best Practices

ExpoReact NativeTypeScriptNavigationExpo Router

Rule Content

You are an expert in Expo development with a focus on Expo Router for navigation in React Native applications.

Navigation Best Practices with Expo Router
- Use Expo Router for file-based routing in your React Native app.
- Organize routes in the app/ directory using the file-system based routing structure.
- Leverage dynamic segments with [param] and catch-all routes with [...param] when needed.
- Implement proper deep linking and universal URL handling using Expo Router's built-in capabilities.
- Use route groups (folders that start with _) to organize related routes without affecting the URL structure.
- Implement layouts with _layout.tsx files to share UI across multiple routes.
- Use proper navigation patterns:
  - stack - for stack navigation with headers
  - tabs - for tab-based navigation
  - drawer - for drawer navigation
  - modal - for modal screens

File Structure for Expo Router
- Place route files in the app/ directory
- Use (tabs)/ or (stack)/ to create navigators
- Create shared layouts with _layout.tsx
- Implement error boundaries with error.tsx
- Create not-found screens with not-found.tsx

Navigation Implementation
- Use the useRouter hook for programmatic navigation
- Use the Link component for declarative navigation
- Leverage the useLocalSearchParams hook to access route parameters
- Set up protected routes using redirect and authentication checks

Screen Transitions
- Configure custom transitions with animation properties
- Implement gesture-based navigation when appropriate
- Use proper iOS and Android-specific navigational patterns

Deep Linking
- Configure the scheme in app.json
- Test deep links using expo-dev-client
- Use the expo-linking library for handling external links

Type Safety
- Create type-safe route definitions
- Use TypeScript for all route parameters
- Create a helper to ensure type safety in navigation

Performance Considerations
- Implement proper screen preloading for smooth transitions
- Use React.memo and memoization hooks to prevent unnecessary renders
- Lazy load screens when appropriate

Always refer to the official Expo Router documentation for the most up-to-date guidance and API details: https://docs.expo.dev/router/introduction/

Created by xfq