React Navigation v8 Crash Course - Liquid Glass, Tabs & More

React Navigation version 8 brings major improvements including static configuration, liquid glass support for iOS 26, material colors for Android, and a much better TypeScript experience. This video guides you through building a React Native app from scratch using the latest React Navigation features.

If you want full control over navigation without relying on file-based routing like Expo Router, this crash course is for you. You'll learn installation, setup, stacks, bottom tabs, modals, dark mode, and authentication flows with clean, type-safe code.

What's inside

• Introduction to React Navigation v8 and its new features
• Installing dependencies and setting up a new Expo project with TypeScript
• Understanding static vs dynamic navigation configuration
• Creating stack and bottom tab navigators with liquid glass and material colors
• Running the app on iOS and Android with Expo prebuild and development builds
• Using React Navigation elements for custom navigation components
• Handling authentication flows with React Navigation v8
• Tips on compatibility with iOS 18 and iOS 26 liquid glass effects

Introduction to React Navigation v8 and its new features

React Navigation v8 is one of the biggest updates in years. It supports static configuration for simpler navigation declarations, liquid glass effects on iOS 26 out of the box, and material design colors on Android. The TypeScript support is improved to actually work well in real projects.

I explain that while Expo Router is popular, many companies still use React Navigation directly, especially for jobs requiring React Native expertise. This tutorial is for developers who want full control over navigation without file-based routing, focusing on customizable and type-safe navigation.

Installing dependencies and setting up a new Expo project with TypeScript

I start by creating a new Expo project using the blank TypeScript template with SDK 55 or above, which is required for React Navigation v8 compatibility. I use Warp terminal for convenience but the commands are standard.

I install the alpha version of React Navigation native packages, React Native screens, safe area context, and the native stack navigator. React Navigation elements are also installed to provide customizable navigation components like buttons and links.

After installing, the project is prebuilt with npx expo prebuild to generate native iOS and Android folders, then compiled and run on both platforms. This setup ensures you can use the latest React Navigation features including liquid glass on supported iOS versions.

Understanding static vs dynamic navigation configuration

React Navigation v8 supports two ways to declare navigation: static and dynamic. Static configuration uses a simple JavaScript object to define screens and their components, which is recommended for most apps due to simplicity and built-in deep linking support.

Dynamic configuration wraps screens inside components, similar to older React Navigation versions or Expo Router. This approach is more flexible for runtime conditional screens like authentication flows or feature flags but requires more boilerplate.

I focus on teaching the static API in this video because it is simpler and covers most use cases, while still showing how to handle dynamic needs when necessary.

Creating stack and bottom tab navigators with liquid glass and material colors

I demonstrate how to create stack navigators and bottom tab navigators using React Navigation native stack and bottom tabs packages. Liquid glass effects are enabled on iOS 26 devices, providing a modern translucent background style.

On Android, material colors are applied automatically to match platform design guidelines. I show how to customize tab bar styles and icons, and how to combine stacks inside tabs for complex navigation flows.

This setup gives you a polished, platform-consistent navigation UI with minimal configuration.

Running the app on iOS and Android with Expo prebuild and development builds

Because React Navigation v8 requires Expo SDK 55 or newer and is not compatible with Expo Go, I explain how to create a development build using npx expo prebuild and run it on iOS and Android simulators.

I run the app on an iPhone 16 Pro with iOS 18 and an Android emulator, showing live reload and smooth startup. I also notes that liquid glass effects only work on iOS 26 and recommends testing on older iOS versions to ensure backward compatibility.

This approach ensures you can develop and test React Navigation v8 features fully on both platforms.

Using React Navigation elements for custom navigation components

React Navigation elements is a package providing customizable components like buttons and links designed to work seamlessly with React Navigation. While optional, I includes it to simplify creating custom navigation UI elements.

These components help maintain consistent styling and behavior across your app’s navigation without reinventing the wheel. I show how to install and import these elements for use in headers, tab bars, or custom screens.

Handling authentication flows with React Navigation v8

Towards the end, I cover how React Navigation v8 simplifies authentication flows. Using the static API and conditional rendering, you can cleanly separate logged-in and logged-out navigation stacks.

This approach reduces boilerplate and improves maintainability compared to older patterns. I demonstrate how to toggle between auth and main app flows based on user state, leveraging React Navigation’s improved type safety and configuration.

Tips on compatibility with iOS 18 and iOS 26 liquid glass effects

Since liquid glass effects are only supported on iOS 26 and newer, I advise running your app on older iOS versions like iOS 18 to verify UI fallback and compatibility.

I explain that React Navigation v8 automatically enables liquid glass on supported devices but you should always test on multiple iOS versions to ensure a consistent user experience.

This practical advice helps avoid surprises when deploying to users with older devices.

Resources

CourseReact Native course

Master React Native fundamentals and ship real apps with lifetime access.

Premium resourcePro membership

Get exclusive tutorials, Q&A, and community support for React Native developers.