Upgrading react-navigation from 1.0.0-beta.13 to latest, having trouble re-integrating my nested navigators with redux.

[andrewhartwig]

Hello there! =)

I have an old react-native app that I am attempting to upgrade. Unfortunately, I have really tightly coupled my entire app with the redux-integration of react-navigation. Now it appears all those helpers are gone, and so I am left with integrating with this library!

So far the transition has been painless, but I am struggling with one last concept here.

src/reducers.js

const firstAction = AppNavigator.router.getActionForPathAndParams('Intro');
const initialNavState = AppNavigator.router.getStateForAction(firstAction);

const firstTabAction = TabNavigation.router.getActionForPathAndParams('Discover');
const initialTabNavState = TabNavigation.router.getStateForAction(firstTabAction);

function nav(state = initialNavState, action) {
  let nextState;

  switch(action.type) {
    case 'Navigation/NAVIGATE':
      if (state.index === 1 && state.routes[1].routeName === 'Shop' && action.routeName === 'Shop') {
        break;
      }
    default:
      nextState = AppNavigator.router.getStateForAction(action, state);
      break;
  }

  return nextState || state;
}

function tabNav(state = initialTabNavState, action) {
  let nextState;

  switch(action.type) {
    case 'Navigation/BACK':
      return nextState || state;
    default:
      nextState = TabNavigation.router.getStateForAction(action, state);
      break;
  }

  return nextState || state;
}

export default () => combineReducers({
  nav,
  tabNav,
  ...
});

src/AppNavigator.js

export const AppNavigator = createStackNavigator({
  Main: {
    screen: MainScreen
  },
  Intro: {
    screen: IntroScreen
  },
});

src/MainScreen.js (nested Tab Navigation)

export const TabNavigation = createBottomTabNavigator({
  Discover: {
    screen: DiscoverScreen
  },
});

Problem:

My confusion lies with this middleware here, originally there was no middleware for the navigator (Not sure how it worked before).

Your code snippet:

const middleware = createReactNavigationReduxMiddleware(
  state => state.nav,
);

To my understanding, this tells react navigation which state to look at to trigger the page transitions.

How do I connect two separate navigators? Do I just need to have multiple middlewares?

This was my original code that provided said functionality:

  render() {
    // const { dispatch, nav } = this.props;
    // const navigation = addNavigationHelpers({
    //   dispatch,
    //   state: nav
    // });
    console.log(this.props);
    const navigation = {};

    return <AppNavigatorContainer />;
  }

I can't seem to figure out from your example where you would get the navigation prop from:

Your example:

/* your other setup code here! this is not a runnable snippet */

class ReduxNavigation extends React.Component {
  componentDidMount() {
    BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
  }

  componentWillUnmount() {
    BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
  }

  onBackPress = () => {
    const { dispatch, nav } = this.props;
    if (nav.index === 0) {
      return false;
    }

    dispatch(NavigationActions.back());
    return true;
  };

  render() {
    /* more setup code here! this is not a runnable snippet */
    return <AppNavigator navigation={navigation} />;
  }
}

Any additional code requested can easily be provided. Let me know if there are any ways I can get my app running the way that it once did :)

Thanks, -Andrew

[andrewhartwig]

Okay upon doing even further digging, it almost seems like I don't need to be using this library, since I've already written most of the code that this library provides. I guess what I need to know, is what needs to be in the navigation object?

[Ashoat]

I’d recommend just reading the source of this library. There is a utility function in core that will build a navigation object for you.

[UnSensei]

@andrewhartwig Hello, i wanted to know if you were able to fix your Redux integration issues. since I'm having one myself and am struggling with it. https://github.com/react-navigation/redux-helpers/issues/97