Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
devoren opened this issue Jul 18, 2023 · 22 comments
Labels
question Further information is requested

Comments

@devoren
Copy link

devoren commented Jul 18, 2023

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>
);

123

@devoren devoren added the question Further information is requested label Jul 18, 2023
@davram88
Copy link

davram88 commented Aug 7, 2023

Same problem, any update?

@devoren
Copy link
Author

devoren commented Aug 7, 2023

@davram88 nope :(

@davram88
Copy link

davram88 commented Aug 7, 2023

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
Copy link

davram88 commented Aug 8, 2023

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
Copy link
Author

devoren commented Aug 8, 2023

@davram88 oh okay i will try it thank you

@ivanichoo
Copy link

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
Copy link
Author

devoren commented Aug 27, 2023

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

@devoren devoren closed this as completed Aug 27, 2023
@miguelespinoza
Copy link

I seem to have the same issue but with Tabs.FlashList and lazy, I created a new issue here
#373

@metinaltinbas
Copy link

@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
Copy link
Author

devoren commented Oct 5, 2023

@metinaltinbas yeah i saw :(

@miladdev85
Copy link

miladdev85 commented Oct 7, 2023

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
Copy link
Author

devoren commented Oct 10, 2023

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

@devoren devoren reopened this Oct 10, 2023
@miladdev85
Copy link

@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
Copy link

I still have the bug with FlashList and lazy

@iy-913
Copy link

iy-913 commented Dec 10, 2023

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
Copy link

webdobe commented Jan 23, 2024

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
Copy link

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

@AbdoHema2016
Copy link

here is the fix I came up with

@VictorioMolina
Copy link

Any updates?

@andreialecu
Copy link
Collaborator

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
Copy link
Collaborator

#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!

@hikitty2
Copy link

#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!#394 可能会解决这个问题,我在 npm 上将其发布为 7.0.1-beta.0。请帮助测试它是否有不需要的副作用并报告。谢谢!

The version 7.0.1-beta.0 still has the same issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests