My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

react native navigation button fast multiple clicks

Kaustubh Pimparkar's photo
Kaustubh Pimparkar
·Sep 13, 2016

In my code, when I go on clicking on right menu hamburger button from navigation bar at fast rate, it breaks expected navigation flow and at last simulator displays below error message

Error after fast multiple clicks on right button:

Below is console.log from onPress action: (push and pop actions happens alternatively which is expected for nav button)

*on Home Page

route: Object {id: "MainView", title: "HOME", __navigatorRouteID: 1}

*on Right menu Page

route: Object {id: "RightMenuContent", __navigatorRouteID: 2}

*on Right menu Page route: Object {id: "RightMenuContent", __navigatorRouteID: 2}

*on Right menu Page

route: Object {id: "RightMenuContent", __navigatorRouteID: 2}

*on Right menu Page

route: Object {id: "RightMenuContent", __navigatorRouteID: 2}

*shouldn't go here

route: Object {id: "Login", __navigatorRouteID: 0}


From console I see Code logic written with 'NavigationBarRouteMapper' tries to pop to index 2 which doesn't exist after many clicks, because index is 0.

Below is code logic for Right button function from NavigationBarRouteMapper:

    RightButton(route, navigator, index, navState) {
     return(
       <TouchableHighlight
        underlayColor='#990000'
        onPress={()=>{
          dismissKeyboard();
          if(route.id == 'MainView') {
            console.log('*on Home Page');
            console.log('route: ',route);
            navigator.push({id: 'RightMenuContent'});
          }
          else if(route.id == 'RightMenuContent') {
            console.log('*on Right menu Page');
            console.log('route: ',route);
            navigator.pop();
          }
          else {
            console.log('*shouldn\'t go here');
            console.log('route: ',route);
            // **below code fetches error screen
            navigator.popToRoute(navigator.getCurrentRoutes()[2]);
          }
        }}
       >
         <Image
          style={styles.rightMenuIcon}
          source={rightMenuIcon}
         />
      </TouchableHighlight>
     ); }, // RightButton function end

My opinion on issue from console log: Looks like control goes in (route.id == 'RightMenuContent') condition 3/4 times unless 'navigator.pop()' action is complete. Could be because of asynchronous onpress action while pop is happening.

Has anyone faced this issue? I m new to React Native and JS! Please guide. Thanks!