Android: the keyboard no longer avoids the input fields after navigating back from GiftedChat screen

[MD-Nguyenn]

Hi, I'm encountering an issue: after returning from the GiftedChat screen, the keyboard no longer avoids the input fields in my app (on Android). This behavior only happens after visiting a screen that renders GiftedChat. Before that, Scrollview, react-native-keyboard-aware-scroll-view,... works fine throughout the app. Restarting the app restores normal keyboard behavior.

This issue only happens on Android. iOS works as expected.
Updated: I found that this problem also happens on Android devices when I wrap the whole app with KeyboardProvider of react-native-keyboard-controller.

Environment:
"react-native-gifted-chat": ^2.6.5 || ^2.8.1,
"react-native": 0.76.9,
"react-native-keyboard-controller": ^1.16.6,
Android version: 12, 13

Let me know if more info is needed. Thank you for maintaining this useful library!

[parulgarg004]

@FaridSafi @xcarpentier @Johan-dutoit @kesha-antonov we are also facing the same issue, and it's a major one.

[cbhadarka]

+1

[haodev7]

1. Create AndroidKeyboardSpacer.tsx

import { useKeyboardHandler } from "react-native-keyboard-controller"
import Animated, { useAnimatedStyle, useSharedValue } from "react-native-reanimated"

/**
 * Animated spacer that matches the keyboard height.
 * Only required for Android to fix layout overlap in GiftedChat.
 */
export const AndroidKeyboardSpacer = () => {
  const keyboardHeight = useSharedValue(0)

  useKeyboardHandler(
    {
      onMove: (event) => {
        "worklet"
        keyboardHeight.value = event.height
      },
      onEnd: (event) => {
        "worklet"
        keyboardHeight.value = event.height
      },
    },
    [],
  )

  const animatedStyle = useAnimatedStyle(() => ({
    height: keyboardHeight.value,
  }))

  return <Animated.View style={animatedStyle} />
}

2. Usage

import { Platform } from "react-native"
import { GiftedChat } from "react-native-gifted-chat"
import { AndroidKeyboardSpacer } from "./AndroidKeyboardSpacer"

<GiftedChat
  {...props}
  isKeyboardInternallyHandled={false} // important!
  keyboardShouldPersistTaps="handled"
/>

{Platform.OS === "android" && <AndroidKeyboardSpacer />}