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

Weird animation on iOS #75

Closed Avery246813579 closed 6 years ago

Avery246813579 commented 6 years ago

What kind of Issue is this?

How are you using the Bottom Navigation?

Expected behavior

No animation to happen when switching tabs.

Actual behavior

For some reason iOS gets an annoying animation when switching tabs. Only happens on iOS.

Additional description and resources

I was actually able to fix this deleting the following from BottomNavigation.js LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)

https://giphy.com/gifs/8TznS7ZN5Xek1trxO8

What did you do to find a solution?

I googled everywhere and didn't find anything.

timomeh commented 6 years ago

Thanks for reporting. LayoutAnimation is (was?) necessary to animate the shifting Bottom Navigation, when you have >= 4 Tabs. But I understand how this line could cause troubles, when two Layout changes happen at once.

Could you check if the shifting-Animation still works without this line?

Avery246813579 commented 6 years ago

Shifting-Animation does not work without the line. Maybe if we remove the line if shifting is off?

timomeh commented 6 years ago

I'm at the moment rewriting big parts of the BottomNavigation. I will take a look at the LayoutAnimations, and will check how to call the LayoutAnimation without animating the whole screen.

hammadzz commented 6 years ago

Is it safe to fork and remove that line for now? As I only have 4 tabs for now.

Or should I try an if on shift being true (I assume there is some variable). I will mess around with it this weekend and see.

timomeh commented 6 years ago

Yes, you can fork and remove that line for now. Implementing a fix would be a bit too much, since I'm currently doing the rewrite. v1.0.0 will fix that issue.

hammadzz commented 6 years ago

If anyone else needs the fork with the fix (only works for less than 4 tabs): https://github.com/hammadzz/react-native-material-bottom-navigation

ShayanJavadi commented 6 years ago

thought I was going crazy when my tabs were suddenly doing this after updating to react-navigation 1.4. Glad to know my eyes aren't playing tricks on me😅

hammadzz commented 6 years ago

If anyone else is experiencing other issues please do share. I noticed that sometimes by changing tabs quickly or doing something (a trigger unknown at this time) it start making a large space in my last tab act like a button that will switch to the first tab whenever it is touched. Really strange. I don't know exactly how this is happening or what is triggering it. I didn't find anything in my code so far to see that I have any logic to navigate to the 1st tab there.

timomeh commented 6 years ago

This issue will be fixed in the next version, see #76.

If you're interested in the solution: https://github.com/timomeh/react-native-material-bottom-navigation/blob/58b2b40d2b262a1118ad3a85a9f72c6c867a39ad/lib/ShiftingTab.js#L62-L70

Delaying the LayoutAnimation call to the next frame won't cause other Layout changes to animate. (Or rather it will reduce the probability of glitches)

This issue will be closed when #76 is merged.

timomeh commented 6 years ago

Closed with v1.0.0 ⚡️