How can I show a splash screen in React Native with React Native Navigation while loading app Redux state?

1.7k views Asked by At

I am trying to integrate React Native Navigation by Wix into my application and am not sure how to go about setting things up to handle a loading phase.

The library has a splash screen at the native layer but that is only displayed while the bundle is being parsed. Once that is complete and React Native takes over, I then rehydrate my Redux store (from Redux-Persist), make a couple checks, call out to an API to validate a token, and redirect the user to the proper screen. While all of this is happening, I want to display a loading screen but have no idea how to go about it using this library.

I don't want to show my app or let the user use the app until all of the loading and checks have completed.

Is this possible with this library? If so, how do I set it up? My navigation is tab based, no side drawer.

1

There are 1 answers

1
Khoa Luu On BEST ANSWER

There're 2 options for you: 1. Call Navigation.startSingleApp with the only screen is "Loading Screen" when app start. At that time, you call rehydrate redux. When the call back invoked, you call Navigation.start (single or tab) to your main screen 2. Design the registerScreen with route "Loading" for loading screen. When app start, call Navigation.startSingleApp for the loading screen. On "componentDidMount" of loading screen, call rehydrate redux, when call back invoke, push to Main screen