I can't navigate without the navigation prop of react-navigation with react-i18next container - react-native

Question

I apply the navigation example without the navigation prop of the react-navigations docs (NavigationService), but I can't make it work with react-i18next.
I applied the example of the documentation https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html in my code:
// App.js
import React from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/lib/integration/react';
import { createAppContainer } from 'react-navigation';
import { I18nextProvider, withNamespaces } from 'react-i18next';
import { persistor, store } from './src/store';
import I18n from './src/localization';
import Navigation from './src/navigation';
import NavigationService from './src/navigation/NavigationService';
import Loader from './src/screens/components/Loader';
class NavigationStack extends React.Component {
static router = Navigation.router;
render() {
const { t } = this.props;
return <Navigation screenProps={{ t, I18n }} {...this.props} />;
}
};
const ReloadNavOnLanguageChange = withNamespaces(['common', 'server'], {
bindI18n: 'languageChanged',
bindStore: false,
})(createAppContainer(NavigationStack));
export default class App extends React.Component {
...
render() {
return (
<Provider store={store}>
<PersistGate loading={<Loader />} persistor={persistor}>
<I18nextProvider i18n={ I18n } >
<ReloadNavOnLanguageChange ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}} />
</I18nextProvider>
</PersistGate>
</Provider>
);
};
};
// Navigation.js
...
export default Navigation = createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
Login: LoginScreen,
App: AppScreen
},
{
initialRouteName: 'AuthLoading'
}
);
// NavigationService.js
Apply the same code that's in https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html
// Any JS module of my project (actions, helpers, components, etc.)
import NavigationService from 'path-to-NavigationService.js';
...
NavigationService.navigate('Login');
When the authorization token is validated and the result is negative, the login screen must be opened (NavigationService.navigate('Login')) but it returns the error _navigator.dispatch is not a function in NavigationService.js:
const navigate = (routeName, params) => {
// DISPATCH ERROR
   _navigator.dispatch(
     NavigationActions.navigate({
       routeName,
       params
     })
   );
};
Dependencies:
react 16.5.0
react-native 57.1
react-i18next 9.0.0
react-navigation 3.1.2
Any suggestion? Has anyone else found this scenario?

Answer 1

Using the innerRef option of the withNamespaces hoc of react-i18next instead of passing the function through the ref property of the root component… AS THE DOCUMENTATION OF REACT-I18NETX SAYS!
// App.js
...
const ReloadNavOnLanguageChange = withNamespaces(['common', 'server'], {
bindI18n: 'languageChanged',
bindStore: false,
innerRef: (ref) => NavigationService.setTopLevelNavigator(ref)
})(createAppContainer(NavigationStack));
export default class App extends React.Component {
...
render() {
return (
...
<ReloadNavOnLanguageChange />
...
);
};
}