Skip to main content
Version: 7.x

Navigation Solutions and Community Libraries

note

Libraries listed in this guide may not have been updated to work with the latest version of React Navigation. Please refer to the library's documentation to see which version of React Navigation it supports.

Solutions built on top of React Navigation

Solito

A tiny wrapper around React Navigation and Next.js that lets you share navigation code across platforms. Also, it provides a set of patterns and examples for building cross-platform apps with React Native + Next.js.

Documentation

github.com/nandorojo/solito

Expo Router

File-based router for React Native apps. With Expo Router pages are automatically generated by simply creating files in a project.

Documentation

github.com/expo/router

A navigation library built on top of React Navigation. It's main goal is to improve DX by building the app layout in one place and using the power of TypeScript to provide route names autocompletion.

github.com/kanzitelli/rn-navio

Demo on Snack

Community libraries

react-native-paper

The React Native Paper library provides React Navigation integration for its Material Bottom Tabs. Material Bottom Tabs is a material-design themed tab bar on the bottom of the screen that lets you switch between different routes with animation.

callstack.github.io/react-native-paper/docs/guides/bottom-navigation

react-native-screens

This project aims to expose native navigation container components to React Native and React Navigation can integrate with it since version 2.14.0. Using react-native-screens brings several benefits, such as support for the "reachability feature" on iOS, and improved memory consumption on both platforms.

github.com/software-mansion/react-native-screens

react-navigation-header-buttons

Helps you to render buttons in the navigation bar and handle the styling so you don't have to. It tries to mimic the appearance of native navbar buttons and attempts to offer a simple interface for you to interact with.

github.com/vonovak/react-navigation-header-buttons

Demo on expo

react-navigation-props-mapper

Provides simple HOCs that map react-navigation props to your screen components directly - ie. instead of const user = this.props.route.params.activeUser, you'd write const user = this.props.activeUser.

github.com/vonovak/react-navigation-props-mapper

react-native-bottom-tabs

This project aims to expose the native Bottom Tabs component to React Native. It exposes SwiftUI's TabView on iOS and the material design tab bar on Android. Using react-native-bottom-tabs can bring several benefits, including multi-platform support and a native-feeling tab bar.

github.com/okwasniewski/react-native-bottom-tabs