setOnNavigatorEvent callback not fired when switching tabs

Question

I am working on an app powered by react-native@0.55.4 and react-native-navigation@1.1.474.

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! :)

score 0 · Answer 1 · answered Jul 07 '18 at 18:19

One of the reasons that can cause that is using setOnNavigatorEvent in conjuction with addOnNavigatorEvent, if you have a screen wrapper component that implement addOnNavigatorEvent your current listener will not work.

As mentioned in documentation

setOnNavigatorEvent Can not be used in conjuction with addOnNavigatorEvent

Also

Bear in mind that you can't use both addOnNavigatorEvent and setOnNavigatorEvent. addOnNavigatorEvent returns a function, that once called will remove the registered handler.

I would suggest trying addOnNavigatorEvent instead of setOnNavigatorEvent

I tried using `addOnNavigatorEvent ` but that didn't change anything in my case. I also searched through my code and didn't find `addOnNavigatorEvent` anywhere else so using both shouldn't be the problem. I also commented out all other occurrences of `setOnNavigatorEvent ` to make sure it isn't called twice on the same navigator instance but that also didn't help :( — jneuendorf, Jul 07 '18 at 20:08

score 0 · Accepted Answer · answered Sep 10 '18 at 19:58

0

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. :(

answered Sep 10 '18 at 19:58

jneuendorf

402
6
18

setOnNavigatorEvent callback not fired when switching tabs

2 Answers2