Merge pull request #252 from sendbird/fix/support-android-15-keyboard-avoid

[CLNP-7469] fix: improve keyboard avoidance behavior for Android API 35+

Author: OnestarLee

packages/uikit-react-native/package.json

@@ -62,7 +62,7 @@
     "@openspacelabs/react-native-zoomable-view": "^2.1.5",
     "@sendbird/uikit-chat-hooks": "3.10.0",
     "@sendbird/uikit-react-native-foundation": "3.10.0",
-    "@sendbird/uikit-tools": "0.0.10",
+    "@sendbird/uikit-tools": "0.0.15",
     "@sendbird/uikit-utils": "3.10.0"
   },
   "devDependencies": {

packages/uikit-react-native/src/components/ChannelInput/index.tsx

@@ -82,7 +82,12 @@ export type ChannelInputProps = {
 };
 
 const AUTO_FOCUS = Platform.select({ ios: false, android: true, default: false });
-const KEYBOARD_AVOID_VIEW_BEHAVIOR = Platform.select({ ios: 'padding' as const, default: undefined });
+const isAndroidApi35 = Platform.OS === 'android' && Platform.Version >= 35;
+const KEYBOARD_AVOID_VIEW_BEHAVIOR = Platform.select({
+  ios: 'padding' as const,
+  android: isAndroidApi35 ? ('padding' as const) : undefined,
+  default: undefined,
+});
 
 // FIXME(iOS): Dynamic style does not work properly when typing the CJK. (https://github.com/facebook/react-native/issues/26107)
 //  To workaround temporarily, change the key for re-mount the component.
@@ -96,6 +101,15 @@ const ChannelInput = (props: ChannelInputProps) => {
   const { channel, keyboardAvoidOffset, messageToEdit, setMessageToEdit } = props;
 
   const safeArea = useSafeAreaPadding(['top', 'left', 'right', 'bottom']);
+
+  // Android API 35+ keyboard avoidance handling
+  /**
+   * Android API 35+ introduced edge-to-edge layouts, which changed how keyboard avoidance should be handled.
+   * For API 35+, the system manages insets automatically, so we use the provided keyboardAvoidOffset directly.
+   * 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 { colors, typography } = useUIKitTheme();
   const { sbOptions, mentionManager } = useSendbirdChat();
 
@@ -138,10 +152,7 @@ const ChannelInput = (props: ChannelInputProps) => {
 
   return (
     <>
-      <KeyboardAvoidingView
-        keyboardVerticalOffset={-safeArea.paddingBottom + keyboardAvoidOffset}
-        behavior={KEYBOARD_AVOID_VIEW_BEHAVIOR}
-      >
+      <KeyboardAvoidingView keyboardVerticalOffset={keyboardVerticalOffset} behavior={KEYBOARD_AVOID_VIEW_BEHAVIOR}>
         <View
           style={{
             paddingStart: safeArea.paddingStart,
@@ -181,7 +192,7 @@ const ChannelInput = (props: ChannelInputProps) => {
               />
             )}
           </View>
-          <SafeAreaBottom height={safeArea.paddingBottom} />
+          {!isAndroidApi35 && <SafeAreaBottom height={safeArea.paddingBottom} />}
         </View>
       </KeyboardAvoidingView>
       {mentionAvailable && props.SuggestedMentionList && (

yarn.lock

@@ -3721,10 +3721,10 @@
   resolved "https://registry.yarnpkg.com/@sendbird/chat/-/chat-4.19.2.tgz#a60346e6aaaa0d65697cfc46d619bdebb7c01999"
   integrity sha512-scytefM8c9Ja+fm3oWkFHAZt7TqV2Q5EDbCJFtFmRvyRa+TYUjtHmSKpvrGZEyjjU/oBTK/JohZ1Zb2AixUANg==
 
-"@sendbird/[email protected].10":
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/@sendbird/uikit-tools/-/uikit-tools-0.0.10.tgz#b522339426e0a6f859047ac1e4c1bf695f6dbef9"
-  integrity sha512-HRc7vLo2XASpbL0QtUR2r5py1pcy+1xTgIqUWxsJp8/ih+YbnrLMNz6hJgAwBEtpw5+d1fhY+ZzvWdRihQX5ew==
+"@sendbird/[email protected].15":
+  version "0.0.15"
+  resolved "https://registry.yarnpkg.com/@sendbird/uikit-tools/-/uikit-tools-0.0.15.tgz#86a1ac41fdf1624b984bd8f875d1091ac5842afa"
+  integrity sha512-VJukrtFwcqk5u4QYk0qva8ntJupvYCyNYjdNUWawjxYd9UbmODIld2TBkDBjiNtlVfK6UlzfKdvCVCJ30hC7pQ==
 
 "@sideway/address@^4.1.5":
   version "4.1.5"