Header collapsing only if headerHeight is defined

[tcorreiaubi]

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

[PedroBern]

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={...}

[PedroBern]

fixed in v3.3.1

[tcorreiaubi]

@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

[PedroBern]

@tcorreiaubi this is weird, not sure, but maybe has something to do with this line

[tcorreiaubi]

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

Edited_20210128_153956.mp4

Im using version 3.5.0

[PedroBern]

@tcorreiaubi really weird. Please share your tabs array, it is missing in the code.

[tcorreiaubi]

@PedroBern It's an array containing all the names

const tabs = [
  ResourceType.WATER_COURSES,
  ResourceType.CLASSIFIED_AREAS,
  ResourceType.HABITATS,
  ResourceType.SPECIES,
];

[tcorreiaubi]

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 👍