fix: add headerHeight to keyboardVerticalOffset

As discussed in https://github.com/kirillzyusko/react-native-keyboard-controller/issues/584\#issuecomment-2349386313

Author: hyochan

app/index.tsx

@@ -3,11 +3,12 @@ import {EditText, IconButton, Typography, useDooboo} from 'dooboo-ui';
 import {Stack} from 'expo-router';
 
 import {t} from '../src/STRINGS';
-import {View} from 'react-native';
-import {useState} from 'react';
+import {Pressable, View} from 'react-native';
+import {ElementRef, useRef, useState} from 'react';
 import {KeyboardAvoidingView} from 'react-native-keyboard-controller';
+import {useHeaderHeight} from '@react-navigation/elements';
 
-const Container = styled.View`
+const Container = styled.SafeAreaView`
   background-color: ${({theme}) => theme.bg.basic};
 
   flex: 1;
@@ -19,6 +20,8 @@ const Container = styled.View`
 export default function Index(): JSX.Element {
   const {theme} = useDooboo();
   const [text, setText] = useState('');
+  const ref = useRef<ElementRef<typeof EditText>>(null);
+  const headerHeight = useHeaderHeight();
 
   return (
     <Container>
@@ -28,24 +31,33 @@ export default function Index(): JSX.Element {
         }}
       />
       <KeyboardAvoidingView
+        keyboardVerticalOffset={headerHeight}
         style={css`
           flex: 1;
           width: 100%;
         `}
         behavior="padding"
       >
-        <View
+        <Pressable
+          onPress={() => ref?.current?.blur()}
           style={css`
             flex: 1;
-            background-color: ${theme.bg.paper};
-
-            justify-content: center;
-            align-items: center;
           `}
         >
-          <Typography.Heading5>Hi there!</Typography.Heading5>
-        </View>
+          <View
+            style={css`
+              flex: 1;
+              background-color: ${theme.bg.paper};
+
+              justify-content: center;
+              align-items: center;
+            `}
+          >
+            <Typography.Heading5>Hi there!</Typography.Heading5>
+          </View>
+        </Pressable>
         <EditText
+          ref={ref}
           onChangeText={setText}
           value={text}
           decoration="boxed"

bun.lockb

@@ -22,9 +22,10 @@
     "@expo/react-native-action-sheet": "^4.1.0",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/datetimepicker": "8.0.1",
+    "@react-navigation/elements": "^1.3.31",
     "@shopify/flash-list": "1.6.4",
     "date-fns": "^3.6.0",
-    "dooboo-ui": "^0.2.34",
+    "dooboo-ui": "^0.2.36",
     "expo": "~51.0.31",
     "expo-constants": "~16.0.2",
     "expo-device": "~6.0.2",