Splash screen should be initialized before rendering home screen - react-native

Question

...
I am trying to remove Drawer Navigation and use bottom navigation instead, but I am not able to display the splash screen and then the home screen. Please help me as I am totally new to React Native
...
...
navigation code
...
import React from "react";
import { createStackNavigator, createAppContainer, createBottomTabNavigator } from "react-navigation";
import DoctorHome from "../containers/Home/DoctorHome/DoctorHome";
import Appointments from "../containers/DoctorFlow/Appointments/Appointments";
import EditProfile from "../containers/DoctorFlow/EditProfile/EditProfile";
import ViewClinic from "../containers/DoctorFlow/ViewClinic/ViewClinic";
import AddClinic from "../containers/DoctorFlow/AddClinic/AddClinic";
import Profile from "../containers/DoctorFlow/Profile/Profile";
import Proffession from "../containers/DoctorFlow/Profile/Proffession";
import {
View,
Image,
Touchable,
TouchableHighlight,
TouchableNativeFeedback,
Platform
} from "react-native";
const HomeStack = createStackNavigator ({
Home: DoctorHome,
Appointments: Appointments,
EditProfile: EditProfile
});
const ClinicStack = createStackNavigator ({
Clinic: ViewClinic,
AddClinic: AddClinic
});
const ProfileStack = createStackNavigator ({
Profile: Profile,
EditProfile: EditProfile,
Proffession: Proffession
});
const MainNavigator = createBottomTabNavigator({
Home: HomeStack,
Clinic: ClinicStack,
Profile: ProfileStack
});
export const AppNavigator = createAppContainer(MainNavigator);
...
splash screen code
...
import React, { Component } from "react";
import { AsyncStorage, Image, StyleSheet, Text, View } from "react-native";
import { connect } from "react-redux";
import TimerMixin from "react-timer-mixin";
import { StackActions, NavigationActions } from "react-navigation";
class Splash extends Component {
constructor(props) {
super(props);
this.state = {
user: null
};
}
componentWillMount() {}
componentDidMount() {
this.getUser();
TimerMixin.setTimeout(() => {
if (this.state.user) {
console.log(this.state.user.user.userType);
if (this.state.user.user.userType == "DOCTOR") {
if (this.state.user.user.isProfileCompleted == false) {
this.props.navigation.dispatch(
StackActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: "EditDoctorProfile" })
]
})
);
} else {
this.props.navigation.dispatch(
StackActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: "DoctorHomeMenu" })
]
})
);
}
}
} else {
this.props.navigation.dispatch(
StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: "Login" })]
})
);
}
}, 1000);
}
async getUser() {
await AsyncStorage.getItem("user").then(user =>
this.setState({ user: JSON.parse(user) })
);
}
render() {
return (
<View
style={{
justifyContent: "center",
alignItems: "center",
flex: 1,
backgroundColor: "#fff"
}}
>
<Image
style={{ width: 200, height: 40 }}
source={require("../Images/logo/logo.png")}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF",
padding: 16
},
welcome: {
fontSize: 20,
textAlign: "center",
margin: 10
},
instructions: {
textAlign: "center",
color: "#333333",
marginBottom: 5
}
});
const mapDispatchToProps = dispatch => ({
Login: () =>
dispatch(
NavigationActions.navigate({
routeName: "Login"
})
)
});
export default connect(
null,
mapDispatchToProps
)(Splash);
...
App.js (entry point)
...
import React from "react";
import { View, StatusBar } from "react-native";
import { Provider } from "react-redux";
import { AppNavigator } from "../Navigation/RootNavigation";
import configureStore from "../store/ConfigureStore";
import color from "../ui/color";
const store = configureStore();
export default class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<View
style={{
flex: 1,
backgroundColor: color.primary
}}
>
<StatusBar
backgroundColor={"#000"}
barStyle="light-content"
hidden={false}
/>
<Provider store={store}>
<AppNavigator />
</Provider>
</View>
);
}
}
...
I want to display the logo first, and then I want a login/signup screen. Once the user logs in, he can access Home and inner screens.
But right now, I am directly getting Home screen as my opening screen. Please help me resolve this issue.
...

Answer 1

You'd probably want to make the login stack the default route:
const MainNavigator = createBottomTabNavigator({
Home: HomeStack,
Clinic: ClinicStack,
Profile: ProfileStack,
Login: LoginStack
}, {initialRouteName: 'Login'});
You probably also want to add the splash screen make it the default route
const LoginStack = createStackNavigator ({
Login: Login,
SignUp: SignUp,
Splash: Splash
}, {initialRouteName: 'Splash')