Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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
1 task done
angelos3lex opened this issue Sep 4, 2024 · 2 comments

Comments

@angelos3lex
Copy link

angelos3lex commented Sep 4, 2024

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?

  • 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
Copy link
Author

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
Copy link

martinnov92 commented Sep 10, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants