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}
...
/>
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.
Also you can disable KeyboardCompatibleView
by using prop disableKeyboardCompatibleView
on the Channel
component.
<Channel
disableKeyboardCompatibleView
...
/>