I have designed a lower tab but when viewed in preview on my phone the icon and text miss-align. How can I stop this?
You could group the icons together but I would recommend using the tab bar component and you will not have this issue.