With the latest release (or better yet since 7.0.1), tabs are always Lazy Loaded not matter what

[gregavola]

When setting up a Tab controller, in the old version below 6.2.2, you could let all the tabs loaded, if they were not mounted (on screen), so when you swiped, they would be visible. Now there is about a 5-10 second delay on when the tab content is viewable, and then whenever you swipe, it's lazy loaded and takes some time to load in, even though the data is already there. Downgrading to 6.2.2 makes this work again, but I needed to upgraded to 8.0.01 to fix the issue of Tabs.FlashList not showing up on Android (due to the height and width).

Is there a way to have the same behavior as 6.2.2, where all tabs are mounted even if they are not visible?

Any ideas?

[pfcodes]

+1

[weizhe412]

same here, when I downgraded to 6.2.2, lazy={false} worked

[tinaszheng]

bump on this, still having problems with tabs being lazy loaded regardless of the prop

[kristian-nst]

same here :/ we rly dont want lazy ones (8.0.1)

[hariszulfiqar054]

I tried to fix it in this pull request works great on my app, so I'm wrapping the scenes in Lazy component only if the lazy prop is true
#485

[kristian-nst]

I tried to fix it in this pull request works great on my app, so I'm wrapping the scenes in Lazy component only if the lazy prop is true #485

awesome! i will test it tmr :D

[kristian-nst]

It is working as expected now! Would be great to merge this!

But for some reason my imports changed from 'react-native-collapsible-tab-view' to 'react-native-collapsible-tab-view/src'. I assume cause I'm using the branch and not the published package :)

[kristian-nst]

what i'm doing until this is merged, for anyone who needs :)

patch file:

diff --git a/src/Container.tsx b/src/Container.tsx
index e782b903b0220ec0114c62e268e7efb635e4be43..c53ff1341961eadd9be1439f7e04aa267d5635f5 100644
--- a/src/Container.tsx
+++ b/src/Container.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import { StyleSheet, useWindowDimensions, View } from 'react-native'
 import PagerView from 'react-native-pager-view'
 import Animated, {
@@ -71,11 +71,11 @@ export const Container = React.memo(
         headerContainerStyle,
         cancelTranslation,
         containerStyle,
-        lazy,
-        cancelLazyFadeIn,
         pagerProps,
         onIndexChange,
         onTabChange,
+        lazy,
+        cancelLazyFadeIn,
         width: customWidth,
         allowHeaderOverscroll,
       },
@@ -349,6 +349,27 @@ export const Container = React.memo(
         [onTabPress]
       )
 
+      const renderContent = useCallback(
+        (tabName: string, i: number) => {
+          if (lazy) {
+            return (
+              <Lazy
+                startMounted={lazy ? undefined : true}
+                cancelLazyFadeIn={!lazy ? true : !!cancelLazyFadeIn}
+                // ensure that we remount the tab if its name changes but the index doesn't
+                key={tabName}
+              >
+                {React.Children.toArray(children)[i] as React.ReactElement}
+              </Lazy>
+            )
+          }
+          return (
+            <>{React.Children.toArray(children)[i] as React.ReactElement}</>
+          )
+        },
+        [cancelLazyFadeIn, children, lazy]
+      )
+
       return (
         <Context.Provider
           value={{
@@ -438,18 +459,7 @@ export const Container = React.memo(
                 return (
                   <View key={i} style={styles.pageContainer}>
                     <TabNameContext.Provider value={tabName}>
-                      <Lazy
-                        startMounted={lazy ? undefined : true}
-                        cancelLazyFadeIn={!lazy ? true : !!cancelLazyFadeIn}
-                        // ensure that we remount the tab if its name changes but the index doesn't
-                        key={tabName}
-                      >
-                        {
-                          React.Children.toArray(children)[
-                            i
-                          ] as React.ReactElement
-                        }
-                      </Lazy>
+                      {renderContent(tabName, i)}
                     </TabNameContext.Provider>
                   </View>
                 )

then i ran

bun patch react-native-collapsible-tab-view
patch -p1 -d node_modules/react-native-collapsible-tab-view < my.patch
bun patch --commit 'node_modules/react-native-collapsible-tab-view'

im sure anyone who needs can make it work with npm/yarn and 'patch-package' too :)