Draw content under navbar

android/app/src/main/java/com/rajarsheechatterjee/LNReader/MainActivity.java

@@ -3,8 +3,11 @@ import android.content.res.Configuration;
 import android.content.Intent;
 
 import android.os.Bundle;
+import android.graphics.Color;
 import android.view.WindowManager;
 import android.os.Build;
+import android.view.View;
+import android.view.Window;
 
 import com.facebook.react.ReactActivity;
 import com.facebook.react.ReactActivityDelegate;
@@ -35,6 +38,12 @@ public class MainActivity extends ReactActivity {
         layoutParams.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES;
         getWindow().setAttributes(layoutParams);
     }
+
+    Window w = getWindow();
+    w.setStatusBarColor(Color.TRANSPARENT);
+    w.setNavigationBarColor(Color.TRANSPARENT);
+    w.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
+
     super.onCreate(savedInstanceState);
     SplashScreen.show(this, SplashScreenImageResizeMode.COVER, ReactRootView.class, false);
 

src/navigators/BottomNavigator.js

@@ -2,6 +2,7 @@ import React from "react";
 
 import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
 import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import Library from "../screens/Library/Library";
 import Updates from "../screens/Updates/Updates";
@@ -15,6 +16,7 @@ const Tab = createMaterialBottomTabNavigator();
 
 const BottomNavigator = () => {
     const theme = useTheme();
+    const insets = useSafeAreaInsets();
 
     const {
         showHistoryTab = true,
@@ -24,7 +26,10 @@ const BottomNavigator = () => {
 
     return (
         <Tab.Navigator
-            barStyle={{ backgroundColor: theme.colorPrimary }}
+            barStyle={{
+                backgroundColor: theme.colorPrimary,
+                paddingBottom: insets.bottom,
+            }}
             activeColor={theme.colorAccent}
             shifting={!showLabelsInNav}
         >

src/theme/utils/setBarColor.js

@@ -1,5 +1,4 @@
 import { StatusBar } from "react-native";
-import changeNavigationBarColor from "react-native-navigation-bar-color";
 
 /**
  * Sets status and navigation bar color.
@@ -7,8 +6,4 @@ import changeNavigationBarColor from "react-native-navigation-bar-color";
  * @param theme
  */
 
-export const setBarColor = (theme) => {
-    changeNavigationBarColor(theme.colorPrimary);
-
-    StatusBar.setBarStyle(theme.statusBar);
-};
+export const setBarColor = (theme) => StatusBar.setBarStyle(theme.statusBar);