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

  android, javascript, react-native, react-navigation

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.

Source: Ask Javascript Questions