React-native-router-flux: Scenes inside tabs getting unmounted and then re-mounted

[nlively]

Version

Tell us which versions you are using:

• react-native-router-flux v3.36.0
• react-native v0.36.0

Expected behaviour

I have a main component structured like this (simplified version below):

class App extends Component {

    selectRouterTab(props) {
        let tab = 'main' : 'authentication';
        console.log('router_tab', tab);
        return tab;
    }

    render() {
        let ConnectedSwitch = connect((state)=>({logged_in: state.session.logged_in}))(Switch);

        return (
                <Provider store={store}>
                    <RouterWithRedux>
                        <Scene key="root"
                               component={ConnectedSwitch}
                               tabs={true}
                               unmountScenes={true}
                               selector={this.selectRouterTab.bind(this)}
                        >
                            <Scene key="authentication">
                                <Scene key="splash" initial={true} component={SplashView}/>
                                <Scene key="signIn" component={SigninView} title="Sign In"/>
                            </Scene>

                            <Scene key="main">
                                <Scene key="home" initial={true} component={HomeView}/>
                                <Scene key="people" component={PeopleView} title="People"/>
                            </Scene>

                        </Scene>
                    </RouterWithRedux>
                </Provider>
        );
    }
}

I put some logging code into my SignInView component to track when it is mounted and unmounted. Like this:

class SigninView extends Component {

    componentDidMount() {
        console.log('mounting SigninView');
    }

    componentWillUnmount() {
        console.log('unmounting SigninView');
    }

    render() {
        //...
    }
}

When the app starts, it starts in the authentication scene. I should see "SignInView mounted" in the log.

When the app goes into a logged in state, the router switches scenes from authentication to main. I should see "SignInView unmounted" in the log.
I should not expect see "SignInView mounted" again after "SignInView unmounted" unless I log out.

Actual behaviour

Log output:

### APP OPENED IN UNAUTHENTICATED STATE ###

router_tab authentication
mounting SigninView   ### EXPECTED ###
router_tab authentication
router_tab authentication

### LOGIN HAPPENED HERE ###

router_tab main
unmounting SigninView   ### EXPECTED ###
router_tab main
mounting SigninView  ### NOT EXPECTED ###

The HomeView component visible, but SigninView seems to have been mounted also. Although SigninView is not visible, its presence causes a keyboard to appear in HomeView.

What needs to happen so that SigninView is NOT remounted unless the Switch changes tabs from main to authentication?

[raminious]

👍 Same issue

[Rayji96]

Have you tried using:
<Scene key="main" type={ActionConst.RESET}>
Details:
https://github.com/aksonov/react-native-router-flux/blob/master/docs/API_CONFIGURATION.md#actionconst

[nlively]

@Rayji96, I tried this and got other problems. Seems that the other scene keys are no longer available after it uses RESET.

So setting type={ActionConst.RESET} worked for the initial login. The keyboard was no longer visible. However, when I logged out, it could not return to the "authentication" scene. See attached error.

[Rayji96]

From what I understand, RESET unmounts everything except the current scene. When navigating on log out you're calling Actions.authentication, correct?

On a side note, is there any reason why your authentication scenes exist on a tabbar with your main scenes?

[nlively]

@Rayji96,

We mounted grouped our scenes into containers inside a parent with "tabs={true}". This was so that we could use Redux and the component to switch between sections of the app based on state. The intention was that the app would automatically switch to the appropriate section based on authentication, load status, etc, rather than manually calling scene transitions to change sections.

So when I log out, I don't explicitly navigate. I simply dispatch an action that updates state and indicates that the app is in an unauthenticated state. The router then switches to the authentication screens.

This was working until a recent update. In the recent update, the symptom of the problem is a phantom keyboard that appears when I switch tabs.

[nlively]

@Rayji96 for clarification, I'm trying to do what is documented here:
https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md#switch-new-feature

[almirfilho]

Perhaps it has something to do with issue #1293? @nlively

[nlively]

@almirfilho I updated to 3.37.0 and the problem persists.

Here's a video showing my experience:
https://drive.google.com/file/d/0B50qWVZx4T7dVkZmb0ZNYW5UdFE/view

I can confirm by looking at the logs that they keyboard that appears is from the Sign In screen. The sign in screen is part of a "tab" that is not active. The sign in screen was unmounted but then appears to have been re-mounted underneath the active screen, which causes the keyboard to appear.

[almirfilho]

@nlively in your code you're setting both scenes as initial={true}, and since you're using a selector, I think you could just try to remove these initial props from them. Have you tried this already? Hope it helps!

[nlively]

Hi @almirfilho. Thanks for the suggestion, but I don't see any change after removing those.

The sign in view is unmounted and then re-mounted on the tab change no matter what, causing the keyboard to appear when it is not desired.

Issue persists.

[sarovin]

1386 this solve the problem?

[gijoehosaphat]

This issue doesn't appear fixed. Even with #1386. It still either doesn't unmount the scene, or unmounts it to the point where it can no longer be navigated to via type={ActionConst.RESET}

[almirfilho]

Looks like that bug returned with the new version (3.38.0). Tab scenes are getting unmounted if you change between tabs and then re-mounted again when you get back. Downgraded to version 3.37.0 and the bug went away. cc @sarovin

• react-native version: 0.42.3

[kesha-antonov]

Can confirm!
3.37.0 - OK
3.38.0 - double mounting on tabs

[benjaminreid]

Also reporting this as well, downgrading to 3.37.0 fixed this.

It seems to occur when having at least 3 tabs.

Clicking between tab 1 => 2 => 1 => 2 was ok, but once you mounted a 3rd, 1 => 2 => 1 => 3 => 2 that's when the mounting issues started.

When you click a tab, the components gets unmounted then immediately remounted.

[ujwal-setlur]

I am having this issue as well! An unmounted scene is getting remounted (but not displayed). I will try 3.37.0

[ujwal-setlur]

Crap, 3.37.0 does not work with react 0.44. Any ideas? Maybe I can try to see the difference between 3.37.0 and 3.38.0 and apply that patch...

[ujwal-setlur]

Took a quick look at the diff, and it's not so apparent. I will just have to work around this issue for now, though I am concerned what else is lurking, ie which other component would get mounted when it shouldn't...

Can this please be addressed ASAP? Happy to help in testing.

[benjaminreid]

@sarovin Can this be reopened, there still seems to be some issue with this.