CODEWITHSUNDEEP
react-nativereduxreact-reduxreact-navigation
unSensei
unSensei

Reputation: 131

Getting navigation.getchildnavigation error with react-navigation v1 to v4 upgrade

I have been using react-navigation v1 and am trying to upgrade to the latest version(v4). On the surface the changes are very few like the imports, and a few unsupported functions. After doing all the necessary changes, I am heading into this problem that says Navigation.getChildNavigation is not a function. I believe that the problem with the way how I'm using redux and navigation in the AppContainer.

The first thing i changed was remove the unsupported addNavigationHelper. and changed the NavigationActions to StackActions in the reducer.

Below is part of my AppContainer.js. Im not really sure where else i might have to change code so plese ask me if theres a need.

class App extends React.PureComponent {

  backPress() {
    this.props.dispatch(NavigationActions.back())
  }
  render() {
    // console.log(this.props.apiNetworkError)
    const {dispatch, navState} = this.props;
    return (
      <View style={{ flex: 1 }}>
      <ExitOnDoubleBack exitableRoutes={['Activities','Dashboard']} nav={navState} backHandler={this.backPress.bind(this)}>
        <AppNavigator
            navigation={{
              dispatch: this.props.dispatch,
              state: this.props.navState,
              addListener: () => {}
            }}
        />
        </ExitOnDoubleBack>
      <NetworkNotifier apiNetworkError={this.props.apiNetworkError} dispatch={dispatch}/>
      <NotificationSetup />
      </View>
    );
  }
}


const AppWithNavigationState = connect(state => ({
  navState: state.navState,
  apiNetworkError: state.NetWorkStatus.apiNetworkError,
}))(App);

const composeEnhancers =
  global.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const enhancer = composeEnhancers(applyMiddleware(thunk, networkErrorMiddleware));

const AppContainer = () =>
  (<View style={{ flexGrow: 1 }}>
    <Provider
        store={createStore(reducer, (initialState = {}), enhancer)}
    >
      <AppWithNavigationState />

    </Provider>
  </View>);

i expected a issue free upgrade but i was wrong. do not know what should be done.

Upvotes: 1

Views: 275

Answers (1)

unSensei
unSensei

Reputation: 131

the answer to my question if anyone gets this issue is that: I've been using redux with react-navigation since it was the only way to use it then. but now its very easy. Meaning, we have to wrap our navigator(root) in an appcontainer and then pass this inside the Provider if you are using redux for your project. That is all.

<Provider store = {...} > <appContainer> <Provider>

hope this helps someone.

Upvotes: 1

Related Questions