How to return back to previous screen from React StackNavigator to specific Tab - node.js

Question

I am using React StackNavigator which has structure like this:
-----BottomNavigator
-------TabNavigator (has 3 screens)
---------StackNavigator
so I want to return to previous screen from stackNavigator to TabNavigator (screen 2).
Here is my code for TabNavigator:
const ServiceTabNavigator = createMaterialTopTabNavigator(
{
screenone: screenone,
screentwo: screentwo,
screenthree: screenthree
},
{
tabBarOptions: {
activeTintColor: "#1B5357",
inactiveTintColor: "gray",
style: {
backgroundColor: "#fff",
color: "#1B5357"
},
indicatorStyle: {
backgroundColor: "#1e90ff"
}
},
navigationOptions: {
tabBarLabel: "ESTH",
tabBarIcon: ({ tintColor }) => (
<Icon name="bars" color={tintColor} size={24} />
)
}
}
);
Here is for the StackNavigator which has code like this but it does not go to the screen2 instead screen1 of tabNavigator.
static navigationOptions = ({ navigation }) => ({
title: "Request Service",
headerLeft: (
<TouchableOpacity
onPress={() => {
() =>
navigation.dispatch(
NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: "MainNavigator" }) //MainNavigator is bottomNavigator
]
})
);
navigation.navigate("screentwo");
}}
>
<Icon
name="times"
type="font-awesome"
iconStyle={{ color: "#000" }}
containerStyle={{ marginLeft: 16 }}
/>
</TouchableOpacity>
),
headerTitleStyle: {
color:'#00CA9D',
fontWeight: 'bold',
},
headerStyle: { borderBottomWidth:0 }
});
Thank you

Answer 1

I use react-navigator.. there is a property named jumpToIndex for this.
I solved it this way for my needs to open a Modal instead jumping to the given Tab.
Maybe you can modify to fit your needs:
<TabBarBottom
{...props}
jumpToIndex={(index) => {
if (index === 5) {
// This is the MORE-Tab-Button. Don't switch to tab, but open the Modal
props.navigation.navigate('Menu_Screen');
} else {
jumpToIndex(index);
}
}}
/>

Answer 2

From how you described your navigation hierarchy it looks like your root navigator is always Main/BottomNavigator, so why do you call dispatch reset before navigating to screentwo?
Seems like the issue might be that the reset action is not finished before you try to navigate to screentwo, so you end up on initialRoute of MainNavigator.
So calling just navigation.navigate("screentwo") (without reseting root) should do what you want to achieve.
In case you really need to reset the root, try executing the navigation to screentwo using dispatch as well, to make sure the actions are performed in sequence
const navigateAction = NavigationActions.navigate({
routeName: route,
params: params
})
navigation.dispatch(navigateAction)

Answer 3

OK after digging up I have found out the way
React NavigationV2 Way:
navigation.navigate('MainNavigator', {}, NavigationActions.navigate({ routeName: 'Requests' }))
React NavigationV3 Way:
navigation.navigate(NavigationActions.navigate({
routeName: 'MainNavigator',
action: NavigationActions.navigate({ routeName: 'Requests' })
}))
BottomNavigator as MainNavigator
Screentwo as Requests
In a nutshell navigation.navigate() has third parameter which acts likes second navigation.
So It first Navigate to MainNavigator ------then----> Screen2 in TabNavigator
Thanks to David check this post. Hope it will help someone else in future.
How to navigate between different nested stacks in react navigation