diff --git a/packages/uikit-react-native/src/components/ChannelInput/index.tsx b/packages/uikit-react-native/src/components/ChannelInput/index.tsx index 1596c6a6..969b4e51 100644 --- a/packages/uikit-react-native/src/components/ChannelInput/index.tsx +++ b/packages/uikit-react-native/src/components/ChannelInput/index.tsx @@ -1,5 +1,6 @@ import React, { useEffect, useMemo, useState } from 'react'; import { + Keyboard, KeyboardAvoidingView, Platform, StyleProp, @@ -94,10 +95,10 @@ export type ChannelInputProps = { }; const AUTO_FOCUS = Platform.select({ ios: false, android: true, default: false }); -const isAndroidApi35 = Platform.OS === 'android' && Platform.Version >= 35; +const isAndroidApi35Plus = Platform.OS === 'android' && Platform.Version >= 35; const KEYBOARD_AVOID_VIEW_BEHAVIOR = Platform.select({ ios: 'padding' as const, - android: isAndroidApi35 ? ('padding' as const) : undefined, + android: isAndroidApi35Plus ? ('padding' as const) : undefined, default: undefined, }); @@ -121,7 +122,9 @@ const ChannelInput = (props: ChannelInputProps) => { * For older Android versions, we manually subtract the safe area bottom padding to avoid overlapping with system UI. * See: https://developer.android.com/develop/ui/views/layout/edge-to-edge */ - const keyboardVerticalOffset = isAndroidApi35 ? keyboardAvoidOffset : -safeArea.paddingBottom + keyboardAvoidOffset; + const keyboardVerticalOffset = isAndroidApi35Plus + ? keyboardAvoidOffset + : -safeArea.paddingBottom + keyboardAvoidOffset; const { colors, typography } = useUIKitTheme(); const { sbOptions, mentionManager } = useSendbirdChat(); @@ -158,6 +161,23 @@ const ChannelInput = (props: ChannelInputProps) => { onChangeText(replace(text, searchStringRange.start, searchStringRange.end, mentionedMessageText), { user, range }); }; + const [keyboardShown, setKeyboardShown] = useState(false); + + useEffect(() => { + const keyboardDidShow = () => setKeyboardShown(true); + const keyboardDidHide = () => setKeyboardShown(false); + + const showSubscription = Keyboard.addListener('keyboardDidShow', keyboardDidShow); + const hideSubscription = Keyboard.addListener('keyboardDidHide', keyboardDidHide); + + return () => { + showSubscription.remove(); + hideSubscription.remove(); + }; + }, []); + + const shouldShowSafeAreaBottom = !isAndroidApi35Plus || (isAndroidApi35Plus && !keyboardShown); + if (!props.shouldRenderInput) { return ; } @@ -204,7 +224,7 @@ const ChannelInput = (props: ChannelInputProps) => { /> )} - {!isAndroidApi35 && } + {shouldShowSafeAreaBottom && } {mentionAvailable && props.SuggestedMentionList && (