fix: add useHeaderHeight to fix reply section on android - [CU-869b98b3n] (#140)

Co-authored-by: tonynagyy <nagytony2@gmail.com>
Co-authored-by: Saif <78622218+im-saif@users.noreply.github.com>
Co-authored-by: Helana Nady <Helana.saif04@eng-st.cu.edu.eg>
Co-authored-by: helana <helananady7@gmail.com>

Author: 4 people

src/__tests__/screens/tweets/TweetDetailScreen.test.tsx

@@ -20,6 +20,10 @@ jest.mock('@/stores/userStore', () => ({
   })),
 }));
 
+jest.mock('@react-navigation/elements', () => ({
+  useHeaderHeight: () => 0,
+}));
+
 const mockPush = jest.fn();
 const mockNavigate = jest.fn();
 

src/screens/tweets/TweetDetailScreen.tsx

@@ -10,6 +10,7 @@ import {
   View,
 } from 'react-native';
 
+import { useHeaderHeight } from '@react-navigation/elements';
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { FlashList, ListRenderItem } from '@shopify/flash-list';
@@ -51,6 +52,8 @@ export default function TweetDetailScreen() {
   const [error, setError] = useState<string | null>(null);
   const [replyError, setReplyError] = useState<string | null>(null);
 
+  const headerHeight = useHeaderHeight();
+
   const styles = useMemo(
     () => getTweetDetailScreenStyles(theme, replyInputFocused),
     [theme, replyInputFocused]
@@ -244,12 +247,11 @@ export default function TweetDetailScreen() {
       />
     </View>
   );
-
   return (
     <KeyboardAvoidingView
-      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
       style={styles.keyboardAvoid}
-      keyboardVerticalOffset={Platform.OS === 'ios' ? 90 : 0}
+      keyboardVerticalOffset={headerHeight}
     >
       <SafeAreaView edges={['right', 'left', 'bottom']} style={styles.container}>
         {error && mainTweet && (

src/screens/tweets/styles.ts

@@ -7,7 +7,6 @@ export const getTweetDetailScreenStyles = (theme: 'dark' | 'light', isFocused: b
     container: {
       flex: 1,
       backgroundColor: colors[theme].background,
-      marginBottom: -10,
     },
     keyboardAvoid: {
       flex: 1,