On latest 7.40.1 with RN 0.74.5, componentDidAppear is not fired on bottom tabs of android unless we navigate to other tab and return

[angelos3lex]

What happened?

This was not the case on RN 0.72.6 with 7.37.1 navigation version.

Let's say we have 2 bottom tabs, with 2 screens. By default we see the first screen. The componentDidAppear is not fired on android (while it is firing correctly on ios). We ttap to move to second tab. Again the componentDidAppear is not fired for the second screen. We tap again on tab A. The didAppear fires correctly. Same when tapping again on tab b.

It's interesting to note that didAppear events fire correctly for other screens that are not part of the bottom tabs screens, but a normal stack initiated from a bottom tab screen.

What was the expected behaviour?

Should work like on previous versions and like on iOS, where didAppear fires even on the first display of each tab screen.

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!

I initiate my bottom tabs like:

Navigation.setRoot({
        root: {
            bottomTabs: {
                children: [
                    {
                        stack: {
                            id: 'homeStack',
                            children: [
                                {
                                    component: {
                                        name: HomeScreen.TAG,
                                        id: HomeScreen.TAG,
                                    },
                                },
                            ],
                        },
                    },
                    {
                        stack: {
                            id: 'secondStack',
                            children: [
                                {
                                    component: {
                                        name: SecondScreen.TAG,
                                        id: SecondScreen.TAG,
                                    },
                                },
                            ],
                        },
                    },
                ],
            },
        },
    });

In what environment did this happen?

React Native Navigation version: 7.40.1 React Native version: 0.74.5 Has Fabric (React Native's new rendering system) enabled: (yes/no) no Node version: 18.18 Device model: doesn't matter (in emulator it's happening too) Android version: 11 (but reproduce also on 14,15

[angelos3lex]

If i set:

options: {
                    bottomTabs: {
                        tabsAttachMode: 'afterInitialTab',
                    },
                },

Then for second tab it's working correctly, the didAppear event fires with the first tap. Only the first tab remains problematic. Also maybe worth to mention, the didDisappear events work well.

[martinnov92]

What helped me was to remove component id in the stack and kept there only name. Something similar was solved here. I am not exactly sure why, but maybe the id has to be unique for each setRoot...

                    {
                        stack: {
                            id: 'homeStack',
                            children: [
                                {
                                    component: {
                                        name: HomeScreen.TAG,
                                    },
                                },
                            ],
                        },
                    },

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.