add save area view

package.json

@@ -32,7 +32,7 @@
     "react-native-gesture-handler": "~2.12.0",
     "react-native-get-random-values": "~1.9.0",
     "react-native-paper": "^5.11.1",
-    "react-native-safe-area-context": "4.6.3",
+    "react-native-safe-area-context": "^4.7.4",
     "react-native-screens": "~3.22.0",
     "styled-components": "^6.1.0",
     "uuid": "^9.0.1"

src/screen/editPlayer/component/header/styles.ts

@@ -1,14 +1,17 @@
 import styled from "styled-components/native";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { SafeAreaView } from "react-native-safe-area-context";
 
-export const Container = styled.View`
+export const Container = styled(SafeAreaView).attrs({
+  edges: { top: "additive" }
+})`
   width: 100%;
-  height: 100px;
   background-color: ${(props) => props.theme.colors.header};
   flex-direction: row;
-  align-items: flex-end;
+  align-items: center;
   justify-content: space-between;
   padding: 0 10px;
+  padding-top: 5px;
 `;
 export const Title = styled.Text`
   padding-left: 20px;

src/screen/home/components/header/styles.ts

@@ -1,12 +1,14 @@
 import styled from "styled-components/native";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { SafeAreaView } from "react-native-safe-area-context";
 
-export const Container = styled.View`
+export const Container = styled(SafeAreaView).attrs({
+  edges: { top: "additive" }
+})`
   width: 100%;
-  height: 100px;
   background-color: ${(props) => props.theme.colors.header};
   flex-direction: row;
-  align-items: flex-end;
+  align-items: center;
   justify-content: space-around;
 `;
 export const Title = styled.Text`

src/screen/newPlayer/component/header/index.tsx

@@ -8,23 +8,21 @@ export const Header = ({ savePlayer }: { savePlayer: () => Promise<void> }) => {
   const navigation = useNavigation();
 
   return (
-    <>
-      <Container>
-        <AlignWrapper>
-          <Icons
-            name="chevron-left"
-            testID="back-button"
-            size={34}
-            onPress={navigation.goBack}
-          />
-          <Title>Novo Munchkin</Title>
-        </AlignWrapper>
-        <Options>
-          <TouchableOpacity onPress={savePlayer} testID="savePlayerButton">
-            <Icons name="check" testID="save-button" size={30} />
-          </TouchableOpacity>
-        </Options>
-      </Container>
-    </>
+    <Container>
+      <AlignWrapper>
+        <Icons
+          name="chevron-left"
+          testID="back-button"
+          size={34}
+          onPress={navigation.goBack}
+        />
+        <Title>Novo Munchkin</Title>
+      </AlignWrapper>
+      <Options>
+        <TouchableOpacity onPress={savePlayer} testID="savePlayerButton">
+          <Icons name="check" testID="save-button" size={30} />
+        </TouchableOpacity>
+      </Options>
+    </Container>
   );
 };

src/screen/newPlayer/component/header/styles.ts

@@ -1,12 +1,15 @@
 import styled from "styled-components/native";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 
-export const Container = styled.View`
+import { SafeAreaView } from "react-native-safe-area-context";
+
+export const Container = styled(SafeAreaView).attrs({
+  edges: { top: "additive" }
+})`
   width: 100%;
-  height: 100px;
   background-color: ${(props) => props.theme.colors.header};
   flex-direction: row;
-  align-items: flex-end;
+  align-items: center;
   justify-content: space-between;
   padding: 0 10px;
 `;