{"id":17892,"library":"react-navigation-redux-helpers","title":"React Navigation Redux Integration Helpers","description":"This package provides utilities and middleware to integrate React Navigation's state management with Redux. It allows developers to store and manipulate navigation state directly within a Redux store, enabling use cases like custom navigation actions, advanced state persistence, and synchronized state validation between navigation and other application data. The current stable version is 4.0.1, primarily compatible with React Navigation v3 and v4. It does not actively support React Navigation v5 and newer, which moved to a different state management paradigm based on context and hooks. Release cadence has historically been tied to major and minor releases of React Navigation v3 and v4, with recent activity focused on maintenance and compatibility fixes for those older ecosystems. Key differentiators include direct Redux control over navigation state, enabling custom router logic via Redux actions/reducers, and granular control over state persistence, which are harder to achieve with default React Navigation containers.","status":"maintenance","version":"4.0.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/react-navigation/redux-helpers","tags":["javascript"],"install":[{"cmd":"npm install react-navigation-redux-helpers","lang":"bash","label":"npm"},{"cmd":"yarn add react-navigation-redux-helpers","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-navigation-redux-helpers","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React components.","package":"react","optional":false},{"reason":"Core navigation logic for React Navigation v3/v4.","package":"@react-navigation/core","optional":false},{"reason":"Required for Redux store integration and middleware.","package":"redux","optional":false}],"imports":[{"note":"Primarily designed for ES Modules. CommonJS require() syntax is supported but less idiomatic in modern React/Redux projects.","wrong":"const createReduxContainer = require('react-navigation-redux-helpers').createReduxContainer;","symbol":"createReduxContainer","correct":"import { createReduxContainer } from 'react-navigation-redux-helpers';"},{"note":"This function is crucial for linking Redux actions to React Navigation's event listeners.","wrong":"const createReactNavigationReduxMiddleware = require('react-navigation-redux-helpers').createReactNavigationReduxMiddleware;","symbol":"createReactNavigationReduxMiddleware","correct":"import { createReactNavigationReduxMiddleware } from 'react-navigation-redux-helpers';"},{"note":"Used to generate a Redux reducer that manages the navigation state for a given React Navigation navigator.","wrong":"const createNavigationReducer = require('react-navigation-redux-helpers').createNavigationReducer;","symbol":"createNavigationReducer","correct":"import { createNavigationReducer } from 'react-navigation-redux-helpers';"}],"quickstart":{"code":"import { createStackNavigator } from 'react-navigation';\nimport { createStore, applyMiddleware, combineReducers } from 'redux';\nimport { createReduxContainer, createReactNavigationReduxMiddleware, createNavigationReducer } from 'react-navigation-redux-helpers';\nimport { Provider, connect } from 'react-redux';\nimport React from 'react';\nimport { View, Text, Button } from 'react-native';\n\n// Define some dummy screens and a navigator\nclass HomeScreen extends React.Component {\n  render() {\n    return (\n      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\n        <Text>Home Screen</Text>\n        <Button\n          title=\"Go to Details\"\n          onPress={() => this.props.navigation.navigate('Details')}\n        />\n      </View>\n    );\n  }\n}\n\nclass DetailsScreen extends React.Component {\n  render() {\n    return (\n      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\n        <Text>Details Screen</Text>\n        <Button\n          title=\"Go back\"\n          onPress={() => this.props.navigation.goBack()}\n        />\n      </View>\n    );\n  }\n}\n\nconst AppRouteConfigs = {\n  Home: HomeScreen,\n  Details: DetailsScreen,\n};\n\nconst AppNavigator = createStackNavigator(AppRouteConfigs);\n\nconst navReducer = createNavigationReducer(AppNavigator);\nconst appReducer = combineReducers({\n  nav: navReducer,\n  // Add other application reducers here if needed\n});\n\nconst middleware = createReactNavigationReduxMiddleware(\n  state => state.nav,\n);\n\nconst App = createReduxContainer(AppNavigator);\nconst mapStateToProps = (state) => ({\n  state: state.nav,\n});\nconst AppWithNavigationState = connect(mapStateToProps)(App);\n\nconst store = createStore(\n  appReducer,\n  applyMiddleware(middleware),\n);\n\nclass Root extends React.Component {\n  render() {\n    return (\n      <Provider store={store}>\n        <AppWithNavigationState />\n      </Provider>\n    );\n  }\n}\n\nexport default Root;\n","lang":"javascript","description":"This example demonstrates how to set up a basic React Navigation stack navigator and integrate its state management with a Redux store using `react-navigation-redux-helpers`. It defines a simple app structure, creates a Redux store with the navigation reducer, applies the Redux middleware, and connects the navigator to the Redux state."},"warnings":[{"fix":"For React Navigation v5+, use its built-in state management via context and hooks, or explore community solutions designed specifically for the v5+ architecture if Redux integration is still desired.","message":"This library is designed for React Navigation v3 and v4. It is not compatible with React Navigation v5 and newer, which introduced a complete architectural overhaul based on React Context and hooks, making this Redux integration pattern obsolete for newer versions.","severity":"breaking","affected_versions":">=5.0.0 (React Navigation)"},{"fix":"If using React Navigation 3.11 or earlier, stick to `react-navigation-redux-helpers` versions below 4.0.0 (e.g., `^3.0.x`). Alternatively, upgrade your `react-navigation` dependency to 3.12 or 4.x.","message":"Version 4.0.0 introduced the `ThemeContext` and explicitly broke compatibility with React Navigation 3.11 and earlier versions. Projects on older React Navigation 3 releases should not upgrade to `react-navigation-redux-helpers@4.0.0` or higher.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Ensure that the `@react-navigation/core` Flow libdef is correctly installed and configured in your project. This typically involves adding it to your `[libs]` section in `.flowconfig`.","message":"For Flow users, versions 4.0.1 and 3.0.8 (and later maintenance releases in those lines) import directly from `@react-navigation/core`. This necessitates installing the `@react-navigation/core` libdef in your Flow setup, even if you primarily use `react-navigation` itself, potentially leading to Flow type errors if not handled.","severity":"gotcha","affected_versions":">=4.0.1, >=3.0.8"},{"fix":"If encountering issues with `react-native-safe-area-context`, ensure you are on a version that explicitly supports it or avoid using `react-navigation-redux-helpers` versions in the problematic range, especially if your project doesn't handle native linking for that specific dependency.","message":"Changes related to `react-native-safe-area-context` imports and context exposure (introduced in 3.0.4) were problematic, leading to backing out of the dependency in 3.0.6 due to native linking requirements. This indicates potential instability or complex setup if trying to integrate with `react-native-safe-area-area-context` in older `react-navigation-redux-helpers` versions.","severity":"gotcha","affected_versions":"3.0.4 - 3.0.6"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"fix":"Verify that your Redux root reducer correctly assigns the `createNavigationReducer(AppNavigator)` output to the key specified in `createReactNavigationReduxMiddleware((state) => state.YOUR_KEY)`. Ensure the Redux store is initialized before the navigator attempts to access its state.","cause":"The `navStateSelector` function passed to `createReactNavigationReduxMiddleware` cannot find the navigation state within your Redux store, or the `navReducer` has not been properly assigned to the `nav` key (or whatever key is used) in your `combineReducers` setup.","error":"TypeError: Cannot read properties of undefined (reading 'nav')"},{"fix":"Double-check that `applyMiddleware(middleware)` is included when creating your Redux store and that `AppWithNavigationState` (the connected component) is correctly receiving the navigation state via `mapStateToProps`.","cause":"This error typically indicates that `createReduxContainer` was used, but the Redux middleware (`createReactNavigationReduxMiddleware`) was not correctly applied to your Redux store, or the navigation state is not being correctly passed to the connected navigator component.","error":"Invariant Violation: The navigator's state is not managed by Redux."},{"fix":"Install the `@react-navigation/core` Flow libdef (e.g., `yarn add --dev flow-typed` then `flow-typed install @react-navigation/core@*` or manually link the definition) and ensure it's referenced in your `.flowconfig`.","cause":"You are likely using Flow and one of the affected versions of `react-navigation-redux-helpers` (e.g., 4.0.1, 3.0.8) which imports types from `@react-navigation/core`, but your Flow setup does not include the necessary libdef.","error":"Flow error: Cannot import '@react-navigation/core' or missing type definition for '@react-navigation/core'."},{"fix":"Ensure all `react-navigation` related packages (including `react-navigation-redux-helpers`) are using compatible versions. If using TypeScript, check for `@types/react-navigation` or `@types/react-navigation-redux-helpers` and their versions. You might need to cast types or update type definitions if they are outdated.","cause":"This is a common type mismatch when the version of `react-navigation` or `react-navigation-redux-helpers` types don't perfectly align, or when custom type definitions for navigation state are used without proper compatibility.","error":"Type 'NavigationState' is not assignable to type 'Partial<Readonly<NavigationState>>' in TypeScript or Flow."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}