I want to set it so that whenever a tab is press it takes to the main tab page, and resets any params it has. But currently lets say when i checkout i have a button that will take to that specific order page ex /orders/106/,, but after it takes when on the bottom tab i press orders tab it should take to /orders/ but it just keeps it in the same page, and when i print the state it sill has the params of 106.
It is an expo router project.
I have tried navigation.reset but it makes my navigation from one tab to another laggy.
DEBUG : state routes { "routes": { "0": { "name": "home", "key": "home-fFgtZYFe1kHVLUx2txer3" }, "1": { "name": "orders", "params": { "id": "106", "screen": "[id]/index", "params": { "id": "106" } }, "key": "orders-tBxeaV9XOzv-Gqdvw1GGs" }, "2": { "name": "account", "key": "account-KFKDqozXTMYGeaZvCV7Xp" }, "length": 3 }}
console.js:589 2:55:51 PM | DEBUG : state index { "stateIndex": { "name": "orders", "params": { "id": "106", "screen": "[id]/index", "params": { "id": "106" } }, "key": "orders-tBxeaV9XOzv-Gqdvw1GGs" }}
console.js:589 2:55:51 PM | DEBUG : state index name { "stateIndexName": "orders"}
console.js:589 2:55:51 PM | DEBUG : Current route { "currentRoute": "orders"}
console.js:589 2:55:52 PM | DEBUG : Tab pressed { "route": "orders"}
console.js:589 2:55:52 PM | DEBUG : state routes { "routes": { "0": { "name": "home", "key": "home-fFgtZYFe1kHVLUx2txer3" }, "1": { "name": "orders", "params": { "id": "106", "screen": "[id]/index", "params": { "id": "106" } }, "key": "orders-tBxeaV9XOzv-Gqdvw1GGs" }, "2": { "name": "account", "key": "account-KFKDqozXTMYGeaZvCV7Xp" }, "length": 3 }}
console.js:589 2:55:52 PM | DEBUG : state index { "stateIndex": { "name": "orders", "params": { "id": "106", "screen": "[id]/index", "params": { "id": "106" } }, "key": "orders-tBxeaV9XOzv-Gqdvw1GGs" }}
console.js:589 2:55:52 PM | DEBUG : state index name { "stateIndexName": "orders"}
console.js:589 2:55:52 PM | DEBUG : Current route { "currentRoute": "orders"}
my custom tabbar
<Tabs
screenOptions={{
headerShown: false,
tabBarShowLabel: false,
tabBarStyle: {
display: "none",
},
}}
tabBar={({ navigation, state, descriptors }) => (
<SafeAreaView style={styles.container} edges={["bottom"]}>
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const label = options.tabBarLabel ?? options.title ?? route.name;
const isFocused = state.index === index;
if (["_sitemap", "+not-found"].includes(route.name)) return null;
const onPress = () => {
log.debug("Tab pressed", { route: route.name });
log.debug("state routes", { routes: state.routes });
log.debug("state index", { stateIndex: state.routes[state.index] });
log.debug("state index name", { stateIndexName: state.routes[state.index].name });
log.debug("Current route", { currentRoute: state.routes[state.index].name });
const event = navigation.emit({
type: "tabPress",
target: route.key,
canPreventDefault: true,
});
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name, {});
}
};
return (
<View key={route.key} style={styles.tabWrapper}>
<AnimatedTouchableOpacity
layout={LinearTransition.springify().mass(0.5)}
onPress={onPress}
style={[
styles.tabItem,
{ backgroundColor: isFocused ? PRIMARY_COLOR : "transparent" },
]}>
{options.tabBarIcon?.({
focused: isFocused,
color: isFocused ? "black" : SECONDARY_COLOR,
size: 28,
})}
{isFocused && (
<Animated.Text
entering={FadeIn.duration(200)}
exiting={FadeOut.duration(200)}
style={styles.text}>
{label as string}
</Animated.Text>
)}
</AnimatedTouchableOpacity>
</View>
);
})}
</SafeAreaView>
)}>
how can i fix this??