Skip to content

Navigation (routing)

LeoTM edited this page Oct 29, 2022 · 22 revisions

RN

React Navigation

If you are getting started with navigation, you will probably want to use React Navigation. React Navigation provides a straightforward navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both Android and iOS.

react-native-router-flux: this library is based on React Navigation but provides you with a different API to interact with it.

React Navigation 6.x, freshly baked out the oven

https://www.youtube.com/watch?v=xKOkILSLs0Q&t=10210s

  • Jan15 NavigatorIOS, native, smooth, limited styling
  • Mar15 (RN Android launch) Navigator, JS, customisable
  • Feb16 NavigationExperimental (fb), low level, customisable, hard
  • Mar16 React Native Navigation (Wix), screens separate registered upfront, JS + some native, not everything pos
  • Jun16 Ex-Navigation (Expo) JS, tabs/drawer/etc, customisable
  • Sep16 Native Navigation (airbnb) beta Easier brownfield integration, screens registered upfront
  • Jan17 React Navigation 4 (community/fb/expo) JS, customisable, screens static API
  • Feb20 React Navigation 5 (community/fb/expo) dynamic API, component-based, hard migration
  • 21 React Navigation 6, screen props, @react-navigation/elements for any app, easier transitions, easier headers, transparent modals, easier nav from outside components (redux), flat nav tree for less nesting (TS, perf, etc), Stack.Group (config, not fragments, good perf, no nesting), renders header by default, Native navigation - native primitives (perf), some default type checking, declare root type (declaration merging), Flipper - React Navigation (Redux Devtools not flexible) and not using Chrome Debugger, migration guide (breaking changes, deprecations, mix v5/v6 pkgs), GitHub Discussions

Example

https://github.com/react-navigation/react-navigation/tree/main/example

React Native Navigation

If you're integrating React Native into an app that already manages navigation natively, or looking for an alternative to React Navigation, the following library provides native navigation on both platforms: react-native-navigation

React Router Native

https://v5.reactrouter.com/native/guides/quick-start

https://github.com/remix-run/react-router/tree/main/packages/react-router-native


React Nonav

Experimental React Native declarative navigation

https://github.com/tpucci/react-nonav

Native Navigation

https://github.com/airbnb/native-navigation

Clone this wiki locally