# 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`](/chat/docs/sdk/react-native/v8/core-components/channel#disablekeyboardcompatibleview/) - `boolean`
- [`keyboardBehavior`](/chat/docs/sdk/react-native/v8/core-components/channel#keyboardbehaviour/) - 'padding' | 'position' | 'height'
- [`keyboardVerticalOffset`](/chat/docs/sdk/react-native/v8/core-components/channel#keyboardverticaloffset/) - `number`

You can also pass props via `additionalKeyboardAvoidingViewProps`.

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

```tsx
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`:

```tsx
<Channel
  disableKeyboardCompatibleView
  ...
/>
```


---

This page was last updated at 2026-04-17T17:33:45.613Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v8/guides/keyboard/](https://getstream.io/chat/docs/sdk/react-native/v8/guides/keyboard/).