Logging User after Persist Rehydration - react-native

Question

I am trying to login user after Rehydration in react-native. I am not sure how to go about redirecting user after I have data in the store.
Here is how I setup my PersistGate in my index.js file:
class AppRedux extends React.Component {
render() {
return (
<Provider store={store}>
<PersistGate persistor={persistor} loading={<SplashScreen />}>
<App />
</PersistGate>
</Provider>
);
}
}
AppRegistry.registerComponent(appName, () => AppRedux);
SplashScreen.js:
class SplashScreen extends Component {
constructor(props) {
super(props);
props.navigation.navigate(RouteNames.Home);
}
render() {
return <View style={{ flex: 1, backgroundColor: "green" }}></View>;
}
}
const mapStateToProps = state => {
return {
rehydrated: state.user.rehydrated
};
};
export default connect(mapStateToProps)(SplashScreen);
The problem with this approach is that I am not able to navigate from splash screen. I get Navigation prop is undefined.

Answer 1

"loading" prop in "PersistGate" is just a dummy component to show loader until Persist Rehydration . "App"(navigation component) will load after Rehydration where you can receive "navigation" prop and can access store.
Try this like described in official site Auth Flow
Create AuthLoading Screen and set navigation from there
App.js
const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = createStackNavigator({ SignIn: SignInScreen });
export default createAppContainer(
createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
App: AppStack,
Auth: AuthStack,
},
{
initialRouteName: 'AuthLoading',
}
)
);