fix(messages): improve layout

src/features/user/screens/MessageScreen.tsx

@@ -2,6 +2,7 @@ import { ScrollView } from 'react-native';
 
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
 
+import { BottomBarSpacer } from '../../../core/components/BottomBarSpacer';
 import { useGetMessages } from '../../../core/queries/studentHooks';
 import { MessageScreenContent } from '../components/MessageScreenContent';
 import { UserStackParamList } from '../components/UserNavigator';
@@ -16,6 +17,7 @@ export const MessageScreen = ({ route }: Props) => {
   return (
     <ScrollView contentInsetAdjustmentBehavior="automatic">
       {message && <MessageScreenContent message={message} />}
+      <BottomBarSpacer />
     </ScrollView>
   );
 };

src/features/user/screens/UnreadMessagesModal.tsx

@@ -19,6 +19,7 @@ import {
   useInvalidateMessages,
   useMarkMessageAsRead,
 } from '../../../core/queries/studentHooks';
+import { tabBarStyle } from '../../../utils/tab-bar';
 import { MessageScreenContent } from '../components/MessageScreenContent';
 
 type Props = NativeStackScreenProps<any, 'MessagesModal'>;
@@ -58,13 +59,19 @@ export const UnreadMessagesModal = ({ navigation }: Props) => {
         total: messagesToReadCount,
       }),
     });
+    navigation.getParent()!.setOptions({
+      tabBarStyle: { display: 'none' },
+    });
   }, [t, messagesToRead, messagesReadCount, navigation, messagesToReadCount]);
 
   useFocusEffect(
     useCallback(() => {
       // Invalidate message list when the modal is closing
       return () => {
         invalidateMessages.run();
+        navigation.getParent()!.setOptions({
+          tabBarStyle: tabBarStyle,
+        });
       };
     }, []),
   );