feat: Ability to add a SubtitleHeaderComponent to the scrollables that doesn't impact when the HeaderComponent is shown

[aharwood9]

Feature Request

Hi there 👋 Thank you so much for the great library - really appreciate the work.

Ability to add a SubtitleHeaderComponent that renders underneath the LargeHeaderComponent that doesn't impact when the HeaderComponent is shown.

Use Case

While you can add a subtitle or similar to the LargeHeaderComponent, if it is several lines of text, it can look odd as the HeaderComponent doesn't render until all the subtitle text has scrolled by. Thus, it looks more natural to show the HeaderComponent as per the current expectation but the SubtitleHeaderComponent outside the onLayout changes.

The above impacts primarily the FlatList, FlashList and SectionList components containers as ideally, you would want the subtitle within the ListHeaderComponent, however, I think for consistency of types, it would be very easy to add to ScrollView as well.

Proposed Solution

• Update SharedScrollContainerProps to include SubtitleHeaderComponent as an optional React.ReactNode
• Update FlatList, FlashList, SectionList and ScrollView to add a fragment around LargeHeaderComponent to add {SubtitleHeaderComponent && SubtitleHeaderComponent} within the same fragment.

Additional Information

I am happy to raise a PR for you to review this if you open to this addition 👍

[e-younan]

Hey there, thanks for opening this feature request! For the initial problem, you can use the headerFadeInThreshold prop to render the header a bit earlier.

In order to do this correctly, you will have to do some math:

1. Compute the height of the large header
2. Find the y position of the component you want to begin fading the header in at
3. Interpolate the y position and height of the larger header to produce a value between 0 and 1
4. Use this as the headerFadeInThreshold prop

This is somewhat complex, I know, but I added the prop for these kinds of use cases. I will think more about this feature request in the meantime.

[e-younan]

HI @aharwood9, I have reviewed this change and would love for you to help with this. The proposed solution is fine, I just want to clean up the API if we move forward with this. SubtitleHeaderComponent seems a bit ambiguous as a name - it's not clear that this is under the LargeHeaderComponent. Do you have any suggestions for this?

[aharwood9]

That's great news! I would love to get rid of my patch. I am happy to raise a PR for you to review. In regards to a name, (I am never good at this) but some ideas -

• SubtitleHeaderComponent - current
• SubtitleLargeHeaderComponent
• LargeHeaderSubtitleComponent?
• LowerLargeHeaderComponent
• LargeHeaderDetailComponent

I don't love these - do you have any preferences?

[e-younan]

Eh, something like LargeHeaderSubtitleComponent or LargeHeaderFooterComponent would be better. Also, an update to the docs will be necessary for understanding the overall visualization of how the library works (some chart with each header type stacked on each other). If you would like to get a PR up, feel free to.

Keep in mind that we should probably supply some properties to this new component:

{LargeHeaderSubtitleComponent && LargeHeaderSubtitleComponent({ showNavBar, scrollY })}

[aharwood9]

Okay! Will have a crack tomorrow. I am not super familiar with docusaurus so will get a PR up for the code changes and then have a go at updates to the docs.