movius-chats 1.3.0 → 1.3.2

package/lib/typescript/assets/Icons/CheckAllIcon.d.ts

@@ -1,4 +1,7 @@
 import { ViewStyle } from "react-native";
-export declare const CheckAllIcon: ({ style }: {
+interface IconProps {
     style?: ViewStyle;
-}) => import("react/jsx-runtime").JSX.Element;
+    fill?: string;
+}
+export declare const CheckAllIcon: ({ style, fill }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/typescript/assets/Icons/CheckIcon.d.ts

@@ -1,4 +1,7 @@
 import { ViewStyle } from "react-native";
-export declare const CheckIcon: ({ style }: {
+interface IconProps {
     style?: ViewStyle;
-}) => import("react/jsx-runtime").JSX.Element;
+    fill?: string;
+}
+export declare const CheckIcon: ({ style, fill }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/typescript/components/ChatInput/TruncateFileName.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { StyleProp, TextStyle } from "react-native";
+import React from 'react';
+import { StyleProp, TextStyle } from 'react-native';
 declare const _default: React.MemoExoticComponent<({ fileName, style, }: {
     fileName: string;
     style?: StyleProp<TextStyle>;

package/lib/typescript/hooks/useKeyboardInset.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Returns bottom padding to apply when the software keyboard is open.
+ * More reliable than KeyboardAvoidingView alone on Android chat layouts.
+ */
+export declare function useKeyboardInset(keyboardVerticalOffset?: number, enabled?: boolean): number;

package/lib/typescript/types/index.d.ts

@@ -20,6 +20,10 @@ export interface ChatScreenProps {
     onAudioRecordEnd?: () => void;
     onAudioRecordStart?: () => void;
     onCameraPress?: () => void;
+    /** Extra space subtracted from keyboard height (header, tab bar, safe area). */
+    keyboardVerticalOffset?: number;
+    /** Set true if your screen already handles keyboard insets. */
+    disableKeyboardAvoiding?: boolean;
     typingUsers?: Array<{
         id: string;
         avatar: string;
@@ -44,6 +48,7 @@ export interface ChatScreenProps {
         uri: string;
     }>;
     theme?: {
+        fontFamily?: string;
         colors?: {
             sentMessageTailColor?: string;
             receivedMessageTailColor?: string;
@@ -54,6 +59,14 @@ export interface ChatScreenProps {
             audioPlayIconColor?: string;
             audioPauseIconColor?: string;
             videoPlayIconColor?: string;
+            inputTextColor?: string;
+            sentIconColor?: string;
+            deliveredIconColor?: string;
+            readIconColor?: string;
+        };
+        sizes?: {
+            /** Twrnc classes (e.g. `"h-8 w-8"`) or pixel size (e.g. `28`). */
+            inputIconSize?: string | number;
         };
         bubbleStyle?: {
             sent?: ViewStyle;

package/lib/typescript/utils/theme.d.ts

@@ -0,0 +1,6 @@
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+/** Resolves theme.sizes.inputIconSize (twrnc class string or pixel number). */
+export declare function getInputIconStyle(size?: string | number, extraClass?: string): ViewStyle;
+/** Applies theme.fontFamily to any Text / ParsedText style array. */
+export declare function withFontFamily(style: StyleProp<TextStyle>, fontFamily?: string): StyleProp<TextStyle>;
+export declare function getFontFamilyStyle(fontFamily?: string): TextStyle | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "movius-chats",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "A highly customizable, feature-rich chat interface component for React Native applications",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/assets/Icons/CheckAllIcon.tsx

@@ -1,11 +1,16 @@
 
 import { ViewStyle } from "react-native";
 import Svg, { Path } from "react-native-svg";
+interface IconProps {
+  style?: ViewStyle;
+  fill?: string;
+}
 
-export const CheckAllIcon = ({ style }: { style?: ViewStyle }) => {
+export const CheckAllIcon = ({ style, fill }: IconProps) => {
   return (
     <Svg style={style} viewBox="0 0 24 24">
       <Path
+        fill={fill}
         d="M.41 13.41L6 19l1.41-1.42L1.83 12m20.41-6.42L11.66 16.17L7.5 12l-1.43 1.41L11.66 19l12-12M18 7l-1.41-1.42l-6.35 6.35l1.42 1.41z"
       ></Path>
     </Svg>

package/src/assets/Icons/CheckIcon.tsx

@@ -1,11 +1,15 @@
 
 import { ViewStyle } from "react-native";
 import Svg, { Path } from "react-native-svg";
+interface IconProps {
+  style?: ViewStyle;
+  fill?: string;
+}
 
-export const CheckIcon = ({ style }: { style?: ViewStyle }) => {
+export const CheckIcon = ({ style, fill }: IconProps) => {
   return (
     <Svg style={style} viewBox="0 0 24 24">
-      <Path d="m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></Path>
+      <Path d="m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z" fill={fill}></Path>
     </Svg>
   );
 };

package/src/components/AudioPlayer/AudioPlayer.tsx

@@ -12,6 +12,7 @@ import { PlayIcon } from '../../assets/Icons/PlayIcon';
 import { useAudio } from '../../context/AudioContext';
 import { useChatContext } from '../../context/ChatContext';
 import { formatDuration } from '../../utils/datefunc';
+import { withFontFamily } from '../../utils/theme';
 import { AudioPlayerProps } from './types';
 
 const AudioPlayer: React.FC<AudioPlayerProps> = ({
@@ -244,10 +245,13 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({
       </View>
       <View style={tw`px-4 py-1`}>
         <Text
-          style={[
-            tw`text-xs text-gray-500`,
-            theme?.messageStyle?.audioDurationStyle,
-          ]}
+          style={withFontFamily(
+            [
+              tw`text-xs text-gray-500`,
+              theme?.messageStyle?.audioDurationStyle,
+            ],
+            theme?.fontFamily
+          )}
         >
           {!isNaN(currentTime) ? formatDuration(currentTime) : '0:00'}
         </Text>

package/src/components/ChatBubble/ChatBubble.tsx

@@ -3,6 +3,7 @@ import { Image, Pressable, Text, View } from 'react-native';
 import tw from 'twrnc';
 import { ArrowBack2RoundedIcon } from '../../assets/Icons/ArrowBack2RoundedIcon';
 import { useChatContext } from '../../context/ChatContext';
+import { withFontFamily } from '../../utils/theme';
 import MessageContent from './MessageContent';
 import MessageStatus from './MessageStatus';
 import { ChatBubbleProps } from './types';
@@ -71,10 +72,13 @@ const ChatBubble: React.FC<ChatBubbleProps> = ({
               />
             ) : (
               <Text
-                style={[
-                  tw`text-sm text-black font-semibold capitalize rounded-full bg-zinc-300 w-full h-full text-center pt-0.5`,
-                  theme?.bubbleStyle?.avatarTextStyle,
-                ]}
+                style={withFontFamily(
+                  [
+                    tw`text-sm text-black font-semibold capitalize rounded-full bg-zinc-300 w-full h-full text-center pt-0.5`,
+                    theme?.bubbleStyle?.avatarTextStyle,
+                  ],
+                  theme?.fontFamily
+                )}
               >
                 {message.senderName?.charAt(0)}
               </Text>
@@ -82,10 +86,13 @@ const ChatBubble: React.FC<ChatBubbleProps> = ({
           </View>
           {showUserNames && message.senderName && (
             <Text
-              style={[
-                tw`text-sm text-black font-semibold mt-1 capitalize`,
-                theme?.bubbleStyle?.userNameStyle,
-              ]}
+              style={withFontFamily(
+                [
+                  tw`text-sm text-black font-semibold mt-1 capitalize`,
+                  theme?.bubbleStyle?.userNameStyle,
+                ],
+                theme?.fontFamily
+              )}
             >
               {message.senderName}
             </Text>

package/src/components/ChatBubble/MessageContent.tsx

@@ -6,6 +6,7 @@ import { LoadingIcon } from '../../assets/Icons/LoadingIcon';
 import { PlayIcon } from '../../assets/Icons/PlayIcon';
 import { useChatContext } from '../../context/ChatContext';
 import { formatDuration } from '../../utils/datefunc';
+import { getFontFamilyStyle, withFontFamily } from '../../utils/theme';
 import AudioPlayer from '../AudioPlayer/AudioPlayer';
 import { MessageContentProps } from './types';
 import ParsedText from 'react-native-parsed-text';
@@ -86,7 +87,12 @@ const MessageContent: React.FC<MessageContentProps> = ({
               <View
                 style={tw`absolute inset-0 flex items-center justify-center bg-red-500/60 p-2`}
               >
-                <Text style={tw`text-white font-bold`}>
+                <Text
+                  style={withFontFamily(
+                    tw`text-white font-bold`,
+                    theme?.fontFamily
+                  )}
+                >
                   Failed to load video
                 </Text>
               </View>
@@ -127,18 +133,25 @@ const MessageContent: React.FC<MessageContentProps> = ({
 
       {message.text && (
         <ParsedText
-          style={[
-            tw`pt-1`,
-            showMessageStatus ? tw`pb-0` : tw`pb-2`,
-            { wordBreak: 'break-word', overflowWrap: 'break-word' },
-            isCurrentUser
-              ? theme?.messageStyle?.sentTextStyle
-              : theme?.messageStyle?.receivedTextStyle,
-          ]}
+          style={withFontFamily(
+            [
+              tw`pt-1`,
+              showMessageStatus ? tw`pb-0` : tw`pb-2`,
+              { wordBreak: 'break-word', overflowWrap: 'break-word' },
+              isCurrentUser
+                ? theme?.messageStyle?.sentTextStyle
+                : theme?.messageStyle?.receivedTextStyle,
+            ],
+            theme?.fontFamily
+          )}
           parse={[
             {
               type: 'url',
-              style: { color: 'blue', textDecorationLine: 'underline' },
+              style: {
+                color: 'blue',
+                textDecorationLine: 'underline',
+                ...getFontFamilyStyle(theme?.fontFamily),
+              },
               onPress: (url) =>
                 Linking.openURL(
                   url.startsWith('http') ? url : `https://${url}`

package/src/components/ChatBubble/MessageStatus.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 import tw from 'twrnc';
+import { withFontFamily } from '../../utils/theme';
 import { CheckAllIcon } from '../../assets/Icons/CheckAllIcon';
 import { CheckIcon } from '../../assets/Icons/CheckIcon';
 import { useChatContext } from '../../context/ChatContext';
@@ -28,15 +29,18 @@ const MessageStatus: React.FC<MessageStatusProps> = ({
           ]}
         >
           <Text
-            style={[
-              tw`text-xs`,
-              {
-                color:
-                  hasText || hasAudio
-                    ? theme?.colors?.timestamp || 'rgba(107, 114, 128, 0.7)'
-                    : 'white',
-              },
-            ]}
+            style={withFontFamily(
+              [
+                tw`text-xs`,
+                {
+                  color:
+                    hasText || hasAudio
+                      ? theme?.colors?.timestamp || 'rgba(107, 114, 128, 0.7)'
+                      : 'white',
+                },
+              ],
+              theme?.fontFamily
+            )}
           >
             {time}
           </Text>
@@ -44,17 +48,20 @@ const MessageStatus: React.FC<MessageStatusProps> = ({
             <View style={tw`ml-1 flex-row items-center`}>
               {status === 'sent' && (
                 <CheckIcon
-                  style={tw.style('fill-[#6B7280] h-4 w-4', { opacity: 0.7 })}
+                  style={tw.style('h-4 w-4', { opacity: 0.7 })}
+                  fill={theme?.colors?.sentIconColor || '#6B7280'}
                 />
               )}
               {status === 'delivered' && (
                 <CheckAllIcon
-                  style={tw.style('fill-[#6B7280] h-4 w-4', { opacity: 0.7 })}
+                  style={tw.style('h-4 w-4', { opacity: 0.7 })}
+                  fill={theme?.colors?.deliveredIconColor || '#6B7280'}
                 />
               )}
               {status === 'read' && (
                 <CheckAllIcon
-                  style={tw.style('fill-[#3B82F6] h-4 w-4', { opacity: 0.9 })}
+                  style={tw.style('h-4 w-4', { opacity: 0.9 })}
+                  fill={theme?.colors?.readIconColor || '#3B82F6'}
                 />
               )}
             </View>

package/src/components/ChatInput/ChatInput.tsx

@@ -7,6 +7,7 @@ import { MicrophoneIcon } from '../../assets/Icons/MicrophoneIcon';
 import { PaperClipIcon } from '../../assets/Icons/PaperClipIcon';
 import { PaperPlaneIcon } from '../../assets/Icons/PaperPlaneIcon';
 import { useChatContext } from '../../context/ChatContext';
+import { getInputIconStyle, withFontFamily } from '../../utils/theme';
 import FilePreview from './FilePreview';
 import { ChatInputProps, InputHeightState } from './types';
 
@@ -47,6 +48,13 @@ const ChatInput: React.FC<ChatInputProps> = ({
     closePreview,
   } = useChatContext();
 
+  const inputIconStyle = getInputIconStyle(
+    theme?.sizes?.inputIconSize,
+    inputHeight.isMultiline ? 'pb-14' : undefined
+  );
+  const inputIconStyleInline = getInputIconStyle(theme?.sizes?.inputIconSize);
+  const sendIconStyle = getInputIconStyle(theme?.sizes?.inputIconSize);
+
   const handleContentSizeChange = useCallback(
     (event: { nativeEvent: { contentSize: { height: number } } }) => {
       const newHeight = Math.min(
@@ -87,7 +95,6 @@ const ChatInput: React.FC<ChatInputProps> = ({
 
   return (
     <View style={tw`w-full px-2`}>
-      {/* File Preview above the input */}
       {previewData && (
         <FilePreview
           previewData={previewData}
@@ -105,7 +112,6 @@ const ChatInput: React.FC<ChatInputProps> = ({
           theme?.inputStyles?.inputSectionContainerStyle,
         ]}
       >
-        {/* LEFT: Input and icons */}
         <View
           style={[
             tw`flex-1 px-3.5 bg-white gap-1 flex-row justify-between`,
@@ -121,10 +127,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
                 <CustomEmojiIcon />
               ) : (
                 <EmojiFunnySquareIcon
-                  style={tw.style(
-                    `${Platform.OS === 'ios' ? 'h-6 w-6' : 'w-7 h-7'}`,
-                    inputHeight.isMultiline ? 'pb-14' : 'pb-0'
-                  )}
+                  style={inputIconStyle}
                   color={theme?.colors?.inputsIconsColor || 'rgba(0,0,0,0.7)'}
                 />
               )}
@@ -135,11 +138,18 @@ const ChatInput: React.FC<ChatInputProps> = ({
             value={inputText}
             onChangeText={setInputText}
             placeholder={placeholder || 'Message'}
-            style={[
-              tw`bg-transparent flex-1 pl-2 my-3`,
-              Platform.OS === 'ios' ? tw`text-[17px]` : tw`text-[16px]`,
-              { minHeight: MIN_INPUT_HEIGHT, maxHeight: MAX_INPUT_HEIGHT },
-            ]}
+            style={withFontFamily(
+              [
+                tw`bg-transparent flex-1 pl-2 my-3`,
+                Platform.OS === 'ios' ? tw`text-[17px]` : tw`text-[16px]`,
+                { minHeight: MIN_INPUT_HEIGHT, maxHeight: MAX_INPUT_HEIGHT },
+                {
+                  color:
+                    theme?.colors?.inputTextColor || 'rgba(0, 0, 0, 0.87)',
+                },
+              ],
+              theme?.fontFamily
+            )}
             placeholderTextColor={
               theme?.colors?.placeholderTextColor || 'rgba(0, 0, 0, 0.4)'
             }
@@ -160,9 +170,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
                   <CustomAttachmentIcon />
                 ) : (
                   <PaperClipIcon
-                    style={tw.style(
-                      Platform.OS === 'ios' ? 'h-6 w-6' : 'w-7 h-7'
-                    )}
+                    style={inputIconStyleInline}
                     color={theme?.colors?.inputsIconsColor || 'rgba(0,0,0,0.7)'}
                   />
                 )}
@@ -174,9 +182,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
                   <CustomCameraIcon />
                 ) : (
                   <CameraIcon
-                    style={tw.style(
-                      Platform.OS === 'ios' ? 'h-6 w-6' : 'w-7 h-7'
-                    )}
+                    style={inputIconStyleInline}
                     color={theme?.colors?.inputsIconsColor || 'rgba(0,0,0,0.7)'}
                   />
                 )}
@@ -185,7 +191,6 @@ const ChatInput: React.FC<ChatInputProps> = ({
           </View>
         </View>
 
-        {/* RIGHT: Send / Mic Button always at bottom */}
         <Pressable
           style={[
             tw`p-2 rounded-full bg-green-600 justify-center items-center`,
@@ -208,7 +213,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
               <CustomSendIcon />
             ) : (
               <PaperPlaneIcon
-                style={tw.style('h-6 w-6')}
+                style={sendIconStyle}
                 color={theme?.colors?.sendIconsColor || 'rgba(255,255,255,0.7)'}
               />
             )
@@ -217,7 +222,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
               <CustomMicrophoneIcon />
             ) : (
               <MicrophoneIcon
-                style={tw.style('h-8 w-8')}
+                style={sendIconStyle}
                 color={theme?.colors?.sendIconsColor || 'rgba(255,255,255,0.7)'}
               />
             )
@@ -225,7 +230,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
             <CustomSendIcon />
           ) : (
             <PaperPlaneIcon
-              style={tw.style('h-6 w-6')}
+              style={sendIconStyle}
               color={theme?.colors?.sendIconsColor || 'rgba(255,255,255,0.7)'}
             />
           )}
@@ -233,7 +238,6 @@ const ChatInput: React.FC<ChatInputProps> = ({
       </View>
     </View>
   );
-
 };
 
 export default React.memo(ChatInput);

package/src/components/ChatInput/FilePreview.tsx

@@ -3,6 +3,7 @@ import { Image, Pressable, Text, View } from 'react-native';
 import Video from 'react-native-video';
 import { FileIcon } from '../../assets/Icons/FileIcon';
 import { useChatContext } from '../../context/ChatContext';
+import { withFontFamily } from '../../utils/theme';
 import TruncateFileName from './TruncateFileName';
 import { ChatInputProps } from './types';
 
@@ -57,7 +58,14 @@ const FilePreview: React.FC<Omit<ChatInputProps, 'onSendMessage'>> = ({
           alignItems: 'center',
         }}
       >
-        <Text style={{ fontSize: 12, color: 'black' }}>X</Text>
+        <Text
+          style={withFontFamily(
+            { fontSize: 12, color: 'black' },
+            theme?.fontFamily
+          )}
+        >
+          X
+        </Text>
       </Pressable>
 
       {isImage ? (

package/src/components/ChatInput/TruncateFileName.tsx

@@ -1,5 +1,7 @@
-import React from "react";
-import { StyleProp, Text, TextStyle } from "react-native";
+import React from 'react';
+import { StyleProp, Text, TextStyle } from 'react-native';
+import { useChatContext } from '../../context/ChatContext';
+import { withFontFamily } from '../../utils/theme';
 
 const TruncateFileName = ({
   fileName,
@@ -8,6 +10,7 @@ const TruncateFileName = ({
   fileName: string;
   style?: StyleProp<TextStyle>;
 }) => {
+  const { theme } = useChatContext();
   const getTruncatedName = (fullName: string) => {
     const lastDot = fullName.lastIndexOf('.');
     if (lastDot === -1) return fullName;
@@ -23,7 +26,10 @@ const TruncateFileName = ({
     <Text
       numberOfLines={2}
       ellipsizeMode="tail"
-      style={[{ fontSize: 14, fontWeight: '600', color: 'black' }, style]}
+      style={withFontFamily(
+        [{ fontSize: 14, fontWeight: '600', color: 'black' }, style],
+        theme?.fontFamily
+      )}
     >
       {getTruncatedName(fileName)}
     </Text>

package/src/components/MediaViewer/MediaViewer.tsx

@@ -5,6 +5,8 @@ import Video, { VideoRef } from 'react-native-video';
 import tw from 'twrnc';
 import { LoadingIcon } from '../../assets/Icons/LoadingIcon';
 import { XIcon } from '../../assets/Icons/XIcon';
+import { useChatContext } from '../../context/ChatContext';
+import { withFontFamily } from '../../utils/theme';
 import { MediaViewerProps } from './types';
 
 const MediaViewer: React.FC<MediaViewerProps> = ({
@@ -12,6 +14,7 @@ const MediaViewer: React.FC<MediaViewerProps> = ({
   videoUrl,
   onClose,
 }) => {
+  const { theme } = useChatContext();
   const videoRef = useRef<VideoRef>(null);
   const [videoIsLoading, setVideoIsLoading] = useState(false);
   const [videoHasError, setVideoHasError] = useState(false);
@@ -84,7 +87,12 @@ const MediaViewer: React.FC<MediaViewerProps> = ({
               <View
                 style={tw`absolute inset-0 flex items-center justify-center bg-red-500/60 p-2`}
               >
-                <Text style={tw`text-white font-bold`}>
+                <Text
+                  style={withFontFamily(
+                    tw`text-white font-bold`,
+                    theme?.fontFamily
+                  )}
+                >
                   Failed to load video
                 </Text>
               </View>

package/src/components/TypingComponent/TypingIndicator.tsx

@@ -2,6 +2,7 @@ import { Image, Text, View } from 'react-native';
 import tw from 'twrnc';
 import { ArrowBack2RoundedIcon } from '../../assets/Icons/ArrowBack2RoundedIcon';
 import { useChatContext } from '../../context/ChatContext';
+import { withFontFamily } from '../../utils/theme';
 
 export interface TypingUser {
   id: string;
@@ -55,10 +56,13 @@ export const TypingIndicator = ({
                 />
               ) : (
                 <Text
-                  style={[
-                    tw`text-sm text-black font-semibold capitalize rounded-full bg-zinc-300 w-full h-full text-center pt-0.5`,
-                    theme?.bubbleStyle?.avatarTextStyle,
-                  ]}
+                  style={withFontFamily(
+                    [
+                      tw`text-sm text-black font-semibold capitalize rounded-full bg-zinc-300 w-full h-full text-center pt-0.5`,
+                      theme?.bubbleStyle?.avatarTextStyle,
+                    ],
+                    theme?.fontFamily
+                  )}
                 >
                   {user.name?.charAt(0)}
                 </Text>
@@ -77,10 +81,13 @@ export const TypingIndicator = ({
               ]}
             >
               <Text
-                style={[
-                  tw`text-white text-xs font-semibold`,
-                  theme?.bubbleStyle?.additionalTypingUsersTextStyle,
-                ]}
+                style={withFontFamily(
+                  [
+                    tw`text-white text-xs font-semibold`,
+                    theme?.bubbleStyle?.additionalTypingUsersTextStyle,
+                  ],
+                  theme?.fontFamily
+                )}
               >
                 +{additionalUsers}
               </Text>
@@ -107,7 +114,9 @@ export const TypingIndicator = ({
           renderCustomTyping()
         ) : (
           <View style={tw`flex-row items-center py-3 px-2 justify-center`}>
-            <Text style={tw`text-gray-600`}>Typing...</Text>
+            <Text style={withFontFamily(tw`text-gray-600`, theme?.fontFamily)}>
+              Typing...
+            </Text>
           </View>
         )}
       </View>

package/src/hooks/useKeyboardInset.ts

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+import { Keyboard, KeyboardEvent, Platform } from 'react-native';
+
+/**
+ * Returns bottom padding to apply when the software keyboard is open.
+ * More reliable than KeyboardAvoidingView alone on Android chat layouts.
+ */
+export function useKeyboardInset(
+  keyboardVerticalOffset = 0,
+  enabled = true
+) {
+  const [inset, setInset] = useState(0);
+
+  useEffect(() => {
+    if (!enabled) {
+      setInset(0);
+      return;
+    }
+
+    const showEvent =
+      Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent =
+      Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+
+    const onShow = (event: KeyboardEvent) => {
+      const height = event.endCoordinates.height;
+      setInset(Math.max(0, height - keyboardVerticalOffset));
+    };
+
+    const onHide = () => setInset(0);
+
+    const showSub = Keyboard.addListener(showEvent, onShow);
+    const hideSub = Keyboard.addListener(hideEvent, onHide);
+
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, [keyboardVerticalOffset, enabled]);
+
+  return enabled ? inset : 0;
+}