Ensure all pages have padding around the status bar

src/components/navigation/navigators.js

@@ -1,26 +1,34 @@
 import React from "react";
-import { View } from "react-native";
+import { SafeAreaView } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
 
+import { StatusBarSpace } from "src/interface/rendering";
 import BackBarJsx from "./back-bar";
 import TrayJsx from "src/components/navigation/tray";
 
 export const ScreenWithTrayJsx = (props) => {
     return (
-        <View style = { { flex: 1 } }>
+        <SafeAreaView style = { { flex: 1 } }>
             <ScrollView>
+                <StatusBarSpace
+                    color = {
+                        props.statusBarColor
+                            ? props.statusBarColor
+                            : "transparent"
+                    }/>
                 { props.children }
             </ScrollView>
             <TrayJsx
                 active = { props.active }
                 navigation = { props.navigation } />
-        </View>
+        </SafeAreaView>
     );
 };
 
 export const ScreenWithBackBarJsx = (props) => {
     return (
-        <View style = { { flex: 1 } }>
+        <SafeAreaView style = { { flex: 1 } }>
+            <StatusBarSpace color = "white"/>
             <BackBarJsx navigation = { props.navigation }>
                 { props.renderBackBar != undefined
                     ? props.renderBackBar()
@@ -30,13 +38,14 @@ export const ScreenWithBackBarJsx = (props) => {
             <ScrollView>
                 { props.children }
             </ScrollView>
-        </View>
+        </SafeAreaView>
     );
 };
 
 export const ScreenWithFullNavigationJsx = (props) => {
     return (
-        <View style = { { flex: 1 } }>
+        <SafeAreaView style = { { flex: 1 } }>
+            <StatusBarSpace color = "white"/>
             <BackBarJsx navigation = { props.navigation }>
                 { props.renderBackBar != undefined
                     ? props.renderBackBar()
@@ -49,6 +58,6 @@ export const ScreenWithFullNavigationJsx = (props) => {
             <TrayJsx
                 active = { props.active }
                 navigation = { props.navigation } />
-        </View>
+        </SafeAreaView>
     );
 };

src/components/pages/direct/conversation.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import {
     View,
+    SafeAreaView,
     Text,
     Image,
     TextInput,
@@ -24,8 +25,7 @@ import {
 const { SlideInMenu } = renderers;
 
 import BackBarJsx from "src/components/navigation/back-bar";
-
+import { timeToAge, StatusBarSpace } from "src/interface/rendering";
-import { timeToAge } from "src/interface/rendering";
 
 const TEST_IMAGE_1 = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg";
 const TEST_IMAGE_2 = "https://natureproducts.net/Forest_Products/Cutflowers/Musella_cut.jpg";
@@ -47,7 +47,8 @@ const TEST_MESSAGES = [
 ];
 
 const ConversationContainerJsx = (props) => (
-    <View style = { { flex: 1 } }>
+    <SafeAreaView style = { { flex: 1 } }>
+        <StatusBarSpace color = "white"/>
         <BackBarJsx navigation = { props.navigation }>
             { props.renderBackBar() }
         </BackBarJsx>
@@ -76,7 +77,7 @@ const ConversationContainerJsx = (props) => (
                     color = "black" />
             </TouchableOpacity>
         </View>
-    </View>
+    </SafeAreaView>
 );
 
 const ComposeJsx = ({ navigation }) => {

src/components/pages/discover.js

@@ -59,7 +59,8 @@ const DiscoverJsx = (props) => {
     return (
         <ScreenWithTrayJsx
                 active = "Discover"
-                navigation = { props.navigation }>
+                navigation = { props.navigation }
+                statusBarColor = "white">
             <TouchableWithoutFeedback
                 onPress = { () => props.navigation.navigate("Search") }>
                 <View style = { styles.form }>

src/components/pages/discover/search.js

@@ -1,6 +1,9 @@
 import React, { useState } from "react";
 import { View, TextInput, Text, Dimensions, Image } from "react-native";
+
+import { StatusBarSpace } from "src/interface/rendering";
 import { ScreenWithTrayJsx } from "src/components/navigation/navigators";
+
 import { TouchableWithoutFeedback } from "react-native-gesture-handler";
 
 const TEST_IMAGE = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg";
@@ -51,6 +54,7 @@ const SearchJsx = ({navigation}) => {
         <ScreenWithTrayJsx
               active = "Discover"
               navigation = { navigation }>
+            <StatusBarSpace />
             <View style = { styles.form }>
                 <TextInput
                     style = { styles.searchBar }

src/components/pages/view-comments.js

@@ -1,9 +1,16 @@
 import React, { useEffect, useState } from "react";
-import { Dimensions, View, Image, TextInput, Text } from "react-native";
+import {
+    Dimensions,
+    View,
+    SafeAreaView,
+    Image,
+    TextInput,
+    Text
+} from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 
-import { timeToAge } from "src/interface/rendering";
+import { timeToAge, StatusBarSpace } from "src/interface/rendering";
 import { activeOrNot } from "src/interface/interactions";
 
 import TimelineViewJsx from "src/components/posts/timeline-view";
@@ -225,7 +232,8 @@ const ViewCommentsJsx = (props) => {
     return (
         <>
             { state.loaded ?
-                <View style = { { flex: 1 } }>
+                <SafeAreaView style = { { flex: 1 } }>
+                    <StatusBarSpace color = "white"/>
                     <BackBarJsx navigation = { props.navigation }/>
                     <ScrollView>
                         { state.loaded
@@ -280,7 +288,7 @@ const ViewCommentsJsx = (props) => {
                             </TouchableWithoutFeedback>
                         </View>
                     </View>
-                </View>
+                </SafeAreaView>
                 : <></>
             }
         </>

src/interface/rendering.js

@@ -1,3 +1,15 @@
+import React from "react";
+import { View, StatusBar } from "react-native";
+
+export function StatusBarSpace(props) {
+    return <View style = {
+        {
+            height: StatusBar.currentHeight,
+            backgroundColor: props.color ? props.color : "transparent",
+        }
+    }></View>;
+};
+
 export function withoutHTML(string) {
     return string.replace(/<[^>]*>/ig, "");
 }