The Android back button does not go back on the first click when I am inside the TopTabNavigator. What actually happens is that the tab goes left and right and only after a few presses of the Android back button only then it go back. How can such a thing be prevented and fix ?
in my example i have top tab navigator, and i want know how to prevented the situation that Makes navigation play between tabs and only with the second or third press of the Android back button take me back
JavaScript
x
35
35
1
import * as React from 'react';
2
import { Text, View } from 'react-native';
3
import { NavigationContainer } from '@react-navigation/native';
4
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
5
6
function HomeScreen() {
7
return (
8
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
9
<Text>Home!</Text>
10
</View>
11
);
12
}
13
14
function SettingsScreen() {
15
return (
16
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
17
<Text>Settings!</Text>
18
</View>
19
);
20
}
21
22
const Tab = createMaterialTopTabNavigator();
23
24
export default function App() {
25
return (
26
<NavigationContainer>
27
<Tab.Navigator>
28
<Tab.Screen name="Home" component={HomeScreen} />
29
<Tab.Screen name="Settings" component={SettingsScreen} />
30
</Tab.Navigator>
31
</NavigationContainer>
32
);
33
}
34
35
Advertisement
Answer
JavaScript
1
11
11
1
export default function App() {
2
return (
3
<NavigationContainer>
4
<Tab.Navigator backBehavior="none">
5
<Tab.Screen name="Home" component={HomeScreen} />
6
<Tab.Screen name="Settings" component={SettingsScreen} />
7
</Tab.Navigator>
8
</NavigationContainer>
9
);
10
}
11
https://reactnavigation.org/docs/bottom-tab-navigator#backbehavior