React-native-router-flux: Tabs flag for swiping not working

[SourceCipher]

Version

Tell us which versions you are using:

• react-native-router-flux 4.0.0-beta.40
• react-native 0.55.4

Expected behaviour

When the flag swipeEnabled is set to true, user should be able to swipe through the tabs

I have my tabs layout like this:

 <Tabs key="tabbar" tabs={true} swipeEnabled={true} showLabel={false} hideNavBar style={{ marginTop: -50 }} type={ActionConst.RESET}>
   <Scene key="contacts" component={Contacts} hideNavBar type={ActionConst.RESET}/>
   <Scene key="chats" component={Chats} hideNavBar initial={true} type={ActionConst.RESET}/>
   <Scene key="profile" component={Profile} hideNavBar type={ActionConst.RESET}/>
 </Tabs>

The same goes for not be able to hide the tab Bar Component which is at the bottom by default.

Actual behaviour

Swiping is not available. Only works switching via bottom nav

[SourceCipher]

Ok I just fixed by doing this "cheat". To make tabs to swipe, make sure you have set tabBarPosition='top'.

To disable the tabBarComponent you have to return null as a component. To do so just do tabBarComponent={() => null}

By adding these 2 to a Tabs component it will make your tabs swiping without even setting swipeEnabled={true}

[aksonov]

It seems to be removed from React Navigation 2.x. Should we return it back? ;)
https://github.com/react-navigation/react-navigation/issues/4146

[SourceCipher]

@aksonov I have been trying to make my app with this navigation to work perfectly but its struggling to do the job and its a shame as its a very good library, easy to use as well.

But after the latest update a lot of features not working anymore. I implemented my custom header in navBar I think which works fine, but checking the current screens in different components is a mess as it will never return the current screen but the one is being mounted from. And the back button on the android is not working as well.

[aksonov]

We are using our library on production, too pity that it doesn't work for you. You may create separate ticket for every issue you have with reproducible fork of Example project. For Android issues please ask @daviscabral

[aksonov]

Btw, Actions.currentScene really could be inaccurate now (because RNRF no longer maintains own navigation state), I will try to fix it now.

[SourceCipher]

@aksonov Thanks for your help! Because I am using a custom header, all the logic goes there as well and without keeping a track in the header what screen is mounted is pretty hard to handle all the logic.

[aksonov]

@SourceCipher Could you create new issue for this problem? It seems hard to fix, onNavigationStateChange is called _AFTER_ react components are mounted.

[daviscabral]

I am also strugling with the onNavigateStateChange life cycle. Any chance for us to implement a side life cycle instead of route state? So people can subscribe to it instead.

[aksonov]

Could you clarify?

On 10 Aug 2018, at 17:11, Davis Z. Cabral [e-mail] wrote:

I am also strugling with the onNavigateStateChange life cycle. Any chance for us to implement a side life cycle instead of route state? So people can subscribe to it instead.

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub, or mute the thread.

[daviscabral]

Of course. I meant about adding something like a onNavigateStateWillChange on our side - to allow some kind of preparation for the next component.

[aksonov]

Any idea how? RNRF doesn’t manage state anymore (maybe 5.0 release will do, but it is a lot of work).

10 авг. 2018 г., в 17:48, Davis Z. Cabral [e-mail] написал(а):

Of course. I meant about adding something like a onNavigateStateWillChange on our side - to allow some kind of preparation for the next component.

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub https://github.com/aksonov/react-native-router-flux/issues/3163#issuecomment-412124267, or mute the thread https://github.com/notifications/unsubscribe-auth/ABQpcQkormZrBzFCNqdLq3aPMnR2tIqkks5uPas_gaJpZM4V0t53.

[daviscabral]

I was actually thinking in something unconnected to state - to really move away from this idea a bit.

Have you take a look at NavigationEvents? https://reactnavigation.org/docs/en/navigation-events.html#docsNav

Maybe allow users to connect whatever they want (with the new context API - I am noticing that it might be possible to postpone use of redux or mobx a bit in some cases).

[aksonov]

Users can use NavigationEvents freely already.

[daviscabral]

Yeah - that's true. I am overcomplicating with this idea - just shooting to see if we could end with something around it - but you are correct - let's keep things simple. ;-)

[SourceCipher]

@aksonov I implemented the current screen logic and all works fine.. The problem is still the long delay between the card press and the screen mount. It takes a while for the screen to appear for some reason

[daviscabral]

@sourcecipher could you provide an example where I am able to see it?

It seems that the lifecycle of the components now are all mounted at once right after loading the app.

[SourceCipher]

@daviscabral Which should make screens switching super fast, but thats not the case. I have a custom header component and there is a profile icon. when you press it it simply calls this onPress={() => Actions.profile()}. Now once I press it, its not switched instantly the same way it would do If I press on the tabs

[daviscabral]

Can you try last code from master? There was some updates related to reset and other stuff that might help on that.

[SourceCipher]

@daviscabral you mean v4.0.0?

[daviscabral]

No - master as in master branch:

yarn add aksonov/react-native-router-flux

[aksonov]

legacy attribute must be used to make old behavior. However I don't see tab bar, maybe @daviscabral could help

[daviscabral]

It was not intended :(

[aksonov]

@daviscabral Could you try to fix legacy tabbar before new release?

[daviscabral]

Sure - also fixing #3258 before it.

[daviscabral]

@aksonov fixed on #3265.

[fcpauldiaz]

When I enable, swipe, the tab bar goes to top in Android, even with the setting tabBarPosition: 'bottom', how do I fix this?

[rajkishoreandia]

Can anybody help me how to refresh or reload the back stack scenes in react-native-router-flux?
Thanks

[wguillen3]

<Router> <Tabs key="root" tabs={true} legacy={true} swipeEnabled={true} tabBarPosition={'bottom'}> <Scene hideNavBar key="login" component={Login} title="Login"/> <Scene hideNavBar key="register" component={Register} title="Register"/> <Scene hideNavBar key="home" component={Home}/> </Tabs> </Router>

legacy={true}
this works for me

[zomars]

Some additional info, I can confirm this is working as described. But if you use a custom tabBarComponent and try to use Action.jump(key) in it, it won't trigger the sliding animation.

EDIT:

Solved by using props.jumpTo(key) instead of Action.jump(key).

EDIT 2:

It's not working in android. The state of the scene and the state of the tabBarComponent gets desynchronized somehow.