CODEWITHSUNDEEP
javascriptandroidreact-nativereact-navigation
John Marrs
John Marrs

Reputation: 13

react-native bottomTabNavigator is partially covered by Android system navigation bar

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.

Upvotes: 1

Views: 1232

Answers (1)

swoodruff
swoodruff

Reputation: 66

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.

Upvotes: 1

Related Questions