Optional bottom navigation using feature flags, and why it didn't work

Disclaimer: At the time of writing there is an open feature request for React Navigation for hiding tabs, find it here: https://react-navigation.canny.io/feature-requests/p/hiding-tab-from-the-tabbar.

Disclaimer 2: the title wasn't lying, the following solution didn't work - but I do go into why.

So I was asked to add a tab hidden behind a feature flag, easy peasy (in theory). The issue here was that the apps navigation library didn't support this feature.

My first instinct was to add a classic && in the routeConfigMap of the bottomTabNavigator function, like:

export const Tabs = createBottomTabNavigator(
    {
        StackNavigatorOne,
        StackNavigatorTwo,
        StackNavigatorThree,
        StackNavigatorFour: featureFlag && StackNavigatorFour,
    },
    tabConfig,
);

The problem I found here was that StackNavigatorFour was always being created so when the flag pointed to false StackNavigatorFour had the value of false. Fast forward to running the app and the Bottom Tab Navigator will throw an error as it's expecting a valid React Component (sigh).

Instead of walking you through the typical motions of searching the web and staring at my screen in a pit of despair, I'll fast forward to my simple solution.

Create a tab constructor:

const optionalTabs = () => {
    const tabs =
        StackNavigatorOne,
        StackNavigatorTwo,
        StackNavigatorThree,
    };

    if (featureFlag) {
        tabs.StackNavigatorFour = StackNavigatorFour;
    }

    return tabs;
};

export const Tabs = createBottomTabNavigator(
    optionalTabs(),
    tabConfig,
);

Here I created a function which returned a list of tabs and used it in the createBottomTabNavigator constructor. Fun times!

This failed.

So I found the solution worked through our complete development and e2e environments - we saw no errors, failures, or problems. We went live.

The issue came when we saw no traffic hitting our new page, we even checked the turned on the right feature flag. We persevered and continued debugging - by opening the app manually. What we (didn't) see surprised us, there was no new tab in the navigator.

What happened for us was that the feature flags get downloaded once the app is opened. Then the app re-renders considering the remote config it is given, in this case, that would've added a new tab. But the navigation bar doesn't re-render so we couldn't see the new tab added. This had gone unnoticed, during all levels of testing our feature flags were mocked and provided when the app opens so the config is used straight away, no re-render required.

We're always told that sometimes mocking calls can lead to confusion. This was one of those times for me.

We don't usually see failure stories being posted up, but there are a couple takeaways here I hope you appreciate and will hopefully help you in the future.

Oh! The final solution for us was to move the old content to the same bottom navigation and then re-render the content shown on the tab click according to the feature flag.