search

codeherence / react-native-header

A high-performance, cross-platform animated header component for React Native applications.
MIT License
216 stars 15 forks source link

Does it support collapsible header for top tab? #35

Open saulamsal opened 3 weeks ago

saulamsal commented 3 weeks ago

Hey, Looks like exactly what I was looking for. Only issue for me seem to be whether this can support material-top-tab swipe? I tried the demo react-native-header/example/src/screens/usage /TwitterProfile.tsx but it has Buttons instead of tab. Are there any workarounds to make it work with swipe, and be able to collapse the header like that page? Basically, it's TwitterProfile.tsx but with an actual top tab. I played with it and replaced SectionListWithHeaders with ScrollViewWithHeaders but got nowhere.

Thanks!

e-younan commented 3 weeks ago

Thanks for opening this issue. I simplified the implementation slightly for the TwitterProfile example. I'm not exactly free at the moment to tackle this but these are the challenges:

  1. Synchronizing the "swipe gesture" on a sibling view with a ScrollView does not have much documentation right now on react-native-gesture-handler AFAIK (I know that gorhom's bottom sheet is able to achieve this with their BottomSheetView component but I haven't had time to dive deeper). When I say synchronizing, I mean applying a swipe on the native view that will scroll the ScrollView with the correct momentum and deceleration rate.
  2. Having multiple swipeable tabs can be done with react-native-pager-view, but will require a sizeable re-write of this library to do correctly
  3. "Collapsible" headers are not implemented yet, would require a sizeable amount of work to do

I won't be free for the next few weeks, but if you would like to contribute, feel free to open a PR!