React-native-paper: Collapsible Appbar.Header

[tonyxiao]

Can Appbar.Header be customized to work with react-navigation in such a way that it's collapsible upon scroll? Are there example implementations in react-native-paper that I might have missed?

PS: I found a related library here but not sure if it plays well with react-native-paper yet. https://github.com/benevbright/react-navigation-collapsible

[ferrannp]

You can do it as you can pass style to Appbar and connect it to your scroll view. However, if you want to do it with react-navigation (and their static header), then that would require some code there I believe (just as https://reactnavigation.org/blog/2018/11/17/react-navigation-3.0.html#new-features)

react-navigation now exports ScrollView, FlatList, and SectionList that will scroll to top when tapping on the active tab as you would expect from native tab bars.

So for this with react-navigation, we would probably need to use scroll views from them.

cc @brentvatne

[brentvatne]

I would use headerMode: 'none' on a stack and then just use the Appbar from paper directly on your screens

[brentvatne]

would be neat to see a stack navigator that uses paper's appbar and also supports this behavior :)