0

I am learning react-native for a capstone project I have coming up. I am designing a rough navigation setup that I could hopefully use in my project. My current issue is that the bottonTabNavigator is partially covered by the Android system's navigation bar. I tried wrapping the entire app in a SafeAreaProvider and a SafeAreaView, but that did not seem to resolve the issue. Any suggestions?

If you would like to view my code, you can see it in the following repo. Link to all of the project code in a repo.

Versioning/Environment info: Node: v15.8.0 NPM: 7.5.3 Yarn: 1.22.5 (I usually use this) Expo: 4.1.6

Example of how the issue looks on my phone.

John Marrs
  • 3
  • 1

1 Answers1

1

Are you sure the bottom tab bar is being partially covered? By default, each tab has an icon on top and the text on button. Your image shows the tab's title on the bottom and space above the title for an icon to be rendered (check out react-native-vector-icons for some slick and easy to use icons). Are you implying that you would like to hide the Android Navigation Bar that is rendered below the bottom tab bar? If so, I think this may be relevant: Hide Android Navigation Bar in React Native.

swoodruff
  • 66
  • 4
  • Thank you for the questions, swoodruff. I do believe the bottom tab navigation is being partially covered by the system's navigation bar. The image I added in the post shows what I mean. My understanding is that this bottom tab navigation bar should be placed directly above the system's navigation bar. Currently, it looks like both bars are being placed in the same place, and since the bottom tab navigator menu is a little taller, you can still see a little of the text. I could look into hiding the navigation bar, but honestly don't want to use that as a solution till later on if needed. – John Marrs Feb 25 '21 at 14:09
  • I will also look into the icons, maybe the text just looks super low to me, I figured it was in the middle. Sorry if I misunderstood your initial comment. – John Marrs Feb 25 '21 at 14:20
  • [Here](https://github.com/oblador/react-native-vector-icons#tabbar) is a link directly to react-native-vector-icons docs where they create a bottom tab bar. – swoodruff Feb 25 '21 at 15:25
  • YOU WERE RIGHT! Once I added the icons it looked much better. I might still need to play with the padding and whatnot, but you solved it! Thanks! – John Marrs Feb 25 '21 at 15:43