Optionally disable touch gestures on the header

[henriqemalheiros]

First of all, thank you for this great project!

This may be a niche use case, but it is as follows:

• I want to use tabs inside a sheet;
• I want the tab navigation to be fixed, like a header;
• I want the tab navigation to overflow horizontally, with the user needing to scroll it to see all the tabs;
• If I put the tab navigation in the header prop, it will be hard for the user to interact with it since it supports touch gestures. If the user does not scroll the tab navigation perfectly horizontally, the sheet goes slightly up and down, which is annoying.

After many failed attempts to make it work without opening an issue, I've come to the conclusion that there is only two possible solutions:

• The enableTouchOnHeader prop, which optionally disables touch gestures on the header;
• The beforeContent prop, which inserts a div between [data-rsbs-header] and [data-rsbs-scroll].

The names are up for debate, of course. And if we add this for the header, I think the footer should have it too (enableTouchOnFooter/afterContent).

Here's an example of what I want to achieve:

I'll be happy to open a pull request once this is discussed.

[kpnaveen]

Hi @henriqemalheiros I also came across this case and not able to do this. Do you mind share how did you make this header disabled

[henriqemalheiros]

Hi @henriqemalheiros I also came across this case and not able to do this. Do you mind share how did you make this header disabled

Hey, @kpnaveen! I've ended up implementing our sheets from scratch. There was a lot of other UI/UX requirements and I couldn't find anything that met them.