How to navigate from stack navigator to tab navigator - react-native

Question

Once Logged in, a TabNav is present, from 1st tab i navigate to second tab and then i navigate to a screen defined in StackNav now i want to navigate to 3rd Tab in TabNav. How to achieve this? I want to "fetch" data from the server which is not happening coz the "componentDidMount" is not getting called.
I had the same issue when i had to navigate from TabNav to StackNav but i solved it by defining TabNav inside StackNav.
This is my App.js
export class NavigationDrawerStructure extends Component {
toggleDrawer = () => {
this.props.navigationProps.toggleDrawer();
};
render() {
return (
<View style={{ flexDirection: 'row' }}>
</View>
);
}
}
const FirstActivity_StackNavigator = createStackNavigator({
First: {
screen: Screen1,
},
});
const Screen2_StackNavigator = createStackNavigator({
Second: {
screen: Screen2,
},
});
const Screen3_StackNavigator = createStackNavigator({
Third: {
screen: Screen3,
},
});
const TabNavigator = createMaterialTopTabNavigator(
{
Upcoming: { screen: UpcomingScreen },
Accepted: { screen: AcceptedScreen },
Ongoing: { screen: OngoingScreen },
Completed: { screen: CompletedScreen },
},
);
const tabs = createStackNavigator({
Root: {
screen: TabNavigator,
navigationOptions: () => ({
title: `Welcome, John Doe`,
}),
},
});
const AppNavigator = createStackNavigator(
{
login:
{
screen: Login,
navigationOptions: ({ navigation }) => ({
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#fff',
},
headerTintColor: '#fff',
}),
},
login: Login,
tab: tabs,
acceptedTrip: AcceptedTrip,
startTrip: StartTrip,
upload: Upload,
geoLoc: GeoLoc,
ongoingScreen: OngoingScreen
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
}
)
const DrawerNavigatorExample = createDrawerNavigator(
{
Screen1: {
screen: AppNavigator,
navigationOptions: {
drawerLabel: 'Login',
},
},
Screen2: {
screen: Screen2_StackNavigator,
navigationOptions: {
drawerLabel: 'Demo Screen 2',
},
},
Screen3: {
screen: Screen3_StackNavigator,
navigationOptions: {
drawerLabel: 'Demo Screen 3',
},
},
Screen4: {
screen: FirstActivity_StackNavigator,
navigationOptions: {
drawerLabel: 'Demo Screen 1',
},
},
},
{
initialRouteName: "Screen1"
}
);
const MyApp = createAppContainer(DrawerNavigatorExample);
class App extends React.Component{
render(){
return <MyApp/>
}
}
export default App
the componentDidMount is not getting called.