React Native Navigation: How can I display a new bottom tab without calling setRoot?

103 Views Asked by At

I am using React Native Navigation Library and I display 4 tabs when the app boots up.

export const home = async (currentTabId: string) => {
  await Navigation.setRoot({
      root: {
        bottomTabs: {
          id: Stack.BOTTOM_TABS_STACK,
          children: getTabs(), // It returns the 4 initial tabs
          options: {
            bottomTabs: { tabsAttachMode: 'afterInitialTab', currentTabId } 
          },
      },
    },
  },
});
};

However, I might need to display 1 more tab when the app is running. I don't want to call setRoot again, because it reloads everything. I was trying to display the new bottom with the next code, but it does not work:

// Called when we need the 5th tab.
const updateTabs = () => {
   // getTabs(true) returns the 5 tabs.
   Navigation.setStackRoot(Stack.BOTTOM_TABS_STACK, getTabs(true));
}

I also tried passing different layouts to setStackRoot, but it didn't work either. And unfortunately the library doesn't give the option to hide only a tab. Any idea?

Thanks in advance.

0

There are 0 best solutions below