https://github.com/coby-sonn/react-native-expo-navigation-example
An example and guide to correctly nest expo navigation stacks, tabs and modals. A repo accompanying my Medium blog post, featured in ThisWeekInReact edition 214.
https://github.com/coby-sonn/react-native-expo-navigation-example
expo navigation reactnative
Last synced: 8 months ago
JSON representation
An example and guide to correctly nest expo navigation stacks, tabs and modals. A repo accompanying my Medium blog post, featured in ThisWeekInReact edition 214.
- Host: GitHub
- URL: https://github.com/coby-sonn/react-native-expo-navigation-example
- Owner: Coby-Sonn
- Created: 2024-12-11T09:54:28.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-02T18:57:21.000Z (over 1 year ago)
- Last Synced: 2025-02-08T01:35:23.650Z (over 1 year ago)
- Topics: expo, navigation, reactnative
- Language: JavaScript
- Homepage: https://medium.com/@coby09/building-seamless-navigation-in-expo-router-tabs-modals-and-stacks-2df1a5522321
- Size: 155 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📝 Expo Navigation Example
## 💡 TL;DR - tabs and modals navigation nested within stacks navigation using expo all around.
This repository contains an example of using Expo Router to set up a navigation system for an app with separate external and internal page stacks. It demonstrates how to implement tab navigation inside the internal stack while keeping the external stack (e.g., authentication pages) separate. Please take a look at my Medium blog post for more details @ https://medium.com/@coby09/building-seamless-navigation-in-expo-router-tabs-modals-and-stacks-2df1a5522321
This was also featured on ThisWeekInReact's newsletter edition 214, and in InfiniteRed's RN newsletter.
## ⚠️ Problem
I encountered several issues while working with this app structure that involved routing and modal navigation across two main flows: external pages (e.g., authentication) and internal app pages (after sign-in). Here’s a summary of the problems I faced and the structure of the app:
### 🗂️📂 App Structure
- **app/_layout.js**: Controls the external pages (e.g., authentication flow).
- **app/(tabs)_layout.js**: Controls the internal app pages (after sign-in) and includes the tab navigation.
- **Tab Screens**: Contains the main app functionality (e.g., home, music) within the `app/(tabs)` directory.
- **External Screens**: Responsible for sign-in pages and other pre-sign-in content, located in the `app/_layout` directory.
```
ExpoNavigationStackExample
├── app
│ ├── auth
│ │ ├── _layout.jsx
│ │ ├── login.jsx
│ │ ├── signUp.jsx
│ │ └── welcome.jsx
│ ├── modals
│ │ ├── _layout.jsx
│ │ └── exampleModal.jsx
│ ├── tabs
│ │ ├── _layout.jsx
│ │ ├── anotherPage.jsx
│ │ ├── home.jsx
│ │ └── thirdPage.jsx
│ ├── _layout.jsx
│ └── index.jsx
├── assets
├── components
│ └── tabBar.jsx
├── app.json
├── package.json
└── ...
```
### 🐛 Issues Encountered
- **Back Navigation Issues**: The `router.back()` didn’t work as expected. For instance, swiping left on iOS returned me to the external authentication pages instead of staying within the internal app pages. I wanted back navigation to stay within the app unless explicitly directed to return to the external pages.
- **Modal Navigation**: Modals were not behaving as expected across different navigation stacks. I wanted to open modals within both the external and internal flows, but some pages were not properly defined in the stacks, leading to issues with modal presentation.
- **Tab Screen Back Navigation**: When using `router.back()` within a tab screen, I was always sent to the first tab, even when I reordered the tabs. The goal was for back navigation to stay within the current stack and not always reset to the first tab.
### ⭐ Desired Outcome
The goal was to achieve the following:
- Ensure back navigation works correctly within both the external and internal app flows without returning to the external pages unless explicitly desired.
- Implement proper modal navigation across both flows.
- Make sure back navigation works as expected within the tab screens, staying within the current screen stack.
## 🛠️ Installation
To get started, follow these steps:
1. **Initialize the app with Expo**:
```bash
npx create-expo-app react-native-expo-navigation-example
```
2. **Install dependencies**:
- **Expo Router**:
```bash
npm install expo-router
```
- **TypeScript dependencies**:
```bash
npm install typescript @types/react @types/react-native
```
- **React Native SVG (for icons)**:
```bash
npm install react-native-svg
```
- **Splash Screen**:
```bash
npm install expo-splash-screen
```
3. **Run the app**:
```bash
npx expo start
```
## Conclusion
This example should serve as a useful starting point for implementing navigation with Expo Router, where you have a clear separation between external authentication flows and internal app functionality, including tab navigation. You can adapt this approach to any app that requires a similar structure, whether it's for a social media app or any other type of app.