Update status bar behaviour on the Home screen when dialog shown

src/screens/history/index.tsx

@@ -1,10 +1,14 @@
-import React from 'react';
+import React, {useCallback} from 'react';
 import {FlatList, Pressable, StatusBar, Text, View} from 'react-native';
 import styles from './styles';
 import Colors from '../../../assets/styles/Colors';
 import passportAppointmentData from '../../data/History/PassportAppointmentData';
 import PassportAppointmentCard from '../../components/PassportAppointmentCard';
-import {useNavigation, useNavigationState} from '@react-navigation/native';
+import {
+  useFocusEffect,
+  useNavigation,
+  useNavigationState,
+} from '@react-navigation/native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {RootStackParamList} from '../../navigation/type';
 import {NativeStackNavigationProp} from '@react-navigation/native-stack';
@@ -25,12 +29,20 @@ function HistoryScreen() {
 
   const showNavBackAppBar = previousRoute === 'NavigationRoute';
 
+  useFocusEffect(
+    useCallback(() => {
+      StatusBar.setBackgroundColor(Colors.secondary30.color);
+      StatusBar.setBarStyle('light-content');
+
+      return () => {
+        StatusBar.setBackgroundColor(Colors.secondary30.color);
+        StatusBar.setBarStyle('light-content');
+      };
+    }, []),
+  );
+
   return (
     <View style={styles.container}>
-      <StatusBar
-        backgroundColor={Colors.secondary30.color}
-        barStyle="light-content"
-      />
       {showNavBackAppBar ? (
         <View style={styles.appBarNavBackContainer}>
           <Icon

src/screens/home/index.tsx

@@ -265,15 +265,16 @@ function HomeScreen({showDialog, visible}: HomeScreenProps) {
         visible ? '#295E70' : Colors.secondary30.color,
       );
       StatusBar.setBarStyle('light-content');
+
+      return () => {
+        StatusBar.setBackgroundColor(Colors.secondary30.color);
+        StatusBar.setBarStyle('light-content');
+      };
     }, [visible]),
   );
 
   return (
     <View style={styles.container}>
-      <StatusBar
-        backgroundColor={visible ? '#295E70' : Colors.secondary30.color}
-        barStyle={'light-content'}
-      />
       <View style={styles.appBarContainer}>
         <Text style={styles.appBarTitle}>Halo, X!</Text>
         <Icon

src/screens/profile/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useCallback} from 'react';
 import {Image, StatusBar, Text, View} from 'react-native';
 import styles from './styles';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -6,7 +6,7 @@ import Colors from '../../../assets/styles/Colors';
 import {Button} from 'react-native-paper';
 import {NativeStackNavigationProp} from '@react-navigation/native-stack';
 import {RootStackParamList} from '../../navigation/type';
-import {useNavigation} from '@react-navigation/native';
+import {useFocusEffect, useNavigation} from '@react-navigation/native';
 
 type ProfileScreenNavigationProp = NativeStackNavigationProp<
   RootStackParamList,
@@ -16,12 +16,20 @@ type ProfileScreenNavigationProp = NativeStackNavigationProp<
 function ProfileScreen() {
   const placeholderProfileImage = require('../../../assets/images/placeholderProfileImage.png');
   const navigation = useNavigation<ProfileScreenNavigationProp>();
+
+  useFocusEffect(
+    useCallback(() => {
+      StatusBar.setBackgroundColor(Colors.secondary30.color);
+      StatusBar.setBarStyle('light-content');
+
+      return () => {
+        StatusBar.setBackgroundColor(Colors.secondary30.color);
+        StatusBar.setBarStyle('light-content');
+      };
+    }, []),
+  );
   return (
     <View style={styles.container}>
-      <StatusBar
-        backgroundColor={Colors.secondary30.color}
-        barStyle="light-content"
-      />
       <View style={styles.appBarContainer}>
         <Text style={styles.appBarTitle}>Profil</Text>
       </View>