Make react native navigator go back to previous screen - react-native

Question

I have a tab navigator (with 3 screens) then each of these have also 2 or 3 screen each.
TabNavigator => "A,B,C"
A stack => "1,2,3"
Sometimes I'llgo from 1 to 2, and sometimes from B to 2 (for example), I want that when pressing the back button navigates to the previous screens so 1 for first example and B on the seconds. But right now only goes to 1.
Here is my navigation stack:
const RaidsStack = createStackNavigator({
Raids: { screen: RaidsScreen, },
CreateRaid: { screen: CreateRaidScreen, },
})
const ChatsStack = createStackNavigator({
Chats: { screen: ChatsScreen },
ChatRoom: { screen: ChatRoomScreen, },
})
const SettingsStack = createStackNavigator({
Settings: { screen: SettingsScreen },
EditProfile: { screen: editProfileScreen },
Start: { screen: StartScreen },
})
const StartStack = createStackNavigator({
Tabs: { screen: SettingsScreen },
Register: { screen: editProfileScreen },
Start: { screen: StartScreen },
})
const TabNavigator = createBottomTabNavigator(
{
Raids: { screen: RaidsStack },
Chats: { screen: ChatsStack },
Settings: { screen: SettingsStack }
},
{
tabBarPosition: "bottom",
tabBarComponent: props => {
return (
<Footer>
<FooterTab>
<Button
vertical
active={props.navigation.state.index === 0}
onPress={() => props.navigation.replace('Tabs', {}, NavigationActions.navigate({ routeName: 'RaidsStack' }))}>
<Icon name="egg" />
<Text>Raids</Text>
</Button>
<Button
vertical
active={props.navigation.state.index === 1}
onPress={() => props.navigation.replace('Tabs', {}, NavigationActions.navigate({ routeName: 'Chats' }))}>
<Icon name="mail" />
<Text>Chats</Text>
</Button>
<Button
vertical
active={props.navigation.state.index === 2}
onPress={() => props.navigation.replace('Tabs', {}, NavigationActions.navigate({ routeName: 'Settings' }))}>
<Icon name="settings" />
<Text>Settings</Text>
</Button>
</FooterTab>
</Footer>
);
}
}
)
const AppStack = createStackNavigator({
Start: { screen: StartScreen },
Register: { screen: RegisterScreen },
Tabs: TabNavigator,
Raids: { screen: RaidsScreen },
Chats: { screen: ChatsScreen },
Settings: { screen: SettingsScreen }
}, {
headerMode: 'none',
})
How to do it? I'm new to react and react navigation.

Answer 1

I suggest looking at the documentation https://reactnavigation.org/docs/stack-navigator/
Since you also using nested navigator I suggest looking at this page too https://reactnavigation.org/docs/nesting-navigators/
It’s exactly tells shows you the example of nested navigator with a tab
Hope this material will help you!