React Native Navigation : Deep link events not being fired when Tabs and Side Drawer are reloaded

Question

Issue Description

I created a simple app where you login, and then a couple of tabs are loaded with a side drawer.

The side drawer has buttons that allow you to navigate to other pages by using deep links.

The first time I log into the app, the buttons and deep links work fine. But when I logout and login again (logging in reloads the tabs and side drawer) none of the side drawer buttons work. In my deep link handlers, I outputted a console message, and I realized that the deep link events weren't being fired the second time, which is clearly the issue.

I don't know why this is happening, and I suspect that it is a bug. But in case it isn't, I'd like to be pointed out where I'm going wrong with my code and what I should be doing instead.

I'm attaching code snippets below.

Code Snippets

sidedrawer.js

import React, {Component} from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';

import {Navigation} from 'react-native-navigation';

import Icon from 'react-native-vector-icons/FontAwesome';

export default class SidedrawerComponent extends Component {

    constructor(props){
        super(props);
    }

    render(){
        return(
            <View style={styles.sideMenuStyle}>
              <View style={{height: '20%', borderColor: 'black', borderWidth : 1, backgroundColor : 'white'}}>
              </View>
              <TouchableOpacity onPress={this.goToScreen.bind(this, 'consumerSettings')}>
               <View style={{borderColor : 'black', borderWidth : 1, flexDirection : 'row'}}>
                <Icon name="home" size={30} color="black" />
                <Text style={{color : 'black', fontWeight : 'bold', fontSize : 20, marginLeft : 10}}>Settings</Text>
               </View>
              </TouchableOpacity>
              <TouchableOpacity onPress={this.goToScreen.bind(this, 'aboutUs')}>
               <View style={{borderColor : 'black', borderWidth : 1, flexDirection : 'row'}}>
                <Icon name="home" size={30} color="black" />
                <Text style={{color : 'black', fontWeight : 'bold', fontSize : 20, marginLeft : 10}}>About Us</Text>
               </View>
              </TouchableOpacity>
              <TouchableOpacity onPress={this.goToScreen.bind(this, 'termsAndConditions')}>
               <View style={{borderColor : 'black', borderWidth : 1, flexDirection : 'row'}}>
                <Icon name="home" size={30} color="black" />
                <Text style={{color : 'black', fontWeight : 'bold', fontSize : 20, marginLeft : 10}}>Terms and Conditions</Text>
               </View>
              </TouchableOpacity>
              <TouchableOpacity onPress={this.goToScreen.bind(this, 'inbox')}>
               <View style={{borderColor : 'black', borderWidth : 1, flexDirection : 'row'}}>
                <Icon name="home" size={30} color="black" />
                <Text style={{color : 'black', fontWeight : 'bold', fontSize : 20, marginLeft : 10}}>Inbox</Text>
               </View>
              </TouchableOpacity>
              <TouchableOpacity onPress={this.goToScreen.bind(this, 'logout')}>
               <View style={{borderColor : 'black', borderWidth : 1, flexDirection : 'row'}}>
                <Icon name="home" size={30} color="black" />
                <Text style={{color : 'black', fontWeight : 'bold', fontSize : 20, marginLeft : 10}}>Logout</Text>
               </View>
              </TouchableOpacity>
            </View>
        )
    }

  goToScreen = (screen) => {
    const visibleScreenInstanceId = Navigation.getCurrentlyVisibleScreenId();
    visibleScreenInstanceId.then((result)=>{
    this.props.navigator.handleDeepLink({
           link: screen,
           payload: result.screenId // (optional) Extra payload with deep link
        });
    })
   }
}

const styles = StyleSheet.create({
    sideMenuStyle : {
        backgroundColor : 'white',
        height : '100%'
    }
})

deep link handlers in one of the tabs :

navigatorEvent = event => {
      if(event.type==="NavBarButtonPress" && event.id === "DrawerButton"){
        this.props.navigator.toggleDrawer({
            side : 'left',
            animated : true
        })
      }
      if(event.type == 'DeepLink') {
          if(event.link=="aboutUs" && event.payload=='screenInstanceID5'){
            this.props.navigator.push({
              screen : 'ServiceTracker.AboutUsScreenComponent',
              title : 'About Us'
            })
            this.props.navigator.toggleDrawer({
             side : 'left',
             animated : true
            })
          }
          if(event.link=="termsAndConditions" && event.payload=='screenInstanceID5'){
            this.props.navigator.push({
              screen : 'ServiceTracker.TermsAndConditionsScreenComponent',
              title : 'Terms and Conditions'
            })
            this.props.navigator.toggleDrawer({
             side : 'left',
             animated : true
            })
          }
          if(event.link=="profile" && event.payload=='screenInstanceID5'){
            this.props.navigator.push({
              screen : 'ServiceTracker.ServiceProviderProfileScreenComponent',
              title : 'Profile'
            })
            this.props.navigator.toggleDrawer({
             side : 'left',
             animated : true
            })
          }
          if(event.link=="serviceProviderSettings" && event.payload=='screenInstanceID5'){
            this.props.navigator.push({
              screen : 'ServiceTracker.ServiceProviderSettingsScreenComponent',
              title : 'Settings'
            })
            this.props.navigator.toggleDrawer({
             side : 'left',
             animated : true
            })
          }
          /*if(event.link=="dashboard" && event.payload=='screenInstanceID5'){
            LoadTabs();
            this.props.navigator.toggleDrawer({
             side : 'left',
             animated : true
            })
          }*/
          if(event.link=="inbox" && event.payload=='screenInstanceID5'){
            this.props.navigator.push({
              screen : 'ServiceTracker.InboxScreenComponent',
              title : 'Inbox'
            })
            this.props.navigator.toggleDrawer({
             side : 'left',
             animated : true
            })
          }
          if(event.link=="logout" && event.payload=='screenInstanceID5'){
            this.props.navigator.toggleDrawer({
             side : 'left',
             animated : true
            })
            Navigation.startSingleScreenApp({
              screen : {
              screen : "ServiceTracker.LandingScreenComponent",
              title :  "Landing Screen",
              navigatorStyle : {
                navBarHidden : true
              }
             }
           })
          }
      }
    }

Environment

React Native Navigation version: 1.1.476 React Native version: 0.55.2 Platform(s) : Android Device info : Galaxy Nexus Simulator, Oreo (API 27), Debug

Answer 1

I figured out the issue - the deep link events were getting fired, but the problem was the value of result.screenId changes for each screen every time the tabs are reloaded.

So, in my deeplink handlers, instead of checking statically for a particular ID, I checked if the event.payload was == this.props.navigator.screenInstanceID, both variables which will of course match even if the ID's change, which is all that matters.

Hope this is useful for others trying to use React Native Navigation to create a side-drawer tab based app.