PedroBern / react-native-collapsible-tab-view

A cross-platform Collapsible Tab View component for React Native
MIT License
829 stars 160 forks source link

Touchables and horizontal scroll at the header #253

Open tiagocorreiaalmeida opened 2 years ago

tiagocorreiaalmeida commented 2 years ago

Feature request

The idea is to allow the header to contain Touchable elements and horizontal views that don't affect the vertical scroll behavior of the tab view, this means we don't have to manually add pointerEvents to all views that are not target of the touch events, it also means we can have both the behaviors, having the element being target of a touch event as press and still be able to scroll vertically on the same element

Current behavior

At first sight it works pretty well, but if you play around with it some tabs will not sync properly, this is easier to reproduce on the examples that have snap or reveal header on scroll. With that said, I believe I need some help on this topic since I'm not yet familiar with all the project internals, either way I will keep playing around with it and see If I can figure it out myself.

Screenshots (if applicable)

https://github.com/PedroBern/react-native-collapsible-tab-view/compare/main...tiagocorreiaalmeida:feat/header-touchables-and-horizontal-scroll?expand=1

https://user-images.githubusercontent.com/17684951/165991489-8ba14919-6564-437d-bfab-6a2d4ebd186d.mp4

tiagocorreiaalmeida commented 2 years ago

After some updates I believe most of it works properly, there's so minor improvements that need to be made:

@andreialecu @PedroBern can you give a look into this one and see if the approach is correct and also see if I missed any of the project internals?

andreialecu commented 2 years ago

Would suggest opening a PR, a bit hard to go over it like this.