Merge pull request #43 from simonyiszk/keyboard-avoiding-input

fix: keyboard avoiding input field
simonyiszk · Mar 6, 2024 · 65a0e2c · 65a0e2c
2 parents 0d2ea25 + 91cabdf
commit 65a0e2c
Showing 1 changed file with 36 additions and 30 deletions.
diff --git a/components/qna/input.tsx b/components/qna/input.tsx
@@ -1,8 +1,8 @@
 import { useRef, useState } from 'react';
-import { TextInput, View } from 'react-native';
+import { KeyboardAvoidingView, TextInput, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { extendedColors } from '../../theme/extendedColors';
-import { useKeyboardOffset } from '../../utils/keyboard.utils';
 import { StyledButton } from '../common/styled-button';
 
 interface InputProps {
@@ -15,43 +15,49 @@ const MIN_CHARACTERS_TO_SEND = 5;
 
 export function Input({ placeholder, onSubmit, disabled = false }: InputProps) {
   const ref = useRef<TextInput>(null);
+  const insets = useSafeAreaInsets();
   const [value, setValue] = useState('');
-  const keyboardOffset = useKeyboardOffset();
+
   const onSend = () => {
     if (value.length < MIN_CHARACTERS_TO_SEND) return;
     ref.current?.clear();
     onSubmit(value);
     setValue('');
   };
+
   const isDisabled = value.length < MIN_CHARACTERS_TO_SEND || disabled;
+
   return (
-    <View
-      style={{
-        bottom: Math.max(130, keyboardOffset + 16),
-      }}
-      className='absolute left-0 right-0 mx-5 flex-row space-x-3 rounded-xl bg-white dark:bg-slate-800 px-3 py-2 shadow-md max-h-60'
+    <KeyboardAvoidingView
+      keyboardVerticalOffset={0}
+      behavior='position'
+      style={{ paddingBottom: insets.bottom + 100 }}
+      className='justify-end absolute w-full h-full'
+      enabled
     >
-      <TextInput
-        ref={ref}
-        returnKeyType='send'
-        placeholderTextColor={extendedColors.slate['500'] + '80'}
-        autoCapitalize='sentences'
-        textAlignVertical='center'
-        blurOnSubmit
-        multiline
-        className='flex-1 text-slate-900 dark:text-white font-raleway-regular self-center'
-        placeholder={placeholder}
-        value={value}
-        onChange={(e) => setValue(e.nativeEvent.text)}
-        onSubmitEditing={onSend}
-        editable={!disabled}
-      />
-      <StyledButton
-        disabled={isDisabled}
-        className='rounded-full p-1 h-8 w-8 self-end'
-        leftIcon='arrow-up'
-        onPress={onSend}
-      />
-    </View>
+      <View className='mx-5 flex-row space-x-3 rounded-xl bg-white dark:bg-slate-800 px-3 py-2 shadow-md max-h-60'>
+        <TextInput
+          ref={ref}
+          returnKeyType='send'
+          placeholderTextColor={extendedColors.slate['500'] + '80'}
+          autoCapitalize='sentences'
+          textAlignVertical='center'
+          blurOnSubmit
+          multiline
+          className='flex-1 text-slate-900 dark:text-white font-raleway-regular self-center'
+          placeholder={placeholder}
+          value={value}
+          onChange={(e) => setValue(e.nativeEvent.text)}
+          onSubmitEditing={onSend}
+          editable={!disabled}
+        />
+        <StyledButton
+          disabled={isDisabled}
+          className='rounded-full p-1 h-8 w-8 self-end'
+          leftIcon='arrow-up'
+          onPress={onSend}
+        />
+      </View>
+    </KeyboardAvoidingView>
   );
 }