react-native-router-flux
The first declarative React Native router
React Native Router Flux lets you define all your mobile app's screens in one central place and navigate between them with simple function calls like Actions.home() from anywhere in your code.
React Native Router Flux is a JavaScript library that helps developers manage navigation in mobile apps built with React Native. React Native is a framework for writing iPhone and Android apps using JavaScript. This library sits on top of another library called React Navigation and provides a different, more centralized way to define and control how users move between screens.
The core idea is that instead of scattering navigation logic across many different files, you define all your app's screens in one place at the top of your project. Each screen gets a short name called a key. Then from anywhere else in the app, you call something like Actions.home() to go to the home screen, or Actions.pop() to go back, without needing to pass navigation objects around or reference specific screen components.
Version 4, which is the current supported version, adds a built-in state machine. This means you can attach logic to screens: when a user tries to enter a screen, you can run a check first (like verifying they are logged in), and then route them to a success screen or a fallback screen depending on the result. This makes conditional flows like authentication or data validation easier to express.
The library also supports navigation drawers, inheriting settings across groups of screens, and observing the current navigation state from outside the UI layer, which is useful if your app uses a state management system like MobX.
It requires several supporting libraries to be installed alongside it, including react-native-gesture-handler and react-native-reanimated. The README notes that version 5 is in early alpha and that the project inherits limitations from React Navigation's underlying architecture. Example apps for Expo, plain React Native, and Redux setups are included in the repository.
Where it fits
- Define all screens in a React Native app centrally and navigate between them from any component using short key names.
- Add authentication guards to screens using the built-in state machine, redirect unauthenticated users automatically.
- Build a mobile app with a navigation drawer and grouped screens that inherit shared settings from a parent definition.
- Integrate navigation state with MobX so external state management logic can observe and trigger screen transitions.