React Native Conditional TabNavigator - react-native

Question

I Have the following structure of Navigation. On my Third tab, app has to load based the user login status i.e., if user logged in before load UserProfileScreen or load CreateAnAccountScreen. Now, user has not logged in and app has loaded the third tab with CreateAnAccountScreen, when user tries to login, upon successful, the app has to navigate to UserProfileScreen under the same tab.
As am new to react native I am not sure how this navigation system works.
const Stylelist = StackNavigator({
LoginScreen: {
screen: LoginScreen,
navigationOptions: ({ navigation }) => ({
header: null,
}),
},
SplashScreen: {
screen: SplashScreen,
navigationOptions: ({ navigation }) => ({
header: null,
}),
},
LaunchScreen: {
screen: LaunchScreen,
navigationOptions: ({ navigation }) => ({
header: null,
}),
},
Home: {
screen: TabNavigator({
RemoteControlScreen: {screen: RemoteControlScreen, navigationOptions: ({ navigation }) => ({header: null, tabBarIcon: ({focused }) => <Image source={Images.iconDrop} style={{tintColor: focused ? Colors.lightGreen : null}}/>}),},
GetInspiredScreen: {screen: GetInspiredScreen, navigationOptions: ({ navigation }) => ({header: null, tabBarIcon: ({focused }) => <Image source={Images.iconGetInspired} style={{tintColor: focused ? Colors.lightGreen : null}}/>}),},
...AppConfig.isUserRegistered ?
{ UserProfileScreen: {screen: UserProfileScreen, navigationOptions: ({ navigation }) => ({header: null, tabBarIcon: ({focused }) => <Image source={Images.iconProfile} style={{tintColor: focused ? Colors.lightGreen : null}}/>}),}, } :
{
CreateAnAccountScreen: {screen: CreateAnAccountScreen, navigationOptions: ({ navigation }) => ({header: null, tabBarIcon: ({focused }) => <Image source={Images.iconProfile} style={{tintColor: focused ? Colors.lightGreen : null}}/>}),},
}
},
{
tabBarPosition: 'bottom',
animationEnabled: false,
swipeEnabled: false,
showLabel: false,
tabBarOptions: {
activeTintColor: 'yellow',
inactiveTintColor: 'black',
showLabel: false,
showIcon: true,
style: {
height: (deviceHeight * 5) / 67,
justifyContent: 'center',
backgroundColor: Colors.background,
},
}
}),
navigationOptions: ({ navigation }) => ({
// title: 'Home',
}),
},
},
{
headerMode: 'none',
initialRouteName: 'SplashScreen',
navigationOptions: {
headerStyle: styles.header
}
});
export default Stylelist;