Swipable content in header

[CharlieMaslechko]

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]

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]

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

[iliapnmrv]

@matheusmatos Hey! I've read readme section and I have exactly your suggestion but it does not work for me. Can you please help?

renderHeader={
  return(
    <View pointerEvents="box-none">
        <View>
           <Gallery imageFormat="square" images={images} />
        </View>
        ...
    </View>
  )
}

<View>
  <FlatList
    pointerEvents="auto"
    data={data}
    horizontal
    pagingEnabled
     renderItem={() => {
        return (
          <>
            <Image
              style
              source
            />
          </>
        );
    }}
 />
</View>

it only scrolls horizontally in flatlist