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 - boolean
• keyboardBehavior - ‘padding’ | ‘position’ | ‘height’
• 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.

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.

<Channel
  disableKeyboardCompatibleView
  ...
/>