PedroBern / react-native-collapsible-tab-view

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

Swipable content in header #425

Open CharlieMaslechko opened 2 weeks ago

CharlieMaslechko commented 2 weeks ago

Let's say I have a horizontal Flatlist of data I want to render in the header, below this I have N tabs of vertical flatlist data. Diving into the library it looks like the header is absolutely positioned on top of the pager view which is why the pointer events are important to handle. Therefor if you have a swipable item in the header it will take the touch events. I was thinking of forking and implementing react native gesture handler to be able to have more granular control of touch events which would allow for more complex gestures in the header. Does anyone know if there is a way to have horizontal flatlist in the header? Love the library help appreciated!

+-------------------------------+
|          iPhone Screen        |
+-------------------------------+
|            Header             |   <-- Header Component
|-------------------------------|
|<-- Horizontal Scrollable -->  |   <-- Horizontal FlatList
|  [ Image ]  [ Image ]  [ ... ]| 
|-------------------------------|
| [Tab 1]      |     Tab 2      |   <-- Tabs (Tab 1 is focused)
|---------------|----------------|
|  Item 1       |  Item 1        |   <-- Vertical FlatLists (Tab 1 content is shown)
|  Item 2       |  Item 2        |
|  Item 3       |  Item 3        |
|  ...          |  ...           |
+-------------------------------+
matheusmatos commented 1 week ago

It's possible using pointerEvents='box-none'on the Header component, and pointerEvents=auto on the horizontal FlatList. The problem is that you will not be able to scroll the vertical FlatList touching the horizontal FlatList (which makes sense, imho). Take a look at the Scroll On Header section in the readme.

useIyy commented 4 days ago

Has the problem been solved? I have the same need.