Resetting screens to default react-native navigation - react-native

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

Answer 2

Not sure from the snippet you posted but I think you are trying to get bottom tabs to work. This is incomplete but hopefully this gets you on track.
const AppTabs = createBottomTabNavigator({
App: AppStack, // stack navigator
Contacts: ContactsStack, // stack navigator
Settings: {
screen: SettingsScreen, // single component import
navigationOptions: {
tabBarLabel: 'Settings',
tabBarIcon: ({ focused }) => (
<Ionicons
size={26}
name={Platform.OS === 'ios' ? 'ios-settings' : 'settings'}
style={{ marginBottom: -3 }}
color={focused ? "red" : "gray"}
/>
),
}
},
}, {
initialRouteName: 'App',
tabBarPosition: 'bottom',
swipeEnabled: true,
tabBarOptions: {
activeTintColor: 'green',
inactiveTintColor: 'gray',
labelStyle: {
fontSize: 16,
},
tabStyle: { marginBottom: -10 }
}
});
export default createAppContainer(createSwitchNavigator({
AuthLoading: AuthLoadingScreen,
App: AppTabs,
Auth: AuthStack,
}, {
initialRouteName: 'AuthLoading',
}));