Keyboard

React Native provides a built-in KeyboardAvoidingView. It works well when your layout fills the screen. Fixed-height layouts can cause issues depending on your navigation/wrapper setup.

To handle these cases, the SDK includes KeyboardCompatibleView. It listens to keyboard events and adjusts the Channel height. It mirrors KeyboardAvoidingView with a few app-state tweaks.

Best Practices

• Prefer KeyboardCompatibleView for chat screens with variable headers or footers.
• Set keyboardVerticalOffset to your navigation header height on both Android and iOS.
• Keep the same keyboardVerticalOffset everywhere you render the same chat layout.
• Do not use artificial negative offsets such as keyboardVerticalOffset={-300} on Android.
• Do not wrap MessageComposer in an extra SafeAreaView; let the SDK handle composer safe area correctly.
• Remove old Android IME padding hacks you may have carried over from pre-v9 integrations.
• Use additionalKeyboardAvoidingViewProps to fine-tune without replacing the component.
• Disable the view only when your layout already handles keyboard shifts.
• Test on both iOS and Android; behavior differs by OS and nav setup.

Migrating from V8 and Earlier

The built-in KeyboardCompatibleView was refactored in V9 and should work correctly with modern edge-to-edge layouts without the extra Android IME padding workarounds that some older integrations used.

If you previously followed Android keyboard troubleshooting from the V8 docs, start by removing those hacks and re-testing with your header height passed to keyboardVerticalOffset:

• V8 troubleshooting: Incorrect input position

In practice, that means:

• use your navigation header height for keyboardVerticalOffset on both Android and iOS
• keep that value consistent everywhere the same chat screen layout is rendered
• remove Android-only negative offsets
• remove manual IME padding shims that were only there to move the composer above the keyboard
• avoid wrapping MessageComposer in a separate SafeAreaView

You can customize the built-in KeyboardCompatibleView through Channel props:

• disableKeyboardCompatibleView - boolean
• keyboardBehavior - 'padding' | 'position' | 'height'
• keyboardVerticalOffset - number

You can also pass props via additionalKeyboardAvoidingViewProps.

You can replace KeyboardCompatibleView with your own component by passing it to Channel.

import React from 'react';
import { useHeaderHeight } from '@react-navigation/elements';
import { KeyboardCompatibleView } from 'stream-chat-react-native';

export const CustomKeyboardCompatibleView = ({ children }) => {
  const headerHeight = useHeaderHeight();

  return (
    <KeyboardCompatibleView keyboardVerticalOffset={headerHeight}>
      {children}
    </KeyboardCompatibleView>
  );
};

/** In your app */
<Channel
  KeyboardCompatibleView={CustomKeyboardCompatibleView}
  ...
/>

You can also disable it with disableKeyboardCompatibleView:

<Channel
  disableKeyboardCompatibleView
  ...
/>