search

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

Navigation animation issue #74

Closed PeterKottas closed 6 years ago

PeterKottas commented 6 years ago

What kind of Issue is this?

How are you using the Bottom Navigation?

Example description

I am using a standard setup (pretty much copy paste from docs) with 4 tabs.

Expected behavior

We start with first tab active. Label visible. Then we click second tab. Animation happens properly. We click first tab again and the animation should again play smoothly.

Actual behavior

Animation for the icon just jumps up instantly. There's basically no animation present. Basically second time you click a tab, the animation is ruined. It only works the first time.

Additional description and resources

{Write down everything else you want to say.}

What did you do to find a solution?

Checked you code and did a little research but I figured I'll be better off talking to you as you wrote it :)

Environment

PeterKottas commented 6 years ago

It feels like it has something to do with this https://github.com/timomeh/react-native-material-bottom-navigation/blob/master/lib/Tab.js#L227

PeterKottas commented 6 years ago

You apparently had you reasons to do this but it might have backfired slightly with the animation. Can you give me some more info so that I don't have to waste time figuring this thing out?

timomeh commented 6 years ago

I noticed that sometimes, too. I opened #4 for this and thought it may be because of the hack you mentioned, but the animation worked for me most of the time. Not all the time after the first press. The animation was buggy just a few times in my case, seemingly randomly, not everytime you press a tab.

If the animation is completely broken for you after the second time you press, then that's something new.

I left a comment about the Hack here:

https://github.com/timomeh/react-native-material-bottom-navigation/blob/bdde139d6eaa576dbdeebddc624a9c49d7ca1ad5/lib/Tab.js#L66-L71

Without this hack, the animation was completely wrong in Android. I don't know if that's still the case. react-native changed quite a lot since then – maybe the reason for my hack was a bug which is resolved by now.

I will test if it works without the hack right now.

PeterKottas commented 6 years ago

Cool have a look pls. I think you might be right. Maybe it will work now no probs. I've read the comment there. It sort of makes sense but now it's definitely broken after the first click every time. Hoping it will be as easy as just removing it. Keep me posted if you need any help with that ;)

timomeh commented 6 years ago

Yup. Works fine without the hack. Classic legacy.

Thank you for pointing this out!

PeterKottas commented 6 years ago

Awesome! Let me know when you release this and that other stuff I PRed pls, for now I am pointing straight to my repo for npm package

timomeh commented 6 years ago

I'll keep you informed. First I need to try it out myself to make sure everything works (would be bad if I don't do this as an Owner) and then I want to write a few tests, lint everything and add a CI-Pipeline. Together with the latest bugfixes/PRs, I finally want to release it as v1.0.0

timomeh commented 6 years ago

Ah, sorry, I thought this was a response to #73 :D

Nonetheless, I'll post if it's released here.

PeterKottas commented 6 years ago

Haha, np I totally understand. I am ok to point to git directly for now, just want to clean it up to stay up to date with your future releases. Thanks and thanks for the cool lib! take care

timomeh commented 6 years ago

Fix was shipped in v0.9.0 🚀

PeterKottas commented 6 years ago

Awesome, thanks for letting me know man!