Tab navigation lag when nested in drawer

Question

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.

Answer 1

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.