How do I handle back button presses in React Native Router Flux?

Set back=true in your Scene and use Actions.refresh in componentDidMount to dynamically update the onBack handler, as detailed in the README's helpful tips section. This workaround is necessary because direct onBack props alone don't trigger component state changes.

React Native Router Flux vs React Navigation: which one should I choose?

Choose RNRF if you want a declarative, centralized API with lifecycle hooks for complex navigation logic. Opt for React Navigation directly if you prefer more control, fewer abstractions, or need to stay updated with the latest features without RNRF's version lag.

How to implement authentication with onEnter in RNRF?

Define an onEnter handler in your Scene that checks auth status; if it returns false, use the failure prop to redirect to login. The success prop can navigate to protected scenes, making it ideal for flow control as described in the v4 Features.

Does RNRF support React Navigation v5?

Support is in early alpha (v5.0.alpha.x) and not stable for production. The README notes that development is in progress, so for reliable use, stick with v4.x based on React Navigation v4.x and monitor updates carefully.

What are common issues with static methods in HOCs when using RNRF?

Static methods like onEnter or onExit may not work with higher-order components unless you use hoist-non-react-statics to copy them over, as highlighted in the README's tips. This adds extra steps for decorator patterns.

How to customize the navigation bar beyond default options in RNRF?

Use scene attributes like navigationBar or custom header components in your Router or Scene configs. The README mentions this addresses React Navigation's customization limitations, but it requires manual styling and configuration.

Is RNRF compatible with Expo managed workflow?

It may require ejecting or using a custom dev client due to dependencies on native libraries like react-native-reanimated. Check Expo's compatibility docs for each library, as some might not work out-of-the-box in managed workflows.

react-native-router-flux — Declarative React Native Navigation

What is react-native-router-flux?

React Native Router Flux is a routing library for React Native that provides a declarative API wrapper around React Navigation. It simplifies navigation by allowing developers to define all routes centrally and navigate between screens with an intuitive API. The library addresses the complexity of managing navigation state and transitions in React Native applications.

Target Audience

React Native developers building mobile applications who want a more structured and declarative approach to navigation than what React Navigation offers out-of-the-box. It's particularly useful for teams managing complex navigation flows or integrating with state management libraries like MobX or Redux.

Value Proposition

Developers choose React Native Router Flux for its centralized route configuration, simplified navigation API, and additional features like lifecycle hooks and nav bar customization that extend React Navigation. It reduces boilerplate and makes navigation logic more maintainable and testable.

The first declarative React Native router

Use Cases

Best For

Defining all app routes in a single centralized component
Simplifying navigation calls with a clean API like Actions.home()
Implementing authentication flows with onEnter/onExit handlers
Customizing navigation bars beyond React Navigation's defaults
Integrating navigation state with MobX or Redux stores
Managing complex conditional transitions between screens

Not Ideal For

Projects that require immediate access to the latest React Navigation features, as RNRF versions often lag behind upstream updates.
Apps with very simple, linear navigation where React Navigation alone is sufficient and the additional abstraction adds unnecessary complexity.
Teams that prefer imperative navigation control or need to heavily customize React Navigation's native API without an intermediary layer.
Large organizations with strict dependency management policies, due to RNRF's complex version matrix and multiple native library requirements.

Pros & Cons

Pros

Centralized Route Management

Define all scenes in a single React component, making the navigation structure easy to visualize and maintain, as shown in the usage example where Router wraps all Scene definitions.

Intuitive Navigation API

Provides simple methods like Actions.home() and Actions.pop(), reducing boilerplate compared to React Navigation's native API and streamlining navigation calls from anywhere in the app.

Powerful Lifecycle Hooks

Supports onEnter, onExit, success, and failure handlers, enabling seamless implementation of authentication flows and conditional transitions directly in route definitions.

Enhanced Nav Bar Customization

Offers flexible navigation bar customization beyond React Navigation's defaults, addressing known limitations as mentioned in the README's motivation section.

State Management Integration

Friendly with MobX and Redux, allowing navigation state to be observed and managed from business logic layers, which is highlighted in the philosophy and features.

Cons

Version Fragmentation Headaches

Multiple versions tied to different React Navigation releases (e.g., v4.x for React Navigation v4.x, v5 in alpha), leading to confusion and challenging upgrades, as admitted in the IMPORTANT NOTES section.

Additional Setup Burden

Requires installing several native dependencies like react-native-reanimated and react-native-gesture-handler, adding complexity to project initialization compared to bare React Navigation.

Inherited Upstream Limitations

Directly inherits all bugs and limitations from React Navigation, so any issues in the underlying library affect RNRF without workarounds, as stated in the README.

Documentation Pitfalls

The README includes 'Helpful tips for gotchas,' indicating that features like back button handling or HOC integration are under-documented and require community knowledge to implement correctly.

Frequently Asked Questions

What is react-native-router-flux?

Target Audience

Value Proposition

Use Cases

Best For

Defining all app routes in a single centralized component
Simplifying navigation calls with a clean API like Actions.home()
Implementing authentication flows with onEnter/onExit handlers
Customizing navigation bars beyond React Navigation's defaults
Integrating navigation state with MobX or Redux stores
Managing complex conditional transitions between screens

Not Ideal For

Projects that require immediate access to the latest React Navigation features, as RNRF versions often lag behind upstream updates.
Apps with very simple, linear navigation where React Navigation alone is sufficient and the additional abstraction adds unnecessary complexity.
Teams that prefer imperative navigation control or need to heavily customize React Navigation's native API without an intermediary layer.
Large organizations with strict dependency management policies, due to RNRF's complex version matrix and multiple native library requirements.

Pros & Cons

Pros

Centralized Route Management

Define all scenes in a single React component, making the navigation structure easy to visualize and maintain, as shown in the usage example where Router wraps all Scene definitions.

Intuitive Navigation API

Provides simple methods like Actions.home() and Actions.pop(), reducing boilerplate compared to React Navigation's native API and streamlining navigation calls from anywhere in the app.

Powerful Lifecycle Hooks

Supports onEnter, onExit, success, and failure handlers, enabling seamless implementation of authentication flows and conditional transitions directly in route definitions.

Enhanced Nav Bar Customization

Offers flexible navigation bar customization beyond React Navigation's defaults, addressing known limitations as mentioned in the README's motivation section.

State Management Integration

Friendly with MobX and Redux, allowing navigation state to be observed and managed from business logic layers, which is highlighted in the philosophy and features.

Cons

Version Fragmentation Headaches

Additional Setup Burden

Requires installing several native dependencies like react-native-reanimated and react-native-gesture-handler, adding complexity to project initialization compared to bare React Navigation.

Inherited Upstream Limitations

Directly inherits all bugs and limitations from React Navigation, so any issues in the underlying library affect RNRF without workarounds, as stated in the README.

Documentation Pitfalls

The README includes 'Helpful tips for gotchas,' indicating that features like back button handling or HOC integration are under-documented and require community knowledge to implement correctly.

Frequently Asked Questions

react-native-router-flux

What is react-native-router-flux?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?

react-native-router-flux

What is react-native-router-flux?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?