On Tab switch open initial screen of stack Navigator inside Tab Navigator instead of last visited screen

Question

Tab.Navigator
    Tab1-Stack.Navigator (SettingStack)
           -SettingsScreen
           -ProfileScreen
   Tab2-Stack.Navigator (HomeStack)
           -HomeScreen
           -DetailsScreen

We start on the HomeScreen and navigate to DetailsScreen. Then we use the tab bar to switch to the SettingsScreen and navigate to ProfileScreen. After this sequence If you use the tab bar to switch back to the HomeStack, it opens DetailsScreen - the navigation state of the HomeStack has been preserved

But I want if a user switch tab then the initial screen of the stack should open rather than the last open screen, How to achieve it?

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="First">
          {() => (
            <SettingsStack.Navigator>
              <SettingsStack.Screen
                name="Settings"
                component={SettingsScreen}
              />
              <SettingsStack.Screen name="Profile" component={ProfileScreen} />
            </SettingsStack.Navigator>
          )}
        </Tab.Screen>
        <Tab.Screen name="Second">
          {() => (
            <HomeStack.Navigator>
              <HomeStack.Screen name="Home" component={HomeScreen} />
              <HomeStack.Screen name="Details" component={DetailsScreen} />
            </HomeStack.Navigator>
          )}
        </Tab.Screen>
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Answer 1

You should implement tab item touch for screen name 'Second' and get navigation pop to root view.