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

Icon + Text is not centered #39

Closed Ehesp closed 7 years ago

Ehesp commented 7 years ago

Hey,

We've got shifting set to false on our app, and it's quite obvious the icons don't seem to be aligned in the center above the text:

image

Putting this into PS:

image

I'll double check it's not something to do with the view being out of place around the icon (directly from react-native-material-icons) though.

timomeh commented 7 years ago

Thanks for reporting! That's strange, the Icon should be centered thanks to flex and alignItems: 'center'. https://github.com/timomeh/react-native-material-bottom-navigation/blob/e5560123c345901b4a4d397837ff4846075a2ffe/lib/Tab.js#L266-L271

Is your Icon set to size={24}? (See Specs of Tab – the Icons are required to have a width and height of 24, so the animations are precise to Google's Specs.)

If you've checked that and compared with the examples (for react-navigation or as standalone) and it's still misaligned, please respond and I'll fire up an emulator and try to check it.

Ehesp commented 7 years ago

Ah you're correct, they were set to 20. I guess it makes sense how you've implemented it though! Sorry for bothering haha.

timomeh commented 7 years ago

Aaah, what a relief! 😅