Removing HeaderComponent while LargeHeaderComponent is visible

[dinataranis]

Feature Request

Is it possible to add a flag to have an option to remove a HeaderComponent while LargeHeaderComponent is visible on the screen

Use Case

I need to display 2 different types of headers: HeaderComponent and LargeHeaderComponent When the HeaderComponent is not visible on the screen it still appears and takes a screen place, so you can see a white line (that represents HeaderComponent) between the Main header and a Large header components

Proposed Solution

Is it possible to add a prob to a Header component to define if it has to take a place on the screen while it is not visible or not, or maybe there is a work around that can implement the same behavior

Additional Information

https://github.com/codeherence/react-native-header/assets/53815066/b2a88bbf-ffdc-40da-878f-eeb6c5fda37b

[e-younan]

Hi @dinataranis, thanks for opening this issue! Have you looked into the absoluteHeader prop? I think that there may be an example of the absolute header usage in the example application - feel free to play around with it.

[dinataranis]

Hi @e-younan, Thank you for your response I have tried to use an absoluteHeader for ScrollViewWithHeaders component but HeaderComponent still takes a place on the screen while it is not visible I created an example project https://github.com/taranisag/react-native-header-example with absoluteHeader prop that didn't work for me Do I missing something?

[vyobukhov]

absolute header + Adding

contentContainerStyle={{
          paddingTop: 0,
        }}

to the list component (flashlist in my case) solves the issue for me

[e-younan]

@dinataranis I have taken a look at this again and noticed the issue. In order to make the absoluteHeader prop work, I applied a padding to the top of the container of the scroll container.

It works for @vyobukhov since I was applying this adjustment before taking the user's contentContainerStyle props for the FlashList:

contentContainerStyle={{
    ...scrollViewAdjustments.contentContainerStyle,
    ...contentContainerStyle,
}}

But for the ScrollViewWIthHeaders container, this isn't the case - it applies it after:

contentContainerStyle={[
    contentContainerStyle,
    absoluteHeader ? { paddingTop: absoluteHeaderHeight } : undefined,
]}

I will fix this inconsistency and release a new version.

[e-younan]

@dinataranis Please install the latest release version 0.11.1 in your example project and use the following code for your App function:

export default function App() {
  return (
    <SafeAreaProvider>
      <View style={{ height: 100, backgroundColor: "green" }}>
        <Text style={{ paddingTop: 50 }}>MAIN HADER</Text>
      </View>
      <ScrollViewWithHeaders
        ignoreLeftSafeArea
        ignoreRightSafeArea
        absoluteHeader
        contentContainerStyle={{ paddingTop: 0 }}
        HeaderComponent={HeaderComponent}
        LargeHeaderComponent={LargeHeaderComponent}
      >
        <View>
          {Array.from(Array(200).keys()).map((index) => (
            <Text key={index}>Some body text...</Text>
          ))}
        </View>
      </ScrollViewWithHeaders>
    </SafeAreaProvider>
  );
}

This should work.