Question: Set active tab to original scene on stack on tapping a tab item

I think this qualifies more as a question than an issue since i may perhaps be missing some prop or setting.

TLDR;

a) press a tabitem and navigate to the corresponding screen b) Press an inner button here to navigate to another screen (non-tabbed perhaps) c) Press any tabitem(could even be the same item tapped earlier) to get back to the main tab scene for that tab item d) presented with the screen from b) while i expect to see the screen from a)

I have this in my App file:

const stateNavigator = new StateNavigator([
  { key: 'mainmenu', trackCrumbTrail: true },
  { key: 'maindailyspecials', trackCrumbTrail: true },
  { key: 'mainmore', trackCrumbTrail: true },
  { key: 'mainadmin', trackCrumbTrail: true },
]);
 
const { mainmenu, maindailyspecials, mainmore, mainadmin } = stateNavigator.states;
mainmenu.renderScene = () => <MainMenu />;
maindailyspecials.renderScene = () => <MainDailySpecials />;
mainmore.renderScene = () => <MainMore />;
mainadmin.renderScene = () => <MainAdmin />;

const dailySpecialsNavigator = new StateNavigator(stateNavigator);
const mainMoreNavigator = new StateNavigator(stateNavigator);

stateNavigator.navigate('mainmenu');
dailySpecialsNavigator.navigate('maindailyspecials');
mainMoreNavigator.navigate('mainmore');

     <TabBar bottomTabs={true}>
        <TabBarItem title="Menu">
          <NavigationHandler stateNavigator={stateNavigator}>
            <NavigationStack
              primary={true}
              crumbStyle={from => from ? 'scale_in' : 'scale_out'}
              unmountStyle={from => from ? 'slide_in' : 'slide_out'} />
          </NavigationHandler>
        </TabBarItem>
        <TabBarItem
          title="Daily Specials"
          onPress={() => {
          }
          }
        >
          <NavigationHandler stateNavigator={dailySpecialsNavigator}>
            <NavigationStack
              primary={false}
              crumbStyle={from => from ? 'scale_in' : 'scale_out'}
              unmountStyle={from => from ? 'slide_in' : 'slide_out'} />
          </NavigationHandler>
        </TabBarItem>
        .....
        .... more tab items
        .....
        <TabBarItem
          title="More..."

          onPress={() => { }}>
          <NavigationHandler stateNavigator={mainMoreNavigator}>
            <NavigationStack
              primary={false}
              crumbStyle={from => from ? 'scale_in' : 'scale_out'}
              unmountStyle={from => from ? 'slide_in' : 'slide_out'} />
          </NavigationHandler>
        </TabBarItem>
      </TabBar>

I navigate to the More... tab which is basically a screen with a list of further links. An Admin link here will navigate to the Admin screen. I now tap on any tab item to move away from the Admin screen. I then proceed to tap on the More tab item again. I am now presented with the Admin screen while i am expecting to see the More screen.

My More file:

const MainMore: React.FunctionComponent = () => {
    const [submitting, setSubmitting] = useState(false);
    const { stateNavigator } = useContext(NavigationContext)
    const goToAdmin = () => {
        stateNavigator.navigate("mainadmin")
    }
    return (<>
        <View style={{ flex: 1, flexDirection: "column", }}>
            <Text>
                More
                </Text>
            <View style={{ flexDirection: "column", flexGrow: 1, flexShrink: 1, flexBasis: "auto" }}>
                <ActionButton title="To Admin" submitting={submitting} onPress={goToAdmin} type="tertiary" />
            </View>

        </View>
    </>
    )
}
export default MainMore;

How do i reset the screen to More on tapping the tab after i’ve move away from it earlier? I can of course navigate anywhere using buttons within the Admin screen(or even the back buttons/links), but this issue only surfaces on attempting via taps on tab items.

[grahammendick]

You should turn off the mounting animation for the first scenes of each tab

bottomTab1.unmountStyle = 'none';
bottomTab2.unmountStyle = 'none';
...
<NavigationHandler stateNavigator={stateNavigator}>
  <NavigationStack unmountStyle={(from, state) => state.unmountStyle} />
</NavigationHandler>

[grahammendick]

Try setting primary={false} on both the inner tab stacks.