0

I'm new to react-native and am trying to render a bottom nav bar. I've noticed that the components don't render how I want them to on Android because of the way that the native navigation buttons (back, home, menu(?)) are 'on screen' for some devices. This obviously isn't the case with iPhones. Therefore my Navbar looks quite bad on Android, half of it is cut off basically and 'hidden' behind the buttons (see screenshots).

I know that there are ways to use SafeAreaView, however doing this simply rendered my nav bar to the top of the screen... I wasn't able to get it back down. I tried padding, but this is the also reflected onto the iOS version... so no go.

Just wondering if there is something I can do about it? I've looked online but my searches have come up black.

I made a screenshot of how it should look and how it actually looks. You'll notice that the text on the nav bar is almost 'off screen'.

how it should look

how it actually looks

In case someone knows how to fix this, please let me know :)

Thanks for your help!

Gero
  • 31
  • 5
  • welcome to SO. To allow others to investigate your issue you should post the relevant code you used. The TabBar looks correct to me in "how it actually looks", just that the typical icons are missing. "how it should look" seems strange as the tab bar is far too high. – Christian Feb 23 '21 at 22:51
  • @Christian, thanks for the info. I think it just threw me off that it looked so different on iOS. I've now rendered icons as well and it does indeed look quite normal. Also, for future questions I will also post the relevant code :) – Gero Feb 23 '21 at 23:41

1 Answers1

0

The easiest way to do this is with React Navigation Tabs. Are you using this? See the below documentation for their out-of-the-box bottom tab bar. You can fully customize the tab bar with the "tabBar" prop to create your own navbar. See also the nested navigators section for a discussion of how to do routing if there are any screens that aren't encapsulated by the navbar.

https://reactnavigation.org/docs/bottom-tab-navigator/

https://reactnavigation.org/docs/nesting-navigators

Andrapyre
  • 66
  • 6