connect a react-navigation directly to redux?

0
votes

Is it possible to connect a TabNavigator or a StackNavigator directly to redux?

This is very useful for conditionally navigating to a screen, based on whether or not some condition exists in the Redux store (i.e. if the user is signed in or signed out).

Example:

const Tabs = TabNavigator({ screen: userIsSignedInRedux ? SignedInTabNavigator : SignedOutScreen, }, });

where userIsSignedInRedux is a key within my Redux store.

2
reactjsreact-nativereduxreact-navigation

2 Answers

0
votes

It is generally possible, but not recommended, because of the potential performance issues with that approach.

React-navigation had documentation on the topic before but removed it as not recommended in the latest version.

You can check out the following: https://reactnavigation.org/docs/en/redux-integration.html

You can connect a specific view (first inside a navigator) to redux, and inside the componentWillMount method do da redirect if your user is logged in for example.

However, if you have a specific case that would save you time if handled through redux, check out this solution:

https://github.com/react-navigation/react-navigation-redux-helpers

0
votes

Try this:

import React from 'react';

const TabNavigator = ({ isLoggedIn }) => {
  const RouteConfigs = {
      Screen: isLoggedIn ? SignedInTabNavigator : SignedOutScreen
  };
  const Navigator = createBottomTabNavigator(RouteConfigs);

  return <Navigator />
};

const mapStateToProps = ({ auth }) => ({ isLoggedIn: auth.isLoggedIn });

export default connect(mapStateToProps)(TabNavigator);

But make to not to render your navigation until the value of isLoggedIn is determined .. cause if not, you're going to see a some kind of flickering effect (SignOutScreen will be rendered and a few moments later you're going to see SignInTabNavigator shows up if isLoggedIn resolved to true)