movius-chats 1.3.0 → 1.3.2

package/src/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FlatList, View } from 'react-native';
+import { FlatList, KeyboardAvoidingView, Platform, View } from 'react-native';
 import tw from 'twrnc';
 import ChatBubble from './components/ChatBubble/ChatBubble';
 import ChatInput from './components/ChatInput/ChatInput';
@@ -7,6 +7,7 @@ import MediaViewer from './components/MediaViewer/MediaViewer';
 import { TypingIndicator } from './components/TypingComponent/TypingIndicator';
 import { AudioProvider } from './context/AudioContext';
 import { ChatProvider, useChatContext } from './context/ChatContext';
+import { useKeyboardInset } from './hooks/useKeyboardInset';
 import { ChatScreenProps } from './types';
 
 const ChatScreenContent = () => {
@@ -34,11 +35,26 @@ const ChatScreenContent = () => {
     CustomFileIcon,
     CustomImagePreview,
     CustomVideoPreview,
+    keyboardVerticalOffset = 0,
+    disableKeyboardAvoiding = false,
   } = useChatContext();
 
-  return (
-    <View style={tw`flex-1 px-2 pb-4 gap-2 relative`}>
+  const keyboardInset = useKeyboardInset(
+    keyboardVerticalOffset,
+    !disableKeyboardAvoiding
+  );
+
+  const content = (
+    <View
+      style={[
+        tw`flex-1 px-2 pb-4 gap-2 relative`,
+        !disableKeyboardAvoiding && keyboardInset > 0
+          ? { paddingBottom: keyboardInset + 16 }
+          : undefined,
+      ]}
+    >
       <FlatList
+        style={tw`flex-1`}
         data={messages}
         keyExtractor={(item) => item.id}
         renderItem={({ item, index }) => (
@@ -60,6 +76,8 @@ const ChatScreenContent = () => {
         }
         showsVerticalScrollIndicator={false}
         inverted
+        keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="interactive"
       />
 
       {renderCustomInput ? (
@@ -94,6 +112,20 @@ const ChatScreenContent = () => {
       />
     </View>
   );
+
+  if (disableKeyboardAvoiding) {
+    return <View style={tw`flex-1`}>{content}</View>;
+  }
+
+  return (
+    <KeyboardAvoidingView
+      style={tw`flex-1`}
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      keyboardVerticalOffset={keyboardVerticalOffset}
+    >
+      {content}
+    </KeyboardAvoidingView>
+  );
 };
 
 const ChatScreen: React.FC<ChatScreenProps> = (props) => {

package/src/types/index.ts

@@ -24,6 +24,11 @@ export interface ChatScreenProps {
   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;
+
   // Typing indicators and input
   typingUsers?: Array<{ id: string; avatar: string; name: string }>;
   onTypingStart?: () => void;
@@ -37,6 +42,7 @@ export interface ChatScreenProps {
 
   // UI Customization
   theme?: {
+    fontFamily?: string;
     colors?: {
       sentMessageTailColor?: string;
       receivedMessageTailColor?: string;
@@ -47,6 +53,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/src/utils/theme.ts

@@ -0,0 +1,37 @@
+import { Platform, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import tw from 'twrnc';
+
+const DEFAULT_INPUT_ICON_CLASS =
+  Platform.OS === 'ios' ? 'h-6 w-6' : 'w-6 h-6';
+
+/** Resolves theme.sizes.inputIconSize (twrnc class string or pixel number). */
+export function getInputIconStyle(
+  size?: string | number,
+  extraClass?: string
+): ViewStyle {
+  if (typeof size === 'number' && size > 0) {
+    return { width: size, height: size };
+  }
+
+  const sizeClass =
+    typeof size === 'string' && size.trim().length > 0
+      ? size.trim()
+      : DEFAULT_INPUT_ICON_CLASS;
+
+  return tw.style(sizeClass, extraClass);
+}
+
+/** Applies theme.fontFamily to any Text / ParsedText style array. */
+export function withFontFamily(
+  style: StyleProp<TextStyle>,
+  fontFamily?: string
+): StyleProp<TextStyle> {
+  if (!fontFamily) {
+    return style;
+  }
+  return [style, { fontFamily }];
+}
+
+export function getFontFamilyStyle(fontFamily?: string): TextStyle | undefined {
+  return fontFamily ? { fontFamily } : undefined;
+}