Fix bottom navigation being cut off

App.js

@@ -1,9 +1,11 @@
 import React from 'react';
 
+import { Platform, YellowBox } from 'react-native';
 import {
   createSwitchNavigator,
   createAppContainer,
-  createStackNavigator
+  createStackNavigator,
+  SafeAreaView
 } from 'react-navigation';
 import { useScreens } from 'react-native-screens';
 import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
@@ -26,6 +28,10 @@ import { colors, fonts } from './src/styles';
 
 const { store, persistor } = configureStore();
 
+if (Platform.OS === 'android') {
+  SafeAreaView.setStatusBarHeight(0);
+}
+
 // Use native screens for faster performance in Navigators
 useScreens();
 
@@ -136,7 +142,6 @@ registerRootComponent(Root);
 // To ignore warnings for WebSocket, which is completely fine to use.
 // See this page: https://stackoverflow.com/questions/53638667/unrecognized-websocket-connection-options-agent-permessagedeflate-pfx
 console.ignoredYellowBox = ['Remote debugger'];
-import { YellowBox } from 'react-native';
 YellowBox.ignoreWarnings([
   'Unrecognized WebSocket connection option(s) `agent`, `perMessageDeflate`, `pfx`, `key`, `passphrase`, `cert`, `ca`, `ciphers`, `rejectUnauthorized`. Did you mean to put these under `headers`?'
 ]);

app.json

@@ -29,7 +29,6 @@
       "package": "app.sardonyx",
       "permissions": []
     },
-    "androidStatusBarColor": "#ffffff",
     "androidStatusBar": {
       "backgroundColor": "#ffffff"
     }