Having trouble migrating from react-navigation v1 to v3.11 - reactjs

Question

I'm trying to migrate our codebase to use react-navigation: 3.11 from v1 and having issues. I created a small gist here to run through the issue and provided codebase.
I am using react-navigation-redux-helpers with the new react-navigation to use the createReduxContainer function in other to maintain my previous redux setup.
I'm getting this error - Cannot read property 'routes' of undefined
https://gist.github.com/bwoodlt/773c62d4ba3dbe0cea150a9d956bec3f
// #flow
// root navigator
import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import TabNavigation from './TabNavigation';
import FCLaunch from '../../Components/FCLaunch';
import { FCLAUNCH } from '../constants';
import { HeaderText } from '../Components';
import * as actionsOnboarding from '../../Screens/Onboarding/actions';
import StagingArea from '../StagingArea';
const RouteConfigs = {
StagingArea: {
screen: StagingArea,
defaultNavigationOptions: {
header: null
}
},
[FCLAUNCH]: {
screen: FCLaunch,
navigationOption: () => ({
header: null
})
}
};
const StackNavigatorConfig = {
initialRouteName: 'StagingArea',
mode: Platform.OS === 'ios' ? 'modal' : 'card'
};
export default createAppContainer(
createStackNavigator(RouteConfigs, StackNavigatorConfig)
);
// #flow
// AppWithNavigationState
import * as React from 'react';
import codePush from 'react-native-code-push';
import OneSignal from 'react-native-onesignal';
import { connect } from 'react-redux';
import DeviceInfo from 'react-native-device-info';
import PropTypes from 'prop-types';
import {
createReactNavigationReduxMiddleware,
createReduxContainer
} from 'react-navigation-redux-helpers';
import { createAppContainer } from 'react-navigation';
import { AppNavigation } from './Navigation';
import { Storage } from '../Utils';
import { NAME } from './constants';
import type { Dispatch } from '../Model';
type IAppWithNavigationProps = {
dispatch: Dispatch
};
const codePushOptions = {
checkFrequency: codePush.CheckFrequency.ON_APP_RESUME
};
const middleware = createReactNavigationReduxMiddleware(state => state[NAME]);
class AppWithNavigationStateObject extends React.PureComponent<
{},
IAppWithNavigationProps
> {
async componentDidMount() {
codePush.notifyAppReady();
codePush.sync({
updateDialog: true,
installMode: codePush.InstallMode.IMMEDIATE
});
const deviceName = await Storage.get('deviceName');
if (!deviceName) {
await Storage.set('deviceName', DeviceInfo.getDeviceName());
}
}
componentWillMount() {
OneSignal.setLocationShared(true);
OneSignal.inFocusDisplaying(2);
}
render(): React.Node {
const { dispatch, [NAME]: state } = this.props;
console.log(this.props);
return <AppNavigation navigation={{ dispatch, state }} />;
}
}
AppWithNavigationStateObject.propTypes = {
dispatch: PropTypes.func.isRequired,
[NAME]: PropTypes.object.isRequired
};
const AppWithNavigationStateInfo = createReduxContainer(AppNavigation);
const AppWithNavigationState = connect(state => ({
[NAME]: state[NAME]
}))(codePush(codePushOptions)(AppWithNavigationStateInfo));
export { AppWithNavigationState, middleware };
// #flow
// navReducer
import { handleActions } from 'redux-actions';
import { NavigationActions, StackActions } from 'react-navigation';
import { REHYDRATE } from 'redux-persist/constants';
import { AppNavigation } from './Navigation';
import {
CHAT_MAIN,
CHAT_MESSAGE_AREA,
NEW_MESSAGE,
FCLAUNCH,
} from './constants';
const { getStateForAction } = AppNavigation.router;
const initialState = getStateForAction(NavigationActions.init);
const getCurrentRouteName = navState => {
if (Object.prototype.hasOwnProperty.call(navState, 'index')) {
console.log(navState);
return getCurrentRouteName(navState.routes[navState.index]);
}
return navState.routeName;
};
const generateNavigationAction = (state, routeName, params = {}) => {
console.log(routeName);
// Don't navigate to the same screen if is already there.
if (getCurrentRouteName(state) === routeName) {
return state;
}
const nextState = getStateForAction(
NavigationActions.navigate({
routeName,
params
}),
state
);
return nextState || state;
};
export default handleActions(
{
// Custom actions types
[CHAT_MAIN]: state => generateNavigationAction(state, CHAT_MAIN),
[FCLAUNCH]: state => generateNavigationAction(state, FCLAUNCH),
[CHAT_MESSAGE_AREA]: state =>
generateNavigationAction(state, CHAT_MESSAGE_AREA),
[NEW_MESSAGE]: state => generateNavigationAction(state, NEW_MESSAGE),
// overwritten action types from react-navigation
[NavigationActions.NAVIGATE]: (state, { routeName }) =>
generateNavigationAction(state, routeName),
[NavigationActions.BACK]: state => {
const nextState = getStateForAction(NavigationActions.back(), state);
return nextState || state;
},
[NavigationActions.INIT]: state => {
console.error(NavigationActions.INIT);
return state;
},
[NavigationActions.RESET]: (state, { routeName }) => {
console.error(NavigationActions.RESET);
StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName })]
});
return state;
},
[NavigationActions.SET_PARAMS]: (state, { key, params }) => {
const nextState = getStateForAction(
NavigationActions.setParams({
params,
key
}),
state
);
return nextState || state;
},
[NavigationActions.URI]: state => {
console.error(NavigationActions.URI);
return state;
},
// Default initialRouteName
[REHYDRATE]: (state, { payload: { auth } }) => {
const isLogged =
auth &&
auth.token &&
auth.token.length !== 0 &&
auth.refreshToken &&
auth.status &&
auth.refreshToken.length !== 0;
const nextState = isLogged
? state
: generateNavigationAction(state, FCLAUNCH);
return nextState;
}
},
initialState
);
```[enter image description here][2]
[1]: https://i.stack.imgur.com/j5dm8.png

Answer 1

So I fixed my issue:
The createReduxContainer helper from react-navigation-redux-helpers expects three key params: { dispatch, state, ...props }, I wasn't passing the dispatch and state directly but as part of the navigation object passed. So I fixed this by passing missing parameters.