satya164
Merged in a post:
Top bar shows and hides on scroll
zendevil
There's a top bar on my screen. I want to create an effect on the top bar such that it disappears when user scrolls up and appears when user scrolls down something like this:
Is it already possible to do? If not, can this feature be added, or at least someone tell me how to achieve this with the latest version of the library?
Sean O'Leary
https://github.com/benevbright/react-navigation-collapsible
Chris Drackett
The reason I open this as a request is that this is basically the default behavior in iOS now. If RN is trying to provide a experience that feels native and not old, it seems like this might want to be part of the library. Regardless, with some work this is possible to get working independently.
Clayton Ray
I think it's cool but don't think this belongs in react-navigation's domain.
Emmett Harper
What I'm seeing as more and more of a iOS trend is the the header collapsing when scrolling down and then animating back out when the user scrolls up a little bit with enough momentum. (See Twitter mobile app for reference).
This type of behavior could be doable within the library itself now that v3 exposes a FlatList/ScrollList that has a connected reference to the tabs and other parts of the library.
If the developer used the RN FlatList, then RN should be able to capture anything a PanHandler could and expose some nice animating behavior.
This kind of stuff requires a lot of thought but I like to see the discussion started early because I think this UX interaction might be similar to pressing the status bar or tab to scroll to the top of the list in terms of popularity and expected behavior
Sébastien Lorber
This can be done in userland (see https://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e)
Not sure this can easily be included into ReactNavigation, because this would mean that the header should be inside an animated scrollview. Note sure we want to wrap navigation screens with a scroll view by default. Also this means that the header would appear above the scrollview with a zindex, because when the header disappear you'd likely want to see the scrollable content going up to the top of the screen.
That seems hard to me to design properly an API to support this feature. What about creating this in userland as an external reusable package. It could be used outside of React-navigation actually, but provide an easy integration with react-navigation.
Philipp Kursawe
Sébastien Lorber: How would user land code transition the header out of the view and change its opacity? Using the style prop?