fix: Conversation keyboard filler

Author: thierryskoda

features/conversation/conversation-chat/conversation-keyboard-filler.tsx

@@ -1,7 +1,7 @@
 import { AnimatedVStack } from "@design-system/VStack"
 import { memo, useEffect, useRef } from "react"
 import { Keyboard, TextInput } from "react-native"
-import { useAnimatedStyle, useSharedValue } from "react-native-reanimated"
+import { useAnimatedStyle } from "react-native-reanimated"
 import { useSafeAreaInsets } from "react-native-safe-area-context"
 import { useConversationMessageContextMenuEmojiPickerStore } from "@/features/conversation/conversation-chat/conversation-chat-message/conversation-message-context-menu/conversation-message-context-menu-emoji-picker/conversation-message-context-menu-emoji-picker.store"
 import { useConversationMessageContextMenuStoreContext } from "@/features/conversation/conversation-chat/conversation-chat-message/conversation-message-context-menu/conversation-message-context-menu.store-context"
@@ -13,11 +13,10 @@ type IConversationKeyboardFillerProps = {}
 export const ConversationKeyboardFiller = memo(function ConversationKeyboardFiller(
   props: IConversationKeyboardFillerProps,
 ) {
-  const { height: keyboardHeightAV } = useAnimatedKeyboard()
+  const { keyboardHeightAV, progressAV, previousOpenKeyboardHeightAV } = useAnimatedKeyboard()
   const insets = useSafeAreaInsets()
-  const lastKeyboardHeight = useSharedValue(0)
+  const wasKeyboardOpenRef = useRef(false)
   const textInputRef = useRef<TextInput>(null)
-  const keyboardWasOpenRef = useRef(false)
   const isKeyboardShown = useKeyboardIsShown()
 
   const messageContextMenuData = useConversationMessageContextMenuStoreContext(
@@ -33,51 +32,42 @@ export const ConversationKeyboardFiller = memo(function ConversationKeyboardFill
       return
     }
 
-    if (!!messageContextMenuData) {
-      // If the keyboard is open, keep track of where it was because we need to open it again when the context menu is dismissed
+    if (messageContextMenuData) {
+      // Store keyboard state when emoji picker opens
       if (isKeyboardShown) {
         Keyboard.dismiss()
-        lastKeyboardHeight.value = keyboardHeightAV.value
-        keyboardWasOpenRef.current = true
+        wasKeyboardOpenRef.current = true
       }
     }
     // Context menu is hidden
     else {
-      // Reopen keyboard if it was open before context menu was shown
-      if (keyboardWasOpenRef.current) {
+      // Restore keyboard state when emoji picker closes
+      if (wasKeyboardOpenRef.current) {
         textInputRef.current?.focus()
-        keyboardWasOpenRef.current = false
+        wasKeyboardOpenRef.current = false
       }
     }
-  }, [
-    isEmojiPickerOpen,
-    messageContextMenuData,
-    isKeyboardShown,
-    keyboardHeightAV,
-    lastKeyboardHeight,
-  ])
+  }, [isEmojiPickerOpen, messageContextMenuData, isKeyboardShown])
 
-  // Reset the last height when context menu is dismissed
-  // And make sure to wait until the keyboard is open to that the height animates back to what it was before
-  useEffect(() => {
-    if (!messageContextMenuData && isKeyboardShown) {
-      lastKeyboardHeight.value = 0
+  const fillerAnimatedStyle = useAnimatedStyle(() => {
+    if (messageContextMenuData) {
+      return {
+        height: previousOpenKeyboardHeightAV.value - insets.bottom,
+      }
     }
-  }, [messageContextMenuData, isKeyboardShown, keyboardHeightAV, lastKeyboardHeight])
 
-  const fillerAnimatedStyle = useAnimatedStyle(() => {
+    const baseHeight = typeof keyboardHeightAV.value === "number" ? keyboardHeightAV.value : 0
+    const currentHeight = baseHeight * progressAV.value
+
     return {
-      height: Math.max(
-        Math.max(lastKeyboardHeight.value, keyboardHeightAV.value) - insets.bottom,
-        0,
-      ),
+      height: Math.max(currentHeight - insets.bottom, 0),
     }
   })
 
   return (
     <>
       <AnimatedVStack style={fillerAnimatedStyle} />
-      {/* Need for focus on keyboard */}
+      {/* Hidden TextInput for keyboard focus management */}
       <TextInput
         ref={textInputRef}
         style={{ height: 0, width: 0, opacity: 0, position: "absolute" }}

features/conversation/conversation-create/conversation-create-list-results.tsx

@@ -430,7 +430,7 @@ const Container = memo(function Container(props: { children: React.ReactNode })
   const { children } = props
 
   const { theme } = useAppTheme()
-  const { height: keyboardHeightAV } = useAnimatedKeyboard()
+  const { keyboardHeightAV } = useAnimatedKeyboard()
 
   const searchQuery = useConversationStoreContext((state) => state.searchTextValue)
 

features/groups/group-details/group-details.screen-header.tsx

@@ -35,6 +35,7 @@ export function useGroupDetailsScreenHeader() {
       title: "Info",
       leftIcon: "chevron.left",
       onLeftPress: handleBackPress,
+      backgroundColor: theme.colors.background.surface,
       // RightActionComponent: (
       //   <HStack>
       //     <HeaderAction icon="square.and.arrow.up" onPress={handleSharePress} />

features/groups/group-details/group-details.screen.tsx

@@ -75,6 +75,7 @@ export const GroupDetailsScreen = memo(function GroupDetailsScreen(
       <Pressable
         style={{
           alignItems: "center",
+          backgroundColor: theme.colors.background.surface,
         }}
         onPress={() => alert("Exit pressed")}
       >

features/onboarding/screens/onboarding-contact-card.screen.tsx

@@ -36,7 +36,7 @@ export function OnboardingContactCardScreen() {
 
   const { user: privyUser } = usePrivy()
 
-  const { progress: keyboardProgressAV } = useAnimatedKeyboard()
+  const { progressAV: keyboardProgressAV } = useAnimatedKeyboard()
 
   const handleRealContinue = useCallback(async () => {
     try {

hooks/use-animated-keyboard.ts

@@ -1,6 +1,26 @@
 import { useReanimatedKeyboardAnimation } from "react-native-keyboard-controller"
+import { useDerivedValue, useSharedValue } from "react-native-reanimated"
 
 export function useAnimatedKeyboard() {
-  const { height, progress } = useReanimatedKeyboardAnimation()
-  return { height, progress }
+  const { height, progress: progressAV } = useReanimatedKeyboardAnimation()
+
+  const previousOpenKeyboardHeightAV = useSharedValue(0)
+
+  // Because when it's open it's like -346
+  const keyboardHeightAV = useDerivedValue(() => {
+    const currentHeight = height.value * -1
+
+    // Store previous height when keyboard is fully open
+    if (progressAV.value === 1) {
+      previousOpenKeyboardHeightAV.value = currentHeight
+    }
+
+    return currentHeight
+  })
+
+  return {
+    keyboardHeightAV,
+    progressAV,
+    previousOpenKeyboardHeightAV,
+  }
 }

hooks/use-keyboard-handlers.ts

@@ -7,10 +7,10 @@ type IKeyboardHandlersArgs = {
 }
 
 export function useKeyboardHandlers(args: IKeyboardHandlersArgs) {
-  const { progress } = useAnimatedKeyboard()
+  const { progressAV } = useAnimatedKeyboard()
 
   useAnimatedReaction(
-    () => progress.value,
+    () => progressAV.value,
     (progress) => {
       if (progress === 1) {
         runOnJS(args.onKeyboardOpen)()

hooks/use-keyboard-is-shown.ts

@@ -5,10 +5,10 @@ import { useAnimatedKeyboard } from "@/hooks/use-animated-keyboard"
 export function useKeyboardIsShown() {
   const [isKeyboardShown, setIsKeyboardShown] = useState(false)
 
-  const { progress } = useAnimatedKeyboard()
+  const { progressAV } = useAnimatedKeyboard()
 
   useAnimatedReaction(
-    () => progress.value,
+    () => progressAV.value,
     (progress) => {
       if (progress === 1) {
         runOnJS(setIsKeyboardShown)(true)