CODEWITHSUNDEEP
react-nativereduxreact-reduxreact-navigation
yuva
yuva

Reputation: 3318

Best Navigation Solution for React-Native that works with Redux

It seems that Fall 2018 onwards React Navigation which is probably the most robust navigation solution for React-Native is abandoning Redux support.

Warning: in the next major version of React Navigation, to be released in Fall 2018, we will no longer provide any information about how to integrate with Redux and it may cease to work. Issues related to Redux that are posted on the React Navigation issue tracker will be immediately closed. Redux integration may continue to work but it will not be tested against or considered when making any design decisions for the library.

Now, is there any other library that works perfectly with React-Native + Redux?

Upvotes: 0

Views: 422

Answers (1)

Haider Ali
Haider Ali

Reputation: 1285

Its already written here. You can use react-navigation-redux-helpers for passing your own navigation prop. Also do check this example.

Just in case the above links are removed, here are the steps to follow from the link itself (COPIED) -

Step-by-step guide

The following steps apply to react-navigation@^2.3.0 and react-navigation-redux-helpers@^2.0.0-beta.

First, you need to add the react-navigation-redux-helpers package to your project.

yarn add react-navigation-redux-helpers

or

npm install --save react-navigation-redux-helpers

The following is a minimal example of how you might use navigators within a Redux application:

import {
  createStackNavigator,
} from 'react-navigation';
import {
  createStore,
  applyMiddleware,
  combineReducers,
} from 'redux';
import {
  reduxifyNavigator,
  createReactNavigationReduxMiddleware,
  createNavigationReducer,
} from 'react-navigation-redux-helpers';
import { Provider, connect } from 'react-redux';
import React from 'react';

const AppNavigator = createStackNavigator(AppRouteConfigs);

const navReducer = createNavigationReducer(AppNavigator);
const appReducer = combineReducers({
  nav: navReducer,
  ...
});

// Note: createReactNavigationReduxMiddleware must be run before reduxifyNavigator
const middleware = createReactNavigationReduxMiddleware(
  "root",
  state => state.nav,
);

const App = reduxifyNavigator(AppNavigator, "root");
const mapStateToProps = (state) => ({
  state: state.nav,
});
const AppWithNavigationState = connect(mapStateToProps)(App);

const store = createStore(
  appReducer,
  applyMiddleware(middleware),
);

class Root extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <AppWithNavigationState />
      </Provider>
    );
  }
}

Once you do this, your navigation state is stored within your Redux store, at which point you can fire navigation actions using your Redux dispatch function.

Keep in mind that when a navigator is given a navigation prop, it relinquishes control of its internal state. That means you are now responsible for persisting its state, handling any deep linking, Handling the Hardware Back Button in Android, etc.

Navigation state is automatically passed down from one navigator to another when you nest them. Note that in order for a child navigator to receive the state from a parent navigator, it should be defined as a screen.

Applying this to the example above, you could instead define AppNavigator to contain a nested TabNavigator as follows:

const AppNavigator = createStackNavigator({
  Home: { screen: MyTabNavigator },
});

In this case, once you connect AppNavigator to Redux as is done in AppWithNavigationState, MyTabNavigator will automatically have access to navigation state as a navigation prop.

Upvotes: 2

Related Questions