Closed tcorreiaubi closed 3 years ago
hi @tcorreiaubi I ran your example. If you provide the header height, it will work. But yes this is a bug, it should work without providing the header height.
headerHeigth={...}
fixed in v3.3.1
@PedroBern Seems to be working, just noticed another strange behaviour, if If I use a .map to render the tabs the scroll stops working again, example:
Does not work
<View style={{flex: 1}}>
<Tabs.Container
containerRef={containerRef}
refMap={refMap}
HeaderComponent={() => (
<View style={styles.header}>
<Container>
<Text style={styles.title}>Header</Text>
</Container>
</View>
)}>
{tabs.map((tab) => (
<TabScreen type={tab} key={tab} />
))}
</Tabs.Container>
</View>
Works:
<View style={{flex: 1}}>
<Tabs.Container
containerRef={containerRef}
refMap={refMap}
HeaderComponent={() => (
<View style={styles.header}>
<Container>
<Text style={styles.title}>Recursos das Região</Text>
</Container>
</View>
)}>
<TabScreen
type={ResourceType.CLASSIFIED_AREAS}
key={ResourceType.CLASSIFIED_AREAS}
/>
<TabScreen type={ResourceType.HABITATS} key={ResourceType.HABITATS} />
<TabScreen type={ResourceType.SPECIES} key={ResourceType.SPECIES} />
<TabScreen
type={ResourceType.WATER_COURSES}
key={ResourceType.WATER_COURSES}
/>
</Tabs.Container>
</View>
TabScreen is a simple component that returns a Tabs.FlatList
@tcorreiaubi this is weird, not sure, but maybe has something to do with this line
Hey @PedroBern, not sure about it, I didn't had much time in the last days to test it properly, but i tried with and without .map and with lazy enabled or disabled and the behavior is exactly the same in all those cases, I also noticed that the problem only exists on the first 2 tabs, which is really strange, im uploading a video so you can see the behavior, i will also try to create a reproducible example and try to find the root cause of it and try to fix if i get there, code:
import {createCollapsibleTabs} from 'react-native-collapsible-tab-view';
import {ResourceType} from 'types/index';
export type TabNames =
| ResourceType.CLASSIFIED_AREAS
| ResourceType.HABITATS
| ResourceType.SPECIES
| ResourceType.WATER_COURSES;
const {useTabsContext, ...Tabs} = createCollapsibleTabs<TabNames>();
export {Tabs, useTabsContext};
export const Resources: React.FC<ResourcesProps> = () => {
const containerRef = useAnimatedRef<ContainerRef>();
const classifiedAreasRef = useAnimatedRef<RefComponent>();
const waterCoursesRef = useAnimatedRef<RefComponent>();
const habitatsRef = useAnimatedRef<RefComponent>();
const speciesRef = useAnimatedRef<RefComponent>();
const [refMap] = useState<
Record<ResourceType, React.RefObject<RefComponent>>
>({
'classified-areas': classifiedAreasRef,
'water-courses': waterCoursesRef,
habitats: habitatsRef,
species: speciesRef,
});
return (
<View style={{flex: 1}}>
<Tabs.Container
containerRef={containerRef}
refMap={refMap}
HeaderComponent={() => (
<View style={{backgroundColor: 'yellow', paddingVertical: 50}}>
<Text>Header</Text>
</View>
)}>
{tabs.map((tab) => (
<TabScreen type={tab} key={tab} />
))}
</Tabs.Container>
</View>
);
};
export const TabScreen: React.FC<TabScreenProps> = ({type}) => {
useEffect(() => {
console.log('type', type);
});
return (
<Tabs.ScrollView name={type} key={type}>
{lines.map((_, index) => (
<Text key={index} style={{color: 'red', paddingVertical: 36}}>
{index}
</Text>
))}
</Tabs.ScrollView>
);
};
Im using version 3.5.0
@tcorreiaubi really weird. Please share your tabs
array, it is missing in the code.
@PedroBern It's an array containing all the names
const tabs = [
ResourceType.WATER_COURSES,
ResourceType.CLASSIFIED_AREAS,
ResourceType.HABITATS,
ResourceType.SPECIES,
];
Hey @PedroBern, just got back to it and it's working, not sure if you fixed something, but either way thanks for following up with the problem and the amazing job 👍
Current behavior
The tabview header is not collapsing on scroll at the tabview
Expected behaviour
I would expected the header to collapse as exemplified in the README, im not sure if I'm missing any configuration, but I followed the docs more than once to be sure about it
Code sample
https://github.com/tcorreiaubi/CollapsibleTabViewsDemo
Screenshots (if applicable)
What have you tried