Navigation animation issue

[PeterKottas]

What kind of Issue is this?

• (x) Bug Report
• () Question / Problem
• () Discussion / Feature Request

How are you using the Bottom Navigation?

• () I use the Bottom Navigation together with react-navigation; the Issue is not appearing when I'm using react-navigation's TabBar instead.
• (x) I use the standalone version.

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

• React Native versions: 0.53.3
• react-native-material-bottom-navigation version: v0.8.2
• react-navigation version: {Insert here.}
• I tested this with: {Please choose one or more: Android on windows

[PeterKottas]

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]

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]

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:

react-native-material-bottom-navigation/lib/Tab.js

Lines 66 to 71 in bdde139

	// HACK: In shifting mode, after the first animation from active to
	// inactive, the icon jumps down before animating to the active state
	// again. In order to fix this, we need to store, if it already was
	// active. Then we can catch that case and manually move it up before
	// animating. This only happens in Android, not iOS.
	// Is this a bug in react-native or somewhere here?

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]

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]

Yup. Works fine without the hack. Classic legacy.

Thank you for pointing this out!

[PeterKottas]

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]

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]

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

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

[PeterKottas]

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]

Fix was shipped in v0.9.0 🚀

[PeterKottas]

Awesome, thanks for letting me know man!