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 based on actual header height, not hardcoded values.
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.

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 { Platform } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { KeyboardCompatibleView } from 'stream-chat-react-native';

export const CustomKeyboardCompatibleView = ({ children }) => {
  const insets = useSafeAreaInsets();

  if (Platform.OS === 'android') {
    return children;
  }

  const iosVerticalOffset = insets.bottom > 0 ? 60 : 0;

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

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

You can also disable it with disableKeyboardCompatibleView:

<Channel
  disableKeyboardCompatibleView
  ...
/>

Native Handlers

Performance