bring back animation for TabNavigator
closed
satya164
Merged in a post:
createBottomTabNavigator support swipeEnable
Jack
createBottomTabNavigator not support swipe, MaterialTopTabBar support but the tabStyle higher when setting the "bottom", and the TAB format is not as good as createBottomTabNavigator(width&height、text、etc.), we hope createBottomTabNavigator to support 'swipeEnabled' in next version. Thanks
Tony Mack
+1 for bringing this back
Brent Vatne
closed
the bottom tab navigator api will not be extended to add animations. one of the core principles of react-navigation is that it is fully customizable, so use this to your advantage and build a tab navigator with exactly the animations that you like! here's a simple example of how you can do that in just ~120 LOC, half of which is copy+pasted from createBottomTabNavigator: https://github.com/brentvatne/animated-bottom-navigation-example
J
Jake
Brent Vatne: And which doesn't work anymore. Provide a working example please.
Brent Vatne
Jake: sure, like i said below we do not intend on supporting this pattern because it's not common and we can't possible maintain navigators to support every conceivable navigation pattern. if you want this, you can take what i provided above and make it more complete. or you can go use another library, that'd be fine too.
Felipe Raul
Just +1 person that is deeply sad to see this removed. I know devs do their best to select what to work on, but there are so many people requesting this, cant you reconsider bringing it back in the official lib?
H
Hugo Esteves
Horizontal(Tab) navigation without swipe makes me remind android 3.2; (And it is honestly very unpleasant)
We could try to make it on our own but the info available about the props needed/api is not enough. This will eventually kill "createBottomTabNavigator" usage on react-navigation for a better external solution ( not sure if that's the point though).
H
Hugo Esteves
I offer my time to help on that :D
U
Ulysse Tunde
This was a very important feature for the Tab Navigator. Having it removed, makes the navigation experience dreadful. Would be a plus to have it back.
Brent Vatne
not planning on it, but you're welcome to implement it on your own, it's very easy to create custom navigators and you can just fork the bottom tab navigator and add this
Nikolai Hegelstad
Brent Vatne: Is it possible to have React-Navigation team curate and recommend within the docs a set of good forks/custom navigators? It would require to keep a list of pros, cons and which versions have been confirmed working together.
Jesper Madsen
Brent Vatne: Why is the team not planning on it? Isn't animations a core feature of navigation libraries, in order to mimic native navigation?
Honestly, not providing animations or, at the very least, a simple handle+guide for developers is a huge blow to react-navigation IMO, and to react-native by extension. If react-navigation is to continue to be the go-to navigation library, developers need to be able to expect that navigation widget such as tab navigation will support the same look and feel they do on native - otherwise, all react-navigation based apps will quickly end up in the dreaded uncanny valley of cross platform apps that React Native was supposed to pull them out of. I deeply urge you to reconsider this decision. It makes no sense that all developers that depend on this library is to spend time implementing the exact same animation by themselves
Jesper Madsen
Brent Vatne - friendly ping :-) Additionally, Is it the intention of the react-navigation team in general to remove animations from the base lib and leave it up to community implementations going forward? Or is it perhaps instead the plan to have the new
react-native-screens
handle animations instead?Brent Vatne
Jesper Madsen: so you want to be able to animate between tabs when you switch and swipe between them? and you want the tab bar to be on the bottom? if so, can you point me to the native component on ios/android that does this?
Jesper Madsen
Brent Vatne: Well shit, you got me there! I was sure that there were animations between tabs, but after doing the research, it seems that this was only based on the fact that some major apps does it, Facebook (iOS) being one. However, looking at each OS's guidelines, iOS have no mention of animations (https://developer.apple.com/design/human-interface-guidelines/ios/bars/tab-bars/), and Material Design actually explicitly says "Don't" to 'lateral' animations (left-right) between tabs (https://material.io/design/components/bottom-navigation.html#behavior --> "Transitions"). Looking more closely, many major apps implement the material design guideline, where the screens on each tab fades in, and others just switch instantly like this library does now.
Based on that, I guess one could defend the omission of a navigation handle in the tab navigator, but I would also argue that it would still be cool to be able to adhere to material design using an "animated:true" flag. However, if this is not part of the library, one could resort to making a fadein animation in the root container of each tab on
ComponentDidMount
. I apologize :-) As long as it's the goal of React Navigation to resemble the native navigation components and transition patterns as closely as possible by default, I'll keep my darn mouth shut ;-)
Brent Vatne
Jesper Madsen: animations are fundamentally not what the bottom tab navigator is for, it is intended to more closely replicate the built-in native ones. but it's very easy to implement animated behavior on your own, we just don't have an interest in maintaining it, see https://github.com/react-navigation/react-navigation-material-bottom-tabs/blob/master/src/navigators/createMaterialBottomTabNavigator.js for an example of how easy it is to build your own tab navigator.
Jesper Madsen
Brent Vatne: thank you for the clarification and the example, both are much appreciated 😄
Brent Vatne
Jesper Madsen: no problem! I appreciate you looking into the issue and giving feedback!
Brian Cooley-Gilliom
Brent Vatne: I'm following the examples for the custom tab navigators you have posted and everything seems to be working great. I did notice, though, that createBottomTabNavigator uses at least one thing (
ResourceSavingScene
) that doesn't get exported by react-native-tabs
. How crucial is it that I use this in my custom nav? I guess I'd ether have to import it with the full path or copy it into my app src?J
Jake
Brent Vatne: If it's so easy, then do it.
Brent Vatne
Jake: thanks jake for your valuable input
Brent Vatne
Brian Cooley-Gilliom: ResourceSavingScene takes care of hiding unfocused tabs (https://github.com/react-navigation/native/blob/d0b24924b2e075fed3bd6586339d34fdd4c2b78e/src/ResourceSavingSceneView.js) - you can import this from the
@react-navigation/native
package: https://github.com/react-navigation/native/blob/d0b24924b2e075fed3bd6586339d34fdd4c2b78e/src/index.js#L20-L22Brian Cooley-Gilliom
Brent Vatne: Man, everyone's a critic, huh?
L
Lee
this link is not working anymore. Could you provide us with new link for reference? I would really like to implement transition animation(on tab press or navigation.navigate()) on tab navigation.
If you could update the docs on how to customize the tab navigator to implement animations, All of us with same concerns regarding animations would be happy about it
Tarek Moubarak
Important feature, please bring it back!
Abhinav Sundaresan
This was such an awesome feature...please bring it back