{"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.","language":"javascript","status":"maintenance","last_verified":"Thu Apr 23","install":{"commands":["npm install react-navigation-redux-helpers"],"cli":null},"imports":["import { createReduxContainer } from 'react-navigation-redux-helpers';","import { createReactNavigationReduxMiddleware } from 'react-navigation-redux-helpers';","import { createNavigationReducer } from 'react-navigation-redux-helpers';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}