TODO: Đã fix xong để không bị lộ khoảng trắng của SafeAreaView

src/components/Header/Header.js

@@ -5,6 +5,7 @@ import {
   Text,
   TouchableOpacity,
   View,
+  StatusBar,
 } from 'react-native';
 import R from '../../assets/R';
 import {
@@ -13,14 +14,17 @@ import {
   WIDTH,
 } from '../../config/Functions';
 import {useNavigation} from '@react-navigation/native';
+
 const Header = props => {
   const {title, isBack, isSearch} = props;
-  const navigate = useNavigation();
+  const navigation = useNavigation();
   const IconBack = R.images.icBack;
   const IconSearch = R.images.icSearch;
+
   return (
-    <>
-    <SafeAreaView>
+    <SafeAreaView style={styles.safeArea}>
+      <StatusBar barStyle="light-content" backgroundColor={R.colors.blue500} />
+
       <View style={styles.headerContainer}>
         {isSearch && (
           <TouchableOpacity
@@ -29,6 +33,7 @@ const Header = props => {
             <IconSearch stroke={R.colors.white} strokeWidth={2} width={20} height={20} />
           </TouchableOpacity>
         )}
+
         <Text numberOfLines={1} style={styles.txtTitle}>
           {title}
         </Text>
@@ -36,21 +41,23 @@ const Header = props => {
         {isBack && (
           <TouchableOpacity
             style={styles.btnBack}
-          onPress={() => navigate.goBack()}>
+            onPress={() => navigation.goBack()}>
             <IconBack width={20} height={20} />
           </TouchableOpacity>
         )}
       </View>
     </SafeAreaView>
-    </>
   );
 };
 
 export default Header;
 
 const styles = StyleSheet.create({
+  safeArea: {
+    backgroundColor: R.colors.blue500, 
+  },
   headerContainer: {
-    height: HEIGHT(50),
+    height: HEIGHT(30),
     width: '100%',
     flexDirection: 'row',
     alignItems: 'center',
@@ -66,7 +73,6 @@ const styles = StyleSheet.create({
     shadowRadius: 5,
     elevation: 5,
   },
-
   txtTitle: {
     flex: 1,
     fontSize: getFontSize(16),

src/screens/profile/view.js

@@ -344,9 +344,7 @@ export default ProfileView;
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: R.colors.white,
     paddingHorizontal: 15,
-    paddingTop: 15,
     paddingBottom: 9,
   },
   body_header: {

src/screens/roll_call/detail/view.js

@@ -54,7 +54,7 @@ const DetailRollCallView = (props) => {
   };
 
   return (
-    <SafeAreaView style={styles.container}>
+    <View style={styles.container}>
        <Header
         isBack
         title={'Thông tin điểm danh lớp ADCV'}
@@ -113,7 +113,7 @@ const DetailRollCallView = (props) => {
 
       </ScrollView>
     </View>
-    </SafeAreaView>
+    </View>
   );
 };