Resetting screens to default react-native navigation

Question

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,
    }

Answer 1

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();