Fixing top margin in "em desenvolvimento" screens in IOS

src/app/components/InDevelopment.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { StyleSheet, View, Text } from "react-native";
+import { StyleSheet, View, Text, SafeAreaView } from "react-native";
 
 import { FontAwesome5 } from "@expo/vector-icons";
 import { dimensions } from "../config/dimensions";
@@ -7,19 +7,25 @@ import colors from "../config/colors";
 
 function InDevelopment(props) {
   return (
+    <SafeAreaView style={styles.screen}>
       <View style={styles.container}>
         <FontAwesome5 name="laptop-code" size={60} color="black" />
         <Text style={{ fontSize: dimensions.text.header, fontWeight: "bold" }}>
           Em construção...
         </Text>
       </View>
+    </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    marginTop: 20,
+  },
   container: {
-    backgroundColor: colors.white,
     flex: 1,
+    backgroundColor: colors.white,
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "flex-start",

src/app/components/Screen.js

@@ -12,7 +12,7 @@ function Screen({ children, style }) {
 
 const styles = StyleSheet.create({
   screen: {
-    paddingTop: Constants.statusBarHeight,
+    // paddingTop: Constants.statusBarHeight,
     flex: 1,
   },
   view: {