Blackfaded
commented
4 years ago A possible solution fur us was to implement an initializing screen from where the main stack gets loaded after all initializations.
const InitializingScreen: FunctionComponentWithOptions = () => {
StatusBar.setBarStyle('dark-content');
const { auth } = useStore();
useEffect(() => {
init();
}, []);
const init = async () => {
await hydrateStores();
if (!auth.isAuthenticated) {
setNoAuthNavigationRoots();
} else {
setAuthNavigationRoots();
}
SplashScreen.hide();
};
return <></>;
};App.tsx
Navigation.events().registerAppLaunchedListener(() => {
registerScreens();
Navigation.setRoot({
root: {
component: {
name: 'Initializing',
},
},
});
Navigation.setDefaultOptions({
bottomTabs: {
visible: false,
},
});
});
39otrebla
ghost
stale[bot]
zabojad
guyca
draperunner
a-eid
JanOwiesniak
Issue Description
Preamble: this library is outstanding, thank you for the great work.
That said, I'm facing issues implementing what I believe is a quite common scenario. We faced it many times with v1 and v2 and we've never really been able to understand what really works (i.e. no crash in release) and what just partially works (i.e. some AppRegistry crashes in production). Now we are facing it with v6, though I believe we've done all the integration process correctly. But who knows... maybe we are missing some points. So I hope this issue will help to clarify this once forever, and for everyone.
The case is performing async operations within the
appLaunchedevent, before callingsetRoot. In particular, if you need to implement conditional roots (as mentioned in the v6 documentation here and here), you end up performing async operations to know whether the user is logged, either by performing network operations, reading from AsyncStorge or byawaiting ReduxPersist's rehydration. And I see in this example that you are indeed using an async handler.Though, async handler crashes 100% times with the following error:
Module AppRegistry is not a registered callable module (calling runApplication). And, if I dismiss the RedBox, our views are perfectly rendered... so there seems to be an issue in (kind of) notifying react native that someone handled the UI rendering. Isn't it?So the question: are async operations before calling
setRoot100% supported? If yes, which is the proper way of implementing them?Thank you.
Steps to Reproduce
index.js
src/app.js
This crashes 100% of the times with the following error:
Module AppRegistry is not a registered callable module (calling runApplication)A closing note: we've also tried to configure the
storefirst, and then register the event passing the rehydratedstoreas parameter to the handler, so that it doesn't need to be asynchronous. Something like:but it doesn't work either, same error.
Environment