redux-helpers
redux-helpers copied to clipboard
React navigation navigation.getChildNavigation is not a fucntion
I am in the prosess of updating from React navigation v1 to v4. In v1 we used react-navigation-redux-helpers for connecting the state. Now I have done this much so far.
In my Navigation.js I have this
let AppNavContainer = MainStack;
export default AppNavContainer;
const initialState = AppNavContainer.router.getStateForAction(
NavigationActions.init()
);
export const navReducer = (state = initialState, action) => {
const nextState = AppNavContainer.router.getStateForAction(action, state);
updateFocus(nextState);
if (action.type === "Navigation/NAVIGATE" && action.routeName !== "PinCode") {
Keyboard.dismiss();
}
// Simply return the original `state` if `nextState` is null or undefined.
return nextState || state;
};
Then in my store I am doing this
const middleware = createReactNavigationReduxMiddleware(
"root",
(state) => state.nav
);
const /** *********** MIDDLEWARES ************/
middleWares = [
effectsMiddleware(EffectsList),
middleware,
];
const store = createStore(
combineReducers({
appData: combineReducers(storeShape),
nav: navReducer,
appState: AppReducer, // MUST BE LAST!
}),
applyMiddleware(...middleWares)
);
Then in my App.js I am doing this
render() {
<SafeAreaView style={styles.container}>
<AppNavContainer
navigation={({
dispatch: this.props.dispatch,
state: this.props.nav,
addListener,
})}
/>
</SafeAreaView>
}
const addListener = createReduxBoundAddListener("root");
static mapStateToProps(state) {
return {
nav: state.nav
};
}
After doing all this I am getting this error
navigation.getChildNavigation is not a function
Here are my packages version
"react-navigation-redux-helpers": "^2.0.8",
"react-navigation-stack": "^2.8.2",
"react-navigation-tabs": "^2.9.0",
"react-navigation": "^4.4.0",
"react": "^16.8.3",
"react-native": "^0.59.10",
Am I missing something?
@mohsinali1317 I'm on the same boat, did you figure out it?