Component renders twice / showing up in nav bar twice

[isAlmogK]

This is a wired issue, not sure why it's happing but it looks like the my home component is getting rendered twice attached gif as you can see the nav bar has home twice and you can go back to home even though

home is the first view.

My code

<Provider store={store}>
                <ConnectedRouter>
                    <Scene key="root">
                        <Scene key="login" component={Login} initial={true} title={'Login'} />
                        <Scene key="ResetPassword" component={ResetPassword} title={'Reset Password'} />
                        <Scene key="tabBar" tabs hideNavBar={true}>
                            <Scene key="tab1" title="Home" tabBarLabel="Home" icon={HomeTabIcon}>
                                <Scene key='Home' component={Home} title='Home' initial={true} />
                                <Scene key='teams' component={Teams} title='Teams' initial={false} />
                            </Scene>
                            <Scene key="tab2" title="Photos" tabBarLabel="Photos" icon={PhotosTabIcon}>
                                <Scene key='Photos' component={Photos} title='Photos' initial={false} />
                            </Scene>
                            <Scene key="tab3" title="Site Diary" tabBarLabel="Site Diary" icon={SiteDiaryTabIcon}>
                                <Scene key='SiteDiary' component={SiteDiary} title='SiteDiary' initial={false} />
                            </Scene>
                        </Scene>
                    </Scene>
                </ConnectedRouter>
            </Provider>

[aksonov]

Please always mention version

…

13 июля 2017 г., в 12:39, Almog Koren ***@***.***> написал(а): This is a wired issue, not sure why it's happing but it looks like the my home component is getting rendered twice attached gif as you can see the nav bar has home twice and you can go back to home even though home is the first view. My code <Provider store={store}> <ConnectedRouter> <Scene key="root"> <Scene key="login" component={Login} initial={true} title={'Login'} /> <Scene key="ResetPassword" component={ResetPassword} title={'Reset Password'} /> <Scene key="tabBar" tabs hideNavBar={true}> <Scene key="tab1" title="Home" tabBarLabel="Home" icon={HomeTabIcon}> <Scene key='Home' component={Home} title='Home' initial={true} /> <Scene key='teams' component={Teams} title='Teams' initial={false} /> </Scene> <Scene key="tab2" title="Photos" tabBarLabel="Photos" icon={PhotosTabIcon}> <Scene key='Photos' component={Photos} title='Photos' initial={false} /> </Scene> <Scene key="tab3" title="Site Diary" tabBarLabel="Site Diary" icon={SiteDiaryTabIcon}> <Scene key='SiteDiary' component={SiteDiary} title='SiteDiary' initial={false} /> </Scene> </Scene> </Scene> </ConnectedRouter> </Provider> — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[isAlmogK]

No problem "react-native-router-flux": "4.0.0-beta.7",

[aksonov]

Always try latest one before creating of issue ;) Please check with beta.8

[isAlmogK]

Same issue with 8

[aksonov]

Could you reproduce it with Example? Have you added console logs and see re-rendering several times?

[isAlmogK]

I did that was the first thing I check as you can see it renders twice

[aksonov]

Ok, please reproduce with Example and latest beta.8

[isAlmogK]

Isn't the example code outdated for version 4?

[aksonov]

Why? I've just increased dep to beta.8 if it is what you are saying.

[isAlmogK]

My code is different than the example code more, I'm not going to rewrite the entire example to like mine and just because the example is not showing this issue does not mean it's not a bug.

And this is a bug

[aksonov]

Sorry, I can't guess the problem, I need to see the code. All I see from screenshot is some weird navbar transition and it could happen because of hidden navbar for tabbar. For such cases look at headerMode setting for RN StackNavigator - 'screen' maybe better ('float' is used by default)

[isAlmogK]

I debugged the issue, I don't think we need to create examples for each issue if you look at the code that should help, this is how StackOverflow works when you ask for help.

This is definitely a bug

If I'm for example a login screen and have
Actions.Home();

Which is a component inside a tab bar, the first one you get that issue because the lib loads the tab bar and the home component.

If you do the following
Actions.tabBar();

It loads the tab bar which in turn loads the fist component, or it just gets loaded once.

[aksonov]

Then try to fix it by yourself - RNRF is just wrapper around react-navigation and build all screens for you. As far as I can see when you are calling Actions.Home - you are telling react-navigation to PUSH Home - but Home is already exist as start screen, so you will have two screens as the result

[isAlmogK]

I already fixed it, just did Actions.tabBar();

[aksonov]

That is why I said. So it is not bug, but incorrect usage.

[isAlmogK]

No, I still think it's a bug, but you can explain.

I have a 3 tabs each have 1 view component

How do I navigate between tabs because if I do

Actions.Photos();

The second tab it loads the photos component tab twice

[isAlmogK]

To follow up it seems that if your component is inside a tabs scene and you use Actions.xx to call it for some reason it loads that component twice

[isAlmogK]

Can you reopen this, it's definitely an issue. Did you understand how it's happing

[aksonov]

As I said RNRF is just wrapper.
Is it similar to react-navigation/react-navigation#476 ?

[isAlmogK]

@aksonov I understood that I was saying we should keep it open until 476 is fixed

[aksonov]

Please try PR #2025, I did some workaround

[isAlmogK]

Tried testing it, PR has an issue

[isAlmogK]

I can confirm this still happens with beta 9 and I'm on "react-navigation": "^1.0.0-beta.11", I'm calling
Actions.Photos(); which is inside a tab bar

[aksonov]

You should call direct tabs child

…

14 июля 2017 г., в 18:16, Almog Koren ***@***.***> написал(а): I can confirm this still happens with beta 9 and I'm on "react-navigation": "^1.0.0-beta.11", I'm calling Actions.Photos(); which is inside a tab bar — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[isAlmogK]

How do I do that? What is the code?

[aksonov]

Actions.tab2()

…

14 июля 2017 г., в 18:40, Almog Koren ***@***.***> написал(а): How do I do that? What is the code? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[isAlmogK]

Thanks perfect and working great

[ShawSmall]

The bottom navigation switch, the page is reloaded, resulting in slow switching and waste of traffic