setOnNavigatorEvent callback not fired when switching tabs

Question

I am working on an app powered by [email protected] and [email protected].

Initially, there is only a login screen (using Navigation.startSingleScreenApp). When the user logs in I call Navigation.startTabBasedApp (one of the tab components is my NavScreen). Whenever the user changes to another tab the root of the tab's stack is supposed to be displayed so I tried something like this:

class NavScreen extends React.PureComponent {
    constructor(props) {
        super(props)
        this.props.navigator.setOnNavigatorEvent(this.toRootOnTabSelect.bind(this))
    }

    toRootOnTabSelect(event) {
        const {id} = event
        if (["bottomTabSelected", "bottomTabReselected"].includes(id)) {
            this.props.navigator.popToRoot({
                animated: true,
                animationType: "fade",
            })
        }
    }

    render() {
        return <Text>Whatever...</Text>
    }
}

But for some reason my toRootOnTabSelect event handler method is not being called when I change tabs (by clicking on them - not by calling the switchToTab API method).

There are multiple posts I found online (i.e. https://stackoverflow.com/a/51159091/6928824, https://github.com/wix/react-native-navigation/issues/648) that indicate that it should work so I don't know what I'm missing. :/

Any help is greatly appreciated! :)

Answer 1

This seems to be a bug in react-native-navigation@^1.1.474 (note the caret): see my issue on GitHub.

An according pull request has been opened but not yet merged. :(