[bug] When switch between tabs, there is a blank space at the top if use Tabs.ScrollView

[devoren]

Hey 👋 When I switch between tabs, there is a blank space at the top if I use Tabs.ScrollView: "react-native-collapsible-tab-view": "^6.1.4"

Code:

const tabs = useMemo(
() => [
    { key: 'about', title: 'T' },
    { key: 'products', title: 'A' },
    { key: 'categories', title: 'S' },
    { key: 'reviews', title: 'F' },
],
[],
);

const renderHeader = useCallback(() => {
return <Header title={storeName} />;
}, []);

return (
<View style={{ flex: 1, backgroundColor: colors.gray100 }}>
    <Tabs.Container
        headerHeight={undefined}
        renderTabBar={(props) => (
            <MaterialTabBar
                {...props}
                activeColor={colors.primary}
                inactiveColor={colors.gray900}
                labelStyle={styles.labelStyle}
                tabStyle={styles.tabStyle}
                scrollEnabled
                indicatorStyle={styles.indicatorStyle}
                contentContainerStyle={{
                    gap: scale.sx,
                }}
            />
        )}
        renderHeader={renderHeader}
        headerContainerStyle={styles.tabBarStyle}>
        {tabs.map((tab) => {
            switch (tab.key) {
                case 'about':
                    return (
                        <Tabs.Tab name={tab.title} key={'about'}>
                            <AboutTab />
                        </Tabs.Tab>
                    );
                case 'products':
                    return (
                        <Tabs.Tab name={tab.title} key={'products'}>
                            <ProductsTab translationY={translationY} />
                        </Tabs.Tab>
                    );
                case 'categories':
                    return (
                        <Tabs.Tab name={tab.title} key={'categories'}>
                            <CategoriesTab />
                        </Tabs.Tab>
                    );
                case 'reviews':
                    return (
                        <Tabs.Tab name={tab.title} key={'reviews'}>
                            <ReviewsTab />
                        </Tabs.Tab>
                    );
                default:
                    return null;
            }
        })}
    </Tabs.Container>
</View>
);

[davram88]

Same problem, any update?

[devoren]

@davram88 nope :(

[davram88]

It seems that whitespace is based on the height of the header. If you remove the header completely from the container you won't have that space anymore. Still no final solution tho :(

[davram88]

I added cancelLazyFadeIn to my Tabs.Lazy and now I don't have that initial white space when I switch tabs.

<Tabs.Container ref={ref} pagerProps={{scrollEnabled: false}} key={elementProps.keyStr}
                    minHeaderHeight={minHeaderHeight}
                    renderHeader={() => elementProps.header}
                    renderTabBar={tabBar}>

      {elementProps.tabs.map(tab => (
        <Tabs.Tab name={tab.name}>
          <Tabs.Lazy key={tab.name} cancelLazyFadeIn>
            <Tabs.ScrollView>
              {tab.view}
            </Tabs.ScrollView>
          </Tabs.Lazy>
        </Tabs.Tab>
      ))}
    </Tabs.Container>

[devoren]

@davram88 oh okay i will try it thank you

[ivanichoo]

Hello,

Got the same bug with Tabs.FlashList and dynamic height. I have been trying all solutions above but nothing works or is stable.

"expo": "~48.0.12", "react-native": "0.71.8", "react-native-collapsible-tab-view": "^6.2.0"

Thank you!

[devoren]

Guys, in my case, the name of the tabs was in a specific language, and not in English, because of this, such a problem arose. @davram88, @ivanichoo if your tab name is in another language try english and use the label as the tab name. So I'm closing the issue as it's been resolved

[miguelespinoza]

I seem to have the same issue but with Tabs.FlashList and lazy, I created a new issue here https://github.com/PedroBern/react-native-collapsible-tab-view/issues/373

[metinaltinbas]

@devoren I don't think it is related to the language issue, some of others also having the same problem with english name and labels.

[devoren]

@metinaltinbas yeah i saw :(

[miladdev85]

I have this issue with Tabs.FlatList. Any solution?

Using:

"react-native-collapsible-tab-view": "6.2.1",
"react-native-pager-view": "6.2.1",
"react-native-reanimated": "2.17.0",

Edit: Problem seems to appear only in debug mode so I'm happy now :)

[devoren]

@miladdev85 wow really?! i closed and now i see bug again (and it doesn't matter what list it is)

[miladdev85]

@miladdev85 wow really?! i closed and now i see bug again (and it doesn't matter what list it is)

Yes, it's gone for me. Only appears if I debug with Chrome. Haven't tried out TestFlight build yet... 😬

[metinaltinbas]

I still have the bug with FlashList and lazy

[iy-913]

I encountered the same problem in a multilingual application and it turned out that for the English language everything works correctly, but with other languages ​​there is this problem.

Before my code was like

<Tabs.Tab name={'Some tab name'}>

After my code is like

<Tabs.Tab name={'Some tab name ID'} label={'Some tab label text'}>

Where label is displayed text and everything works fine.

[webdobe]

I came across this issue as well. Here is what it looks like some key values are setting the "estimated" and the disableHorizontalListHeightMeasurement values:

<Tabs.Lazy startMounted={false} cancelLazyFadeIn>
      {posts && posts.length ? (
        <Tabs.MasonryFlashList
          disableHorizontalListHeightMeasurement
          data={posts}
          contentContainerStyle={{padding: 10}}
          numColumns={3}
          estimatedItemSize={200}
          estimatedListSize={{width: Dimensions.get("window").width, height: Dimensions.get("window").height}}
          keyExtractor={(item) => item.id}
          estimatedFirstItemOffset={0}
          renderItem={({item}) => {
            const media = item?.getValue("field_media");
            const url = getMediaUrl(media, "large");
            return (
              // Inserted component here. 
            )
          }}
          onEndReached={onEndReached}
          onEndReachedThreshold={0.5}
          onRefresh={onRefresh}
          refreshing={isLoading}
        />
      ) : null}
    </Tabs.Lazy>

[ShashankSai2110]

I am also getting the same issue. Can anyone guide to resolve this

[AbdoHema2016]

here is the fix I came up with

[VictorioMolina]

Any updates?

[andreialecu]

Is this still an issue with version 6.2.2?

Can someone make a repro on top of the Example app in the repo?

[andreialecu]

https://github.com/PedroBern/react-native-collapsible-tab-view/pull/394 might fix this, I released it as 7.0.1-beta.0 on npm. Please help test it for unwanted side effects and report back. Thanks!