search

timomeh / react-native-material-bottom-navigation

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

Animations / highlights do not change until after swiping (with react-nagivation) #85

Closed dajaffe closed 6 years ago

dajaffe commented 6 years ago

What kind of Issue is this?

How are you using the Bottom Navigation?

Expected behavior

Animations and active colors to change while swiping.

Actual behavior

Animations and active colors do not change until after the swiping animation is complete.

Additional description and resources

I seem to be experiencing what was reported a long time ago here: Animation after TabPress seems to have too much delay #7. However, pressing a tab results in the animation and active colors to update immediately. Swiping, however, has the delay noted there - nothing changes until after the swipe is complete.

Are there any configuration options or something I've overlooked to get the navigation to update upon swiping, rather than nothing changing until after swiping?

Environment

timomeh commented 6 years ago

Technically, the Bottom Navigation gets the active Tab from react-navigation, and it seems like react-navigation updates the active tab not before the swipe is complete. Have you swapped out the NavigationComponent with react-navigation's TabBarBottom and checked if it works like you expected? If their TabBarBottom works like you expected, then they implemented something which handles that, which I didn't implement.

dajaffe commented 6 years ago

I tested swapping in the TabBarTop and the animation was during the swipe as expected. I can try using their TabBarBottom later today.

dajaffe commented 6 years ago

Meh, tested real quick before I leave for work. Confirmed the animation is during swipe as well with the TabBarBottom

timomeh commented 6 years ago

Thank you very much for testing this out! If I understood you correctly, the TabBarBottom also is only active after the swipe is finished? In that case, this would be a feature request for react-navigation. Unfortunately I can't work around this. 😕

dajaffe commented 6 years ago

Oh no sorry - TabBarTopand TabBarBottom both show the animation during the swipe. They sort of fade-in / fade-out the color and movements as you swipe. NavigationComponent will show the color fadein/out and animation only after the swiping of screens is completed.

timomeh commented 6 years ago

Ah, okay, I see. The NavigationComponent (respectively the material-bottom-navigation as of v0.9) has no ability to fade-in/out, so I can't simply patch it.

The next version of the material-bottom-navigation won't include out-of-the-box support for react-navigation though, because react-navigation implemented its own Bottom Navigation. As of now I haven't decided if I want to continue support for react-navigation.

I'll keep this issue open until I know more.

timomeh commented 6 years ago

I'll put this on hold since v1.0.0 doesn't contain out-of-the-box support for React Navigation anymore. Read more about the details here.

timomeh commented 6 years ago

I'm going to close this issue since I deprecated/removed out-of-the-box support for React Navigation.