# 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.
- Pair `keyboardVerticalOffset` with `topInset` set to the same value when a native navigation header is present, so the attachment picker bottom sheet reaches its full snap point.
- 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](https://getstream.io/chat/docs/sdk/react-native/basics/troubleshooting/#incorrect-input-position)

In practice, that means:

- use your navigation header height for `keyboardVerticalOffset` on both Android and iOS
- pass the same header height as `topInset` so the attachment picker bottom sheet sizes correctly
- 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`](https://getstream.io/chat/docs/sdk/react-native/core-components/channel#props) - `boolean`
- [`keyboardBehavior`](https://getstream.io/chat/docs/sdk/react-native/core-components/channel#props) - 'padding' | 'position' | 'height'
- [`keyboardVerticalOffset`](https://getstream.io/chat/docs/sdk/react-native/core-components/channel#props) - `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 { 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`:

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


---

This page was last updated at 2026-08-13T00:26:21.522Z.

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