Open phuocantd opened 1 year ago
@andreialecu How to fix it? Thanks
Facing same issue
A repro that can be applied on the Example app in this repository would help.
The same issue. For me, the header for Tabs.FlatList
scrolls to top automatically when the tab is clicked. How to fix it please? @andreialecu
Which version of the library? Can you reproduce this in the Example app in the repository?
@andreialecu Thank you for your quick reply. The problem I figured out is that I called jumpToTab()
to the same active tab. It looks like:
const tabRef = useRef(null);
const [activeTabName, setActiveTabName] = useState("FirstTab");
return (
<View style={{ flex: 1, backgroundColor: 'white' }}>
<ScrollView contentContainerStyle={{ flexGrow: 1 }} scrollEnabled={false} horizontal={true}>
<Tabs.Container
ref={tabRef}
...........
renderTabBar={props => {
const {tabNames} = props;
return <View style={{flexDirection: 'row'}}>
<TouchableOpacity onPress={() => {
// -----------> If you want to control tab event by yourself, you have to add judgment here.
if (activeTabName === tabNames[0]) {
return;
}
tabRef.current.jumpToTab(tabNames[0]);
}}>
<Text>{tabNames[0]}</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => tabRef.current.jumpToTab(tabNames[1])}>
<Text>{tabNames[1]}</Text>
</TouchableOpacity>
</View>;
}}
onTabChange={({tabName}) => setActiveTabName(tabName)}
>
<Tabs.Tab name={"FirstTab"} label={"label1"}>
<Tabs.FlatList .../>
</Tabs.Tab>
<Tabs.Tab name={"SecondTab"} label={"label2"}>
<Tabs.FlatList .../>
</Tabs.Tab>
</Tabs.Container>
</ScrollView>
</View>
);
In a nutshell, just returns if the current tab is focused(active
) and it's clicked again.
const goToTab = name => {
// Condition here, if not, the header will scroll up to top automatically if you jump to the current tab focused!
if (name === activeTab) {
return;
}
// Jump to any tab you want here!
};
I'm having the same issue. It's hard to reproduce reliably, but I think it might have to do with changing tabs while a Tabs.FlatList
is still rendering. I can do the same set of actions quickly and slowly, and fairly reliably the slow version works smoothly and the quick version janks the page around. This is using version 6.1.4
, and a flatlist of 28 medium-complicated components (feed items). The feed items are making some API calls, but nothing that changes their size I believe, the image frame will be the same size whether there's an image there or not and the same thing happens when the feed items have no images.
Fast:
Slow:
The basic code:
import React from 'react'
import { useColorModeValue } from 'native-base'
import {
Tabs,
MaterialTabBar,
TabBarProps,
TabProps,
} from 'react-native-collapsible-tab-view'
const tabBar = (props: TabBarProps) => {
return (
<MaterialTabBar
{...props}
indicatorStyle={{
backgroundColor: useColorModeValue('#000000', '#ffffff'),
}}
labelStyle={{
fontFamily: 'FavoritTrialStd-Light',
fontSize: 14,
}}
tabStyle={{
backgroundColor: useColorModeValue('#ffffff', '#000000'),
}}
activeColor={useColorModeValue('#000000', '#ffffff')}
inactiveColor={useColorModeValue('#333333', '#dddddd')}
/>
)
}
type TabViewProps = {
header?: () => JSX.Element
tabs: TabProps<string>[]
}
export const TabView = ({ header, tabs }: TabViewProps) => {
return (
<Tabs.Container
renderHeader={header}
renderTabBar={tabBar}
allowHeaderOverscroll={true}
>
{tabs.map((tab) => (
<Tabs.Tab name={tab.name} key={tab.name}>
{tab.children}
</Tabs.Tab>
))}
</Tabs.Container>
)
}
Facing the same issue, I reproduced from example directory. @dannykennedy I tried slow and quickly and don't think its related, its happening anyways.
Not only scrollable tabs, I'm also having same issue with custom tabbar in my project.
@andreialecu any work around to fix this?
When I change tab like video, it will move the header up and down
Version "react": "18.2.0", "react-native": "^0.70.6", "react-native-collapsible-tab-view": "^5.0.0-rc.13", "react-native-pager-view": "^6.1.2",
https://user-images.githubusercontent.com/31690470/228413590-fab31cc3-ddc0-4be2-b907-d7781283e4b4.mp4