React-native-navigation: Drawer (handledeeplink) doesn't work with startTabBasedApp

Created on 11 Mar 2018  路  1Comment  路  Source: wix/react-native-navigation

Issue Description

Hard to explain, but follow steps :

I open my right drawer. On this drawer, I "click" on link and I use handledeeplink.
My drawer close and on eache tabs screens, I use navigator event for read deeplink and I push the screen.

This work perfectly, but when I pop and change tabs, screen is pushed again. (The deeplink is reading on each screen, why ?)

Steps to Reproduce / Code Snippets / Screenshots

I startTabBasedApp with right drawer. On my drawer, I use (when touchable)

   profil(pseudo){
      Navigation.handleDeepLink({
         link: 'profil',
         payload: {pseudo: pseudo}
      });
   };

And on each tabs screen, I use, in constructor :
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));

onNavigatorEvent(event) {
    if (event.type == 'DeepLink') {
            this.props.navigator.toggleDrawer({
                    side: 'right',
                    animated: true,
                    to: 'closed'
            });

        if(event.link == "profil"){
            setTimeout(() => {
                props.navigator.push({
                    screen: 'example.profile',
                    passProps: {pseudo: event.payload.pseudo},
                    animated: true,
                  });
            }, 400);
        }
    }
}

So the screen is pushed, but when I pop and I change tab, screen is repushed again.


Environment

  • React Native Navigation version: 1.1.386
  • React Native version: 0.51
  • Platform(s) (iOS, Android, or both?): iOS
  • Device info (Simulator/Device? OS version? Debug/Release?): iOS 11.2

Most helpful comment

I found a solution/trick :

In construction, initialize variable :

this.screenState = null;
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));

And onNavigatorEvent :

onNavigatorEvent(event) {
    switch(event.id) {
        case 'willAppear':
        this.screenState = "willAppear";
        break;
        case 'didAppear':
        this.screenState = "didAppear";
        break;
        case 'willDisappear':
        this.screenState = "willDisappear";
        break;
        case 'didDisappear':
        this.screenState = "didDisappear";
        break;
    }

    if (event.type == 'DeepLink' && (this.screenState == "willAppear" || this.screenState == "didAppear")) {
        //Make your things..
    }
}

>All comments

I found a solution/trick :

In construction, initialize variable :

this.screenState = null;
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));

And onNavigatorEvent :

onNavigatorEvent(event) {
    switch(event.id) {
        case 'willAppear':
        this.screenState = "willAppear";
        break;
        case 'didAppear':
        this.screenState = "didAppear";
        break;
        case 'willDisappear':
        this.screenState = "willDisappear";
        break;
        case 'didDisappear':
        this.screenState = "didDisappear";
        break;
    }

    if (event.type == 'DeepLink' && (this.screenState == "willAppear" || this.screenState == "didAppear")) {
        //Make your things..
    }
}
Was this page helpful?
0 / 5 - 0 ratings

Related issues

zagoa picture zagoa  路  3Comments

nbolender picture nbolender  路  3Comments

edcs picture edcs  路  3Comments

yayanartha picture yayanartha  路  3Comments

viper4595 picture viper4595  路  3Comments