wix / react-native-navigation

A complete native navigation solution for React Native
https://wix.github.io/react-native-navigation/
MIT License
13.05k stars 2.67k forks source link

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 #7909

Open angelos3lex opened 2 months ago

angelos3lex commented 2 months ago

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?

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 commented 2 months ago

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 commented 2 months ago

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,
                                    },
                                },
                            ],
                        },
                    },