timomeh / react-native-material-bottom-navigation

💅🔧👌 a beautiful, customizable and easy-to-use material design bottom navigation for react-native
MIT License
709 stars 127 forks source link

Ripple Color per tab #12

Closed timomeh closed 6 years ago

timomeh commented 7 years ago

It would be useful to override the Ripple Color for a specific tab. In a pre-alpha version, this was possible because the Ripple was part of the Tab; but I had to move the Ripple outside of the Tab (so overflow visible works on Android), thus I removed the per-tab Ripple Color Configuration.

A dark ripple is often better with lighter background colors.

wswoodruff commented 7 years ago

This issue can be closed, yeah?

timomeh commented 7 years ago

@wswoodruff Maybe a bit of confusion here because there are two Ripple Animations: the Background Transition backgroundColor and the Touch Feedback rippleColor. This issue is related to the Touch Feedback, which currently isn't configurable for each Tab.

I'd like to add this as a feature, but currently don't have the time to add features to this project.

wswoodruff commented 7 years ago

Ah, yeah I do notice a little funkiness there sometimes, it's not bad though, I'm using react-native-material-bottom-navigation in 2 recipes on my react-native boilerplate [strangeluv-native] :+1:

Have you noticed an issue where a FlatList or SectionList will render on top of the tabs if it has enough items to reach the bottom? I'm running into that on react-native 0.43.4 and react-navigation v1.0.0-beta.9

timomeh commented 7 years ago

@wswoodruff Sorry, I don't use SectionList / FlatList in conjunction with react-navigation. Normally this shouldn't happen. I hope react-navigation didn't change the way the tabBarComponent integrates into react-navigation.

wswoodruff commented 7 years ago

Whoo! Boy react-navigation v1.0.0-beta.9 is a dooozy. There's some breaking changes with config, specifically 'Navigation options are now flat', so header: { tintColor: 'green' } is now headerTintColor: 'green'. They just pretty much made a [bunch of breaking changes]

timomeh commented 7 years ago

@wswoodruff I'm meaning the way react-navigation internally renders the BottomNavigation, not only the configurations. The docs are already updated to reflect the new way react-navigation handles configurations. By going through the code of react-navigation and react-native-tab-view, the tab contents shouldn't overlay the navigation component, since the TabView has flex: 1 and the navigation component a distinct height.

If this only happens with the BottomNavigation from react-native-material-bottom-navigation and not with react-navigation's integrated Bottom Navigation, please open a new issue.

wswoodruff commented 7 years ago

They actually just fixed the issue with [this commit] (5 commits after the v1.0.0-beta.9 release). I checked out that commit and the issue was gone

timomeh commented 7 years ago

@wswoodruff Ah, thank you. :) Relieved to hear that.

timomeh commented 6 years ago

Closed with release of v1.0.0