---
id: keyboard
sidebar_position: 8
title: Keyboard
---

React Native provides an in built component called `KeyboardAvoidingView`. This component works well for most of the cases where height of the component is 100% relative to screen. If you have a fixed height then it may create some issues (it depends on your use case - and how you use wrappers such as navigation around chat components).

To avoid this issue we built our own component - `KeyboardCompatibleView`. It contains simple logic - when keyboard is opened (which we can know from events of Keyboard module), adjust the height of `Channel` component, and when keyboard is dismissed, again adjust the height of `Channel` component accordingly. `KeyboardCompatibleView` is near identical to `KeyboardAvoidingView` from `react-native`, with some adjustments for app state.

You can provide following props to `Channel` to customize the builtin `KeyboardCompatibleView` behavior. 

- [disableKeyboardCompatibleView](../core-components/channel.mdx#disablekeyboardcompatibleview) - boolean 
- [keyboardBehavior](../core-components/channel.mdx#keyboardbehaviour) - 'padding' | 'position' | 'height'
- [keyboardVerticalOffset](../core-components/channel.mdx#keyboardverticaloffset)  - number

You can pass additional props directly to the component using the `additionalKeyboardAvoidingViewProps`.

You can also replace the `KeyboardCompatibleView` with your own custom component by passing it as a prop 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={CustomizedKeyboardView}
  ...
/>
```

Also you can disable `KeyboardCompatibleView` by using prop `disableKeyboardCompatibleView` on the `Channel` component.

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