Integration with react navigation

[andreialecu]

Thank you for creating this!

I saw that you mentioned in satya164/react-native-tab-view#1096 (comment) that there would be integration with react-navigation.

I'm really interested in this, and would love to help by testing it. Alternatively, if you can share the private implementation you mentioned, I might be able to implement and test that as well, before a polished public release.

[PedroBern]

Hi @andreialecu, I don't plan to add the integration by myself, because for now it solves my use case. But if you or someone is willing to open a PR, I would accept it :)

Implementation

The implementation is super simple, you can do it in 3 steps:

1. MaterialTopTabsCollapsibleTabView

Same as the original, replacing the TabView here by the CollapsibleTabView.

2. MaterialTopTabsCollapsibleNavigator

Just like in step 1, same as the original, replacing the MaterialTopTabView here by the component of step 1.

3. Changes in the CollapsibleTabView

There is this one caveat, currently, the CollapsibleTabView uses the route.key as identifier, and to make this work with the react-navigation we need to use route.name. So you need to make changes here, and remember to use the name in the hooks:

--- activeRouteKey: routes[index].key,
+++ activeRouteKey: routes[index].name,

Investigation

I'm not using it and it may have bugs, especially for the snap effect. Please if you can fork, experiment and maybe find ways to improve, would be really nice :)

[andreialecu]

Thanks for the pointers! I opened a PR at #10 which implements this, and it seems to work perfectly in conjunction with #9

[PedroBern]

merged #10 👍

[PedroBern]

released in v1.2.0