Merge pull request #65 from ansari-project/fix/keyboard-handling

Fix keyboard handling using KeyboardController

Author: waleedkadous

app.json

@@ -3,7 +3,7 @@
     "name": "Ansari Chat",
     "owner": "ansari-project",
     "slug": "ansari-chat",
-    "version": "1.2.0",
+    "version": "1.3.0",
     "scheme": "ansarichat",
     "userInterfaceStyle": "automatic",
     "orientation": "portrait",

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "ansari-chat-app",
   "main": "expo-router/entry",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": true,
   "dependencies": {
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",

package.json

@@ -5,12 +5,12 @@ import { RootState } from '@/store'
 import { createGeneralThemedStyles } from '@/utils'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { NativeSyntheticEvent, Platform, Pressable, TextInput, View, Text, Keyboard } from 'react-native'
+import { NativeSyntheticEvent, Platform, Pressable, TextInput, View, Text } from 'react-native'
+import { KeyboardAwareScrollView, KeyboardController } from 'react-native-keyboard-controller'
 import { useSelector } from 'react-redux'
 import { useRouter } from 'expo-router'
 import * as Yup from 'yup'
 import StyledText from '@/components/StyledText'
-import { KeyboardAwareScrollView } from 'react-native-keyboard-controller'
 
 // TypeScript interface for the initial state
 interface EmailState {
@@ -40,7 +40,7 @@ const ForgetPasswordScreen: React.FC = () => {
     try {
       await validateEmail(emailState.email)
       if (emailState.email.trim().length !== 0 && Object.keys(errors).length === 0) {
-        Keyboard.dismiss()
+        KeyboardController.dismiss()
         await UserService.requestPasswordReset(emailState.email)
         setEmailState({ ...emailState, submitted: true })
       }

src/app/(public)/forgot-password.tsx

@@ -7,12 +7,12 @@ import { useLoginSchema } from '@/validation'
 import { Formik, FormikHelpers } from 'formik'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Keyboard, NativeSyntheticEvent, Platform, Pressable, StyleSheet, Text, TextInput, View } from 'react-native'
+import { NativeSyntheticEvent, Platform, Pressable, StyleSheet, Text, TextInput, View } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 import { useRouter, useLocalSearchParams } from 'expo-router'
 import * as Yup from 'yup'
 import StyledText from '@/components/StyledText'
-import { KeyboardAwareScrollView } from 'react-native-keyboard-controller'
+import { KeyboardAwareScrollView, KeyboardController } from 'react-native-keyboard-controller'
 
 const LoginScreen: React.FC = () => {
   const router = useRouter()
@@ -38,7 +38,7 @@ const LoginScreen: React.FC = () => {
   })
 
   const handleSubmit = (values: LoginRequest, formikHelpers: FormikHelpers<LoginRequest>) => {
-    Keyboard.dismiss()
+    KeyboardController.dismiss()
     formikHelpers.setSubmitting(true)
     setErrorMessage(null)
     dispatch(login(values))

src/app/(public)/login.tsx

@@ -7,13 +7,13 @@ import { useRegisterSchema } from '@/validation'
 import { Formik, FormikHelpers } from 'formik'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Keyboard, NativeSyntheticEvent, Platform, Pressable, Text, TextInput, View } from 'react-native'
+import { NativeSyntheticEvent, Platform, Pressable, Text, TextInput, View } from 'react-native'
 import Checkbox from 'expo-checkbox'
 import { useDispatch, useSelector } from 'react-redux'
 import { useRouter } from 'expo-router'
 import * as Yup from 'yup'
 import StyledText from '@/components/StyledText'
-import { KeyboardAwareScrollView } from 'react-native-keyboard-controller'
+import { KeyboardAwareScrollView, KeyboardController } from 'react-native-keyboard-controller'
 
 interface RegisterFormValues {
   email: string
@@ -47,7 +47,7 @@ const RegisterScreen: React.FC = () => {
   }
 
   const handleSubmit = (values: RegisterFormValues, formikHelpers: FormikHelpers<RegisterFormValues>) => {
-    Keyboard.dismiss()
+    KeyboardController.dismiss()
     formikHelpers.setSubmitting(true)
     setErrorMessage(null)
     const registerRequest: RegisterRequest = {

src/app/(public)/register.tsx

@@ -7,11 +7,11 @@ import { createGeneralThemedStyles } from '@/utils'
 import { useRegisterSchema } from '@/validation'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Keyboard, Platform, Pressable, StyleSheet, Text, TextInput, View } from 'react-native'
+import { Platform, Pressable, StyleSheet, Text, TextInput, View } from 'react-native'
 import { useSelector } from 'react-redux'
 import { useRouter } from 'expo-router'
 import * as Yup from 'yup'
-import { KeyboardAwareScrollView } from 'react-native-keyboard-controller'
+import { KeyboardAwareScrollView, KeyboardController } from 'react-native-keyboard-controller'
 import StyledText from '@/components/StyledText'
 
 // TypeScript interface for the component's state
@@ -46,7 +46,7 @@ const ResetPasswordScreen: React.FC = () => {
 
   // Submits the form after validation
   const handleSubmit = async () => {
-    Keyboard.dismiss()
+    KeyboardController.dismiss()
     setIsSubmitting(true)
     try {
       await validatePassword()

src/app/(public)/reset-password.tsx

@@ -2,36 +2,48 @@ import React from 'react'
 import { useKeyboardHandler } from 'react-native-keyboard-controller'
 import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
 
-const PADDING_BOTTOM = 0
+const LOG_KEYBOARD_EVENTS = false
 
 const useGradualAnimation = () => {
-  const height = useSharedValue(PADDING_BOTTOM)
+  const height = useSharedValue(0)
+  const progress = useSharedValue(0)
 
   useKeyboardHandler(
     {
+      onStart: (event) => {
+        'worklet'
+        if (LOG_KEYBOARD_EVENTS) console.log('[KeyboardHandler] onStart', event)
+      },
       onMove: (event) => {
         'worklet'
-        height.value = Math.max(event.height, PADDING_BOTTOM)
+        if (LOG_KEYBOARD_EVENTS) console.log('[KeyboardHandler] onMove', event)
+        height.value = event.height
+        progress.value = event.progress
+      },
+      onEnd: (event) => {
+        'worklet'
+        if (LOG_KEYBOARD_EVENTS) console.log('[KeyboardHandler] onEnd', event)
+        progress.value = event.progress
+        height.value = event.height
       },
     },
     [],
   )
 
-  return { height }
+  return { height, progress }
 }
 
 const KeyboardHandler: React.FC = () => {
-  const { height } = useGradualAnimation()
+  const { height, progress } = useGradualAnimation()
 
   const animatedStyle = useAnimatedStyle(() => {
     return {
-      height: Math.abs(height.value),
-      marginBottom: height.value > 0 ? 0 : PADDING_BOTTOM,
-      width: 'auto',
+      // Use height as-is, but fallback to 0 if progress indicates keyboard is hidden
+      height: progress.value === 0 ? 0 : height.value,
     }
   })
 
-  return <Animated.View style={animatedStyle}></Animated.View>
+  return <Animated.View style={animatedStyle} />
 }
 
 export default KeyboardHandler

src/components/KeyboardHandler.tsx

@@ -4,14 +4,14 @@ import { AppDispatch, RootState, tootleInputFullMode } from '@/store'
 import React, { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
-  Keyboard,
   KeyboardEvent,
   NativeSyntheticEvent,
   Pressable,
   TextInput,
   TextInputContentSizeChangeEventData,
   View,
 } from 'react-native'
+import { KeyboardController } from 'react-native-keyboard-controller'
 import { useDispatch, useSelector } from 'react-redux'
 
 interface ChatInputProps {
@@ -57,7 +57,7 @@ const ChatInput: React.FC<ChatInputProps> = ({ value, onSendPress, onInputChange
   }
 
   const submit = () => {
-    Keyboard.dismiss()
+    KeyboardController.dismiss()
     dispatch(tootleInputFullMode(false))
     onSendPress()
   }