Default GroupChannelInput is hidden by the keyboard on Android when GroupChannelFragment is used with a custom header and keyboardAvoidOffset

Sendbird Chat UIKit React Native
, , , ,
1

[Problem/Question]
I am using the GroupChannelFragment with the default GroupChannelInput (I have not provided a custom Input prop). My screen has a custom ChatHeader component and a custom viewToggleContainer component stacked vertically above the fragment.
On Android, when I tap the text input, the keyboard opens and completely covers the GroupChannelInput. It is not being pushed up at all.

I am measuring the heights of my custom components and passing them to the keyboardAvoidOffset prop, but it seems to have no effect on Android. Here are my debug logs from the Android device:
LOG [ChatScreen] Safe area insets: {“left”:0,“bottom”:16,“right”:0,“top”:37.66666793823242}
LOG [ChatScreen] Header height: 95.33333587646484
LOG [ChatScreen] Toggle height: 77.66666412353516
LOG [ChatScreen] Status bar height: 37.66666793823242
LOG [ChatScreen] Effective keyboard avoid offset passed to GroupChannelFragment: 0
LOG [ChatScreen] Platform: android

My GroupChannelFragment is wrapped in a <View style={{ flex: 1 }}> as recommended.

The main issue is that even when I pass the correct offset for my headers (headerHeight + toggleHeight, which is 173px), the input is still hidden. It seems keyboardAvoidOffset is not being respected on Android when using the default input.

[UIKit Version]
sendbird/uikit-react-native: 3.11.2

[Reproduction Steps]

  1. Create a screen with a vertical View layout.
  2. Add a custom ChatHeader component with a dynamic height (measured via onLayout).
  3. Add a custom viewToggleContainer component below it with a dynamic height (measured via onLayout).
  4. Add the GroupChannelFragment below the toggle, inside a <View style={{ flex: 1 }}>.
  5. Use createGroupChannelFragment without a custom Input prop to use the default GroupChannelInput.
  6. Calculate the offset: const keyboardOffset = headerHeight + toggleHeight;
    7. Pass this offset to the fragment: <GroupChannelFragment keyboardAvoidOffset={keyboardOffset} ... />
    8. Run on an Android device or emulator.
  7. Tap the GroupChannelInput at the bottom.
  8. Observe: The keyboard opens and completely covers the input field.

// This is my calculated offset
const keyboardOffset = headerHeight + toggleHeight;

// This is my layout structure
return (

  {/* 1. Custom Header */}
  <View onLayout={...}>
    <ChatHeader ... />
  </View>

  {/* 2. Custom Toggle */}
  <View onLayout={...}>
    {/* ...toggle buttons... */}
  </View>

  {/* 3. Content Area */}
  {activeView === 'Chat' ? (
    <View style={{ flex: 1 }}> 
      <GroupChannelFragment
        channel={channel!}
        keyboardAvoidOffset={keyboardOffset} // <-- This is being passed
        // ... other props
      />
    </View>
  ) : (
    renderProfileView()
  )}
</View>

);