I am using this library with bottom tabs: https://github.com/wix/react-native-navigation
for navigation, I have 3 tabs at the bottom, one of them is for home, the thing is I move from home screen to another screen it gets added to the stack, I want to be able to reset the stack whenever I click to the home icon again at bottom tabs.
The route.js
is sth like this for the home icon at bottomTab:
stack: {
children: [
{
component: {
name: home,
}
},
],
options: {
bottomTab: {
iconInsets: {top: 6, left: 0, bottom: -6, right: 0},
titleDisplayMode: 'alwaysHide',
icon: require('../assets/images/home.png'),
selectedIconColor: colors.primary,
}
First you have to add listener if user click the bottom tab . With help of registerbottomtabselectedlistener you can achieve this . You can use popToRoot to send user to root of stack
// Subscribe
const bottomTabEventListener = Navigation.events().registerBottomTabSelectedListener(({ selectedTabIndex, unselectedTabIndex }) => {
Navigation.popTo(componentId); // check selectedTabIndex and send to home
});
...
// Unsubscribe
bottomTabEventListener.remove();