1

I am having a issue when I am nesting my Tabs within my Drawer. Unfortunately, navigating to each tab is very slow, and their seems to be a lot of lag.

However, when I remove the Drawer navigator, and make it so that their is only a tab navigator, navigating between the different tab screens is noticeably better.

How can I make it so that their is no delay between the tabs when the tabs are nested in to the drawer?

{ *

With help from Mateusz, I have managed to pinpoint the issue. I tested the delay by rendering four of the same components. The first test was using

 children={() => {
           return <NfcWifiConfig />;
         }}

And the delay was still there

But then, when I used

component={NfcWifiConfig}

The delay is completely gone and navigation is running smoothly as it should. So my question now is, where do i go from here? How would i pass the props down with this syntax?

  • }

My current code is:

const DrawerComponent = ({
  Bunch of props here
}) => {
  return (

    <Drawer.Navigator
      drawerType="back"

      drawerContent={(props) => {
        return (
          <DrawerContent
            {...props}
          />
        );
      }}
     >

      {/* TABS */}

      <Drawer.Screen
        name="MainHome"
        children={({navigation}) => {
          return (
            <>
              <StatusBar backgroundColor={homeColor} barStyle="dark-content" />
              <Navbar navigation={navigation} userimage={userimage} />
              <Tabs.Navigator>

              {/* HOME STACK */}
              <Tabs.Screen
                name="Profile"
                children={() => {
                  return (
                    <>
                       <MainStackNavigator
                         {Bunch of props here}
                        />
                     </>
                    ;
                 }}
               />

               {/* SEARCH SCREEN */}
               <Tabs.Screen
                  name="Search"
                  children={() => {
                    return (
                      <>
                       <StatusBar barStyle="dark-content" />
                       <SearchStack
                        { Bunch of props here }
                       />
                     </>
                    );
                  }}
                />

                {/* NFC-SOCIAL SCREEN */}
                <Tabs.Screen name="Activate" component={NfcConfig} />

                {/* NFC-WIFI SCREEN */}
                <Tabs.Screen name="WiFi" component={NfcWifiConfig} />

              </Tabs.Navigator>
            </>
          );
        }}
      />

      {/* Add Links Screen */}

      <Drawer.Screen
        name="Add Links"
        children={({navigation}) => {
          return (
            <AddLinksScreen
               { Bunch of props here }
            />
          );
        }}
      />

      {/* Following Screen */}

      <Drawer.Screen
        name="Followers"
        children={({navigation}) => {
          return (
            <FollowerStack
              { Bunch of props here }
            />
          );
        }}
      />

      {/* Following Screen */}

      <Drawer.Screen
        name="Following"
        children={({navigation}) => {
          return (
           <FollowingStack
             { Bunch of props here }
           />
          );
        }}
      />

    </Drawer.Navigator>
  );
};

Also, the add links screen and followers/following screens work fine. Navigating to them works efficiently with no lag. But the tabs => home stack, search screen and the other two, have a heavy delay when navigating between them.

In terms of the content inside the tabs, the last two tabs are very light, and do not contain much content. I have tried commenting out the heavy tab screens and using just the two lightweight components, but same result. Making me believe that is not the issue.

Junaid Razaq
  • 241
  • 5
  • 14
  • 1
    Have you tested this with a production build on a physical device? I find that when developing there is quite a bit more latency and lag with navigation (especially with Android emulators) – Mateusz Siniarski Feb 11 '21 at 03:57
  • 1
    I have not yet tested in production mode. I will give it a try now. Thank you for the response – Junaid Razaq Feb 11 '21 at 04:04
  • So i just tested it, and, although it is considerably faster, there is still unfortunately a noticeable delay for the screen to appear when pressing on a new tab. – Junaid Razaq Feb 11 '21 at 04:37
  • 1
    Clear the screens of child components and see if the performance improves to a point that is acceptable. If so then try to figure out what components are taking a while to calculate/render and work on optimisation and loading the data/components once the screen has finished its initial load – Mateusz Siniarski Feb 11 '21 at 04:56
  • So I have found the issue. I rendered four of the same components and tested the delay. Whenever I use children={() => { return ; }} I can feel the delay. However, as soon as I switch to component={NfcWifiConfig} The delay is completely gone which is crazy. What would you suggest i do? I am currently searching how to pass params without using what i was using before as that is what is causing the delay – Junaid Razaq Feb 11 '21 at 06:15
  • Would need visibility on what NfcWifiConfig is doing. Glad to hear you have narrowed it down though. You can always use/render NfcWifiConfig once the screen transition has completed as well – Mateusz Siniarski Feb 12 '21 at 00:52

1 Answers1

0

So I managed to fix the issue. When I used:

 children={() => {
           return <NfcWifiConfig props{props} />;
         }}

The lag was present. However, when I used:

component={NfcWifiConfig}

The lag disappeared. However, my props were not being passed through. So what I did was use React Context to pass my props to all the different components that needed it and that's it, the lag was gone and the components were receiving the props as I wanted.

Also, the code is a lot cleaner when using React context, so I highly recommend it.

Junaid Razaq
  • 241
  • 5
  • 14