React-native-router-flux: Tabbed Scenes to hide/show tabbar on listview scroll down/up?

[MovingGifts]

react-native-router-flux v3.30.3
react-native v0.27.0

page 2 below has a listview, by default and on scroll up of the list view the tabbar should be shown (works by default), but on scroll down of the listview, the tabbar should hide, giving more real estate for users to see content, and then the tabbar should reappear again if they scroll up. How can this be implemented? I know the tabs on the main scene below automatically does all the magic, of creating the tabs and corresponding nested scenes and linking them.

<Scene key="tabBar" component={SideBar} open={false} initial>
    <Scene key="main" tabs tabBarStyle={styles.tabBarStyle} tabBarSelectedItemStyle={styles.tabBarSelectedItemStyle}>
        <Scene key="page1" component={Page1} title="Page 1" icon={TabIcon} hideNavBar />
        <Scene key="page2" component={Page2} title="Page 2" icon={TabIcon} hideNavBar initial />
    </Scene>
</Scene>

Guys, please some help on how to go about doing this. I love the ease of routing with this plugin via actions but the support is so hard to get, and this is a very common use case.

[tsyirvo]

I had the exact same problem and to fix it, I had to downgrade to an older version of RNRF.
If you use v3.26.0, you shouldn't have any problems.

[aksonov]

@joenoon could you look at it?

[joenoon]

@MovingGifts @aksonov animating the tabbar in/out linked to the scroll of a scene's scrollview would be nice to have, but AFAIK not something this library ever offered (I only know since v3, and never used v2 - maybe it used to be implemented there?).

This would be a neat one for someone to try and add if they are up for it. I can imagine it might get complicated. I would try but I'm heads down working on my app's release.

[cridenour]

Yea, I'm confused by this as well. @tsyirvo can you post a video of this working out of the box in 3.26? Or was it a custom component that only worked in 3.26?

[susan-github]

I have a similar confusion as well, so how do you resolve this?

[joenoon]

There is no resolution, but a PR to add this functionality would be interesting.

[MovingGifts]

The tabbar is a great part of RNRF and it comes out of the box with clear examples of integration. But the issue of hiding/showing it requires someone with more knowledge on how the inner workings of RNRF/tabbar work together, would have the best chance of making this happen.

Just sharing my thoughts here, but I am thinking of ways that would make sense to integrate...

Something like <ListView tabBarHideOnScroll={300} could be a prop that can be added to any ListView/ScrollView When you scroll 300 up, it would hide the tabbar, scroll 300 down, it would show the tabbar.

Any thoughts? Would like to keep the discussion open.

[susan-github]

I think you can use Actions.refresh({ hideTabBar: true/false }) to resolve you problems, when scroll up of the list view, set the value as false. Setting true when scroll down.
Maybe you need to do is to find a more appropriate method to get the rolling direction of the scroll bar.

[zibs]

@susan-github nice catch -- this is working for me. thanks :D

[MovingGifts]

@susan-github Thank you for your solution :) It works, but would be nice to have an animation to slideup/slidedown the tabbar as opposed to a sudden show/hide. This would be the final improvement and I hope someone shares how to do it :)

[nikolaigeorgie]

You can easily do it through redux, just call the action creator on scroll and create a styling reducer.