search

react-navigation / react-navigation

Routing and navigation for your React Native apps
https://reactnavigation.org
23.47k stars 5.02k forks source link

Add support for Bottom Navigation #375

Closed nonameolsson closed 7 years ago

nonameolsson commented 7 years ago

Hi!

I have played around with the TabNavigator. I tried to move the Android tabs to the bottom and add some styling to them. But I wasn't able to achieve anything good.

Since the bottom navigation is a component recently added to the Material Guidelines, it would be nice to have it in React Navigation. https://material.io/guidelines/components/bottom-navigation.html

My idea is that the bottom navigation on iOS should have this equivalent in Android. And that https://material.io/guidelines/components/tabs.html should be another component.

What do you think?

satya164 commented 7 years ago

Yeah, I think an android styled bottom nav is definitely needed. But probably it should be a third party component to keep the maintenance cost lower.

Also to achieve it with existing tab navigator, we'll need the ability to replace the pager component, since we don't want the sliding animation or swipes provided by ViewPagerAndroid or ScrollView.

ghost commented 7 years ago

@nonameolsson, I'm using react-native-material-ui to bring in a lot of material-ui components. You could specify the BottomNavigation component as your tabBarComponent

https://github.com/xotahal/react-native-material-ui/blob/master/docs/BottomNavigation.md

Keep in mind, you'll end up making your iOS app look more MaterialDesign, than native, which is okay with my project.

satya164 commented 7 years ago

@RobertSheaO Unfotunately that's not all you need. You need to wrap it in .a component so that it provides an API compatible with https://github.com/react-native-community/react-native-tab-view#tabbar-

Also the page switching animation is different for android's bottom tab bar, so you need to replace the pager to achieve the effect, which is not possible right now.

timomeh commented 7 years ago

I'm working on a bridge to Android's native BottomNavigation over here: https://github.com/timomeh/react-native-android-bottom-navigation

With that, it should be no big deal to wrap it in a Component compatible with the API of react-navigation's TabView.TabBarBottom.

Feel free to take a look at it and maybe to contribute.

nonameolsson commented 7 years ago

@timomeh Thanks, I will look at that one. But I still think it would be very useful to have a bottom navigation bar based on the Android Guidelines, since it's a part of the official navigation pattern on Android.

timomeh commented 7 years ago

@nonameolsson Although I used the official Android Design Library from Google, I switched to a all-JS solution. https://github.com/timomeh/react-navigation-bottom-navigation

Give me a few days, then I'll release a beta compatible with react-navigation. I need this for a project, too. 😀

satya164 commented 7 years ago

@timomeh want to add it to https://github.com/react-native-paper/react-native-paper ?

timomeh commented 7 years ago

@satya164 Thanks, I'd like to keep it a standalone component for anybody (like me) who just want's that component, without anything else. But feel free to use it as a dependency in react-native-paper.

I moved it to https://github.com/timomeh/react-native-material-bottom-navigation and already published it, since it's in a great working state. I'll tackle the Wrapper for react-navigation this weekend.

timomeh commented 7 years ago

The Bottom Navigation for react-navigation is finally there and ready to use.

If you want to use the Bottom Navigation, take a look at timomeh/react-native-material-bottom-navigation. Everything is explained over there. If you have troubles or issues with it, feel free to open an issue over there.

I think this issue can be closed now? 🙂

satya164 commented 7 years ago

@timomeh great work!

I'm wondering why you didn't use the same prop names for things like label color though.

nonameolsson commented 7 years ago

@timomeh Wow, looks really good. I will try to implement it tomorrow!

timomeh commented 7 years ago

@satya164 I struggled with this a bit. Mainly it comes down to this:

If eventually the TabBarComponent will be more separated and will just receive the plain tabBarOptions for each tab as props, I would be more than happy to use the configurations provided by react-navigation. 🙂

alvaromb commented 7 years ago

Thanks for your work @timomeh! It's great!

The only caveat I'm experiencing now is that I don't know why but the elevation prop is being ignored.

timomeh commented 7 years ago

@alvaromb You're right, there's something weird going on. Using style: { elevation: 8, borderTopWidth: 0 } works, but just style: { elevation: 8 } doesn't. I need to check that.

If you could please open an issue in my Repo, then we won't annoy people with notifications. :)

guerjon commented 7 years ago

If anybody is searching for this, react-navigation update to add the tabBarPossition attribute and use it on Android.

TabNavigator( { screenRoutes ... }, { tabBarPosition: 'bottom', tabBarOptions : { .... } }

martimarkov commented 7 years ago

@guerjon I'm trying to use this but the tab bar is still sitting on the top of it.

mschipperheyn commented 6 years ago

It would be nice to have a version that is in line with iOS design guidelines. The differences are small but will give a more native feel on iOS https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f

guerjon commented 6 years ago

@martimarkov so probably it's your style, could you share you are code?

MingweiSamuel commented 6 years ago

Would be nice to get a proper iOS solution https://developer.apple.com/ios/human-interface-guidelines/bars/tab-bars/

brentvatne commented 6 years ago

please go ahead and submit a PR to improve the default styling, thanks! we are working on material bottom navigation currently