Bottom Navigation - Not able to prevent User action or when user press any tab then registerBottomTabPressedListener this is envoked after tab moved

[manoj-mehra-spraxa]

What happened?

Problem:

When using Bottom Tabs in React Native Navigation, the registerBottomTabPressedListener is triggered after the tab is already selected. This means: The screen transition already occurs before we can react. We cannot prevent the tab from opening based on logic (e.g., user not allowed, show popup, etc.).

What We Need:

Intercept the tab press before navigation happens. Prevent navigation to a specific tab under certain conditions (e.g., user not logged in). Instead of navigating, we want to show a popup or alert explaining why the tab is blocked.

What was the expected behaviour?

When a user taps on a bottom tab, you want:

To intercept the tab press before navigation happens. Prevent the navigation to certain tabs under specific conditions (e.g., user not logged in, permission not granted). Instead of navigating, show a custom popup/message/alert explaining why access to that tab is restricted.

Was it tested on latest react-native-navigation?

• [x] I have tested this issue on the latest react-native-navigation release and it still reproduces.

Help us reproduce this issue!

async setupNavigationForLoggedIn() {
        const icons = await this.getTabIcons();
        Navigation.setRoot({
            root: {
                bottomTabs: {
                    id: 'BottomTabsId',
                    options: {
                        bottomTabs: {
                            backgroundColor: 'whitesmoke',
                            fontSize: 12,
                            selectedFontSize: 14,
                            titleDisplayMode: 'alwaysShow',
                            animateTabSelection: true,
                            elevation: 30,
                            tabsAttachMode: "afterInitialTab"
                        },
                    },
                    children: utils.getNavigationStack().map(tabConfig => {
                        const [inactiveIdx, activeIdx] = tabConfig.iconIndexes;
                        return {
                            stack: {
                                id: tabConfig.id,
                                children: [
                                    {
                                        component: {
                                            name: tabConfig.component,
                                            passProps: tabConfig.passProps || {},
                                            options: {
                                                bottomTab: {
                                                    ...this.commonTabOptions(tabConfig.label, icons[inactiveIdx], icons[activeIdx]),
                                                    titleDisplayMode: 'alwaysShow',
                                                },
                                            },
                                        },
                                    },
                                ],
                            },
                        };
                    }),
                },
            },
        });
        // This is not required if we don't need to show anything conditionality 
        this.registerBottomTabPressedListener();
    }
Navigation.events().registerBottomTabPressedListener(({ tabIndex }) => {
            debugger;
            Navigation.mergeOptions('BottomTabsId', {
                bottomTabs: { currentTabIndex: tabIndex },
            });
        });

In what environment did this happen?

React Native Navigation version: "8.0.0", React Native version: "0.76.0" Has Fabric (React Native's new rendering system) enabled: (yes/no) yes Node version: 20.0.0