@ethora/chat-component-rn 26.5.20 → 26.5.21

package/src/components/MainComponents/ChatHeader.tsx

@@ -28,6 +28,8 @@ import { useRoomState } from '../../hooks/useRoomState';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { View, StyleSheet, Text, Keyboard } from 'react-native';
 import { getIconColor } from '../../helpers/getIconColor';
+import { resolveHeaderHeight } from '../../helpers/headerLayout';
+import { getElementFont } from '../../helpers/getElementFont';
 
 interface ChatHeaderProps {
   currentRoom: IRoom;
@@ -74,9 +76,17 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
     [dispatch]
   );
 
+  // Fixed band height shared with the modal headers. Zero vertical padding
+  // here so `height` defines the band exactly (content centers via the
+  // styled `align-items: center`); the styled 12px vertical padding would
+  // otherwise add on top of it.
+  const headerHeight = resolveHeaderHeight(config?.headerLayout?.height);
+
   return (
     <>
-      <ChatContainerHeader>
+      <ChatContainerHeader
+        style={{ height: headerHeight, paddingTop: 0, paddingBottom: 0 }}
+      >
         {handleBackClick && !config?.headerChatMenu ? (
           <View style={styles.leftContainer}>
             <Button
@@ -159,7 +169,9 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
                 {composing ? (
                   <Composing usersTyping={currentRoom?.composingList} />
                 ) : config?.disableUserCount ? undefined : (
-                  <ChatContainerHeaderLabel style={styles.subLabel}>
+                  <ChatContainerHeaderLabel
+                    style={[styles.subLabel, getElementFont(config, 'headerSubtitle')]}
+                  >
                     <Text>{`${currentRoom?.usersCnt} users`}</Text>
                   </ChatContainerHeaderLabel>
                 )}

package/src/components/Modals/AttachSheet/AttachSheet.tsx

@@ -12,7 +12,6 @@ import {
   View,
 } from 'react-native';
 import { CameraIcon, DocumentIcon, MediaIcon } from '../../../assets/icons';
-import { IConfig } from '../../../types/types';
 import { useChatSettingState } from '../../../hooks/useChatSettingState';
 import { chatTextStyle } from '../../../helpers/typography';
 
@@ -23,7 +22,6 @@ interface AttachSheetProps {
   onGallery: () => void;
   onDocument: () => void;
   primaryColor?: string;
-  /** For `typography.elements.attachSheet*` font overrides. */
 }
 
 // Starting translateY for the sheet. Larger than any realistic sheet
@@ -206,7 +204,7 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
                 </View>
                 <View style={styles.rowText}>
                   <Text style={[styles.rowLabel, chatTextStyle(ts?.rowLabel)]}>{label}</Text>
-                  <Text style={styles.rowHint}>{hint}</Text>
+                  <Text style={[styles.rowHint, chatTextStyle(ts?.rowHint)]}>{hint}</Text>
                 </View>
               </TouchableOpacity>
             ))}

package/src/components/Modals/ChatProfileModal/ChatProfileModal.tsx

@@ -26,6 +26,7 @@ import { DeleteIcon, MoreIcon, QrIcon } from '../../../assets/icons';
 import Switch from '../../MainComponents/Switch';
 import { useChatSettingState } from '../../../hooks/useChatSettingState';
 import { chatTextStyle } from '../../../helpers/typography';
+import { getElementFont } from '../../../helpers/getElementFont';
 import { deleteRoomMember } from '../../../networking/api-requests/rooms.api';
 import { RoomMember } from '../../../types/models/room.model';
 import { setActiveModal, setSelectedUser } from '../../../roomStore/chatSettingsSlice';
@@ -268,6 +269,7 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
       <ModalHeaderComponent
         handleCloseModal={handleCloseModal}
         headerTitle={'Chat Profile'}
+        titleStyle={chatTextStyle(config?.typography?.profile?.screenTitle)}
         rightMenu={
           <>
             {activeRoom?.type === 'public' && (
@@ -320,7 +322,7 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
           >
             {activeRoom.title || activeRoom.name}
           </UserName>
-          <UserStatus>
+          <UserStatus style={getElementFont(config, 'profileStatus')}>
             {activeRoom.usersCnt}{' '}
             {activeRoom.usersCnt > 1 ? 'members' : 'member'}
           </UserStatus>
@@ -333,13 +335,17 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
         )}
         {!config?.disableChatInfo?.disableDescription && (
           <BorderedContainer>
-            <LabelData>Description</LabelData>
+            <LabelData style={getElementFont(config, 'profileSectionLabel')}>
+              Description
+            </LabelData>
             <Label>{activeRoom?.description || '—'}</Label>
           </BorderedContainer>
         )}
         {!config?.disableChatInfo?.disableType && (
           <BorderedContainer>
-            <LabelData>Chat type</LabelData>
+            <LabelData style={getElementFont(config, 'profileSectionLabel')}>
+              Chat type
+            </LabelData>
             <Label>{activeRoom.type || '—'}</Label>
           </BorderedContainer>
         )}
@@ -428,7 +434,7 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
                           {user.firstName} {user.lastName}
                         </Label>
                         {user.last_active && (
-                          <LabelData>
+                          <LabelData style={getElementFont(config, 'profileSectionLabel')}>
                             {new Date(user.last_active * 1000).toLocaleString()}
                           </LabelData>
                         )}

package/src/components/Modals/FilePreviewModal/FilePreviewModal.tsx

@@ -6,6 +6,8 @@ import {
 } from '../styledModalComponents';
 import { SaveIcon } from '../../../assets/icons';
 import ModalHeaderComponent from '../ModalHeaderComponent';
+import { useChatSettingState } from '../../../hooks/useChatSettingState';
+import { chatTextStyle } from '../../../helpers/typography';
 import { useDispatch, useSelector } from 'react-redux';
 import Button from '../../styled/Button';
 import { RootState } from '../../../roomStore';
@@ -18,6 +20,7 @@ import {
   Platform,
   TouchableOpacity,
   StyleSheet,
+  Share,
 } from 'react-native';
 import { useVideoPlayer, VideoView } from 'expo-video';
 import { PlayIcon } from '../../../assets/icons';
@@ -109,6 +112,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
 }) => {
   const dispatch = useDispatch();
   const { showToast } = useToast();
+  const { config } = useChatSettingState();
 
   // Cache the SAF directory the user granted so saving several documents
   // in a row doesn't re-prompt for a folder every time (Android only).
@@ -204,13 +208,25 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
         await FileSystem.writeAsStringAsync(destUri, base64, {
           encoding: FileSystem.EncodingType.Base64,
         });
+
+        showToast({
+          id: Date.now().toString(),
+          title: 'Success',
+          message: 'Save successful',
+          type: 'success',
+        });
+        return;
       }
 
-      showToast({
-        id: Date.now().toString(),
-        title: 'Success',
-        message: 'Save successful',
-        type: 'success',
+      // iOS (and any non-Android): there is no app-writable "Downloads"
+      // folder, and MediaLibrary only accepts images/videos — which is why
+      // documents previously hit the success toast without ever being
+      // saved. Present the system share sheet so the user can "Save to
+      // Files", AirDrop, etc. The sheet itself is the confirmation (the
+      // user may cancel), so we don't show a "Save successful" toast here.
+      await Share.share({
+        url: download.uri,
+        title: fileName,
       });
     } catch (err) {
       console.error('Error saving file:', err);
@@ -377,6 +393,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
       <ModalHeaderComponent
         handleCloseModal={closeModal}
         headerTitle={'File preview'}
+        titleStyle={chatTextStyle(config?.typography?.profile?.screenTitle)}
         rightMenu={
           <>
             <Button onPress={saveClick}>

package/src/components/Modals/ModalHeaderComponent.tsx

@@ -6,12 +6,16 @@ import {
 } from './styledModalComponents';
 import { BackIcon, MoreIcon, QrIcon } from '../../assets/icons';
 import Button from '../styled/Button';
-import { Text } from 'react-native';
+import { Text, StyleProp, TextStyle } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { resolveHeaderHeight } from '../../helpers/headerLayout';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
 
 interface ModalHeaderComponentProps {
   handleCloseModal?: any;
   headerTitle?: string;
+  /** Optional size/weight override for the header title text. */
+  titleStyle?: StyleProp<TextStyle>;
   rightMenu?: React.ReactNode;
   leftMenu?: React.ReactNode;
 }
@@ -19,6 +23,7 @@ interface ModalHeaderComponentProps {
 const ModalHeaderComponent: React.FC<ModalHeaderComponentProps> = ({
   handleCloseModal,
   headerTitle,
+  titleStyle,
   rightMenu,
   leftMenu,
 }) => {
@@ -28,15 +33,27 @@ const ModalHeaderComponent: React.FC<ModalHeaderComponentProps> = ({
   // mounted by ReduxWrapper, so this reads the live per-device inset
   // (notch / Dynamic Island / nothing).
   const insets = useSafeAreaInsets();
+  const { config } = useChatSettingState();
+  // Same band height as the in-chat header, sitting BELOW the status-bar
+  // inset. Total = inset + band; paddingTop carries the inset and the band
+  // is the content area (centered via HeaderContainer's align-items:center),
+  // so both headers match in visible height regardless of device notch.
+  const band = resolveHeaderHeight(config?.headerLayout?.height);
   return (
-    <HeaderContainer style={{ paddingTop: insets.top + 8 }}>
+    <HeaderContainer
+      style={{
+        paddingTop: insets.top,
+        paddingBottom: 0,
+        height: insets.top + band,
+      }}
+    >
       <HeaderLeft>
         {leftMenu ? (
           leftMenu
         ) : (
           <>
             <Button EndIcon={<BackIcon />} onPress={handleCloseModal} />
-            <Text>{headerTitle ?? 'Go back'}</Text>
+            <Text style={titleStyle}>{headerTitle ?? 'Go back'}</Text>
           </>
         )}
       </HeaderLeft>

package/src/components/styled/SendInput.tsx

@@ -13,6 +13,7 @@ import { KeyboardAvoidingView, Platform, View, Text, TouchableOpacity, Alert, Li
 import AttachSheet from '../Modals/AttachSheet/AttachSheet';
 import { MediaFilePreview } from './MediaFilePreview';
 import { getIconColor } from '../../helpers/getIconColor';
+import { getElementFont } from '../../helpers/getElementFont';
 import * as ImagePicker from 'expo-image-picker';
 import * as DocumentPicker from 'expo-document-picker';
 import * as ImageManipulator from 'expo-image-manipulator';
@@ -120,6 +121,13 @@ const SendInput: React.FC<SendInputProps> = ({
   // (versus duplicating the send with stale closure state).
   const sendingRef = useRef(false);
 
+  // Re-entry guard for the document picker. expo-document-picker keeps a
+  // single native `pickingContext`; invoking getDocumentAsync again while a
+  // pick is still in flight throws "Different document picking in progress"
+  // (iOS, bug #4). A double-fire happens on a fast double-tap of the
+  // "Document" row or a dev-mode double-run of the sheet's close callback.
+  const pickingDocRef = useRef(false);
+
   const handleFileSelect = (files: MediaFile[]) => {
     // Enforce the upload size cap before anything reaches the network.
     // The backend rejects oversized bodies with HTTP 413; catching it
@@ -237,7 +245,21 @@ const SendInput: React.FC<SendInputProps> = ({
   };
 
   const handleFileSelection = async () => {
+    // Drop overlapping invocations — a second getDocumentAsync while the
+    // first is still presented throws PickingInProgressException on iOS.
+    if (pickingDocRef.current) {return;}
+    pickingDocRef.current = true;
     try {
+      // Let the attach-sheet's modal finish its NATIVE dismissal before we
+      // present the picker. The sheet fires this handler right after its
+      // slide-out animation, but the underlying RN Modal view-controller
+      // dismissal is async — presenting the document picker over a still-
+      // dismissing modal makes iOS tear it down without a cancel callback,
+      // which strands expo-document-picker's pickingContext and makes every
+      // subsequent open throw "Different document picking in progress".
+      if (Platform.OS === 'ios') {
+        await new Promise((resolve) => setTimeout(resolve, 350));
+      }
       const result = await DocumentPicker.getDocumentAsync({
         type: '*/*',
         multiple: false,
@@ -255,6 +277,8 @@ const SendInput: React.FC<SendInputProps> = ({
       ]);
     } catch (err) {
       console.error('DocumentPicker error:', err);
+    } finally {
+      pickingDocRef.current = false;
     }
   };
 
@@ -520,11 +544,14 @@ const SendInput: React.FC<SendInputProps> = ({
                 // the text had dropped). minHeight keeps the 40px tap
                 // target; the row's align-items:center vertically centres
                 // the content-sized input.
-                style={{
-                  minHeight: config?.typography?.input?.minHeight ?? 40,
-                  maxHeight: config?.typography?.input?.maxHeight ?? 120,
-                  flex: 1,
-                }}
+                style={[
+                  {
+                    minHeight: config?.typography?.input?.minHeight ?? 40,
+                    maxHeight: config?.typography?.input?.maxHeight ?? 120,
+                    flex: 1,
+                  },
+                  getElementFont(config, 'inputText'),
+                ]}
               />
             </>
           )}

package/src/helpers/getElementFont.ts

@@ -0,0 +1,25 @@
+import type { TextStyle } from 'react-native';
+import type { IConfig, TypographyConfig } from '../types/types';
+
+type ElementKey = keyof NonNullable<TypographyConfig['elements']>;
+
+/**
+ * Per-element font override from `config.typography.elements`, as an RN
+ * style object suitable for appending to a component's `style` (so it
+ * wins over the built-in size/weight but touches nothing else).
+ * Returns undefined when the element isn't configured — appending
+ * undefined to a style array is a no-op.
+ */
+export const getElementFont = (
+  config: IConfig | undefined,
+  element: ElementKey
+): TextStyle | undefined => {
+  const override = config?.typography?.elements?.[element];
+  if (!override) {return undefined;}
+  const style: TextStyle = {};
+  if (override.fontSize != null) {style.fontSize = override.fontSize;}
+  if (override.fontWeight != null) {style.fontWeight = override.fontWeight;}
+  return style.fontSize != null || style.fontWeight != null
+    ? style
+    : undefined;
+};

package/src/helpers/headerLayout.ts

@@ -0,0 +1,30 @@
+/** @format */
+
+/**
+ * Default (and minimum) height in px of the header content band — the bar
+ * itself, NOT counting the status-bar safe-area inset that sits above it.
+ *
+ * This single value is the "common denominator" shared by BOTH headers:
+ *   • the in-chat header (ChatHeader / ChatContainerHeader), and
+ *   • the full-screen modal header (ModalHeaderComponent / HeaderContainer)
+ * so they render at the same visible height below the status bar.
+ *
+ * It's also the floor: 64px comfortably fits the 40px avatar / back button
+ * plus breathing room. A smaller band clips that content, so configured
+ * values at or below this are ignored (see `resolveHeaderHeight`).
+ */
+export const DEFAULT_HEADER_HEIGHT = 64;
+
+/**
+ * Resolve the effective header band height from an optional config override.
+ *
+ * The override can only make the header TALLER, never shorter than the
+ * default — a value <= DEFAULT_HEADER_HEIGHT (or non-numeric) is ignored and
+ * the default is used, so a too-small number (e.g. 10) can't collapse the
+ * bar and break its layout. Only a value strictly greater than the default
+ * takes effect.
+ */
+export const resolveHeaderHeight = (height?: number): number =>
+  typeof height === 'number' && height > DEFAULT_HEADER_HEIGHT
+    ? height
+    : DEFAULT_HEADER_HEIGHT;

package/src/types/types.ts

@@ -300,6 +300,8 @@ export interface TypographyConfig {
   };
   /** Chat profile screen (opens when tapping the room name in the header). */
   profile?: {
+    /** The "Chat Profile" bar title at the very top of the profile screen. Default ~system (small). */
+    screenTitle?: ChatTextStyle;
     /** Big room-name title at the top of the profile screen. Default 24 / "400". */
     title?: ChatTextStyle;
     /** Member name rows. Default 16 / "600". */
@@ -311,9 +313,29 @@ export interface TypographyConfig {
     title?: ChatTextStyle;
     /** Row labels (Camera / Gallery / Document). Default 16 / "500". */
     rowLabel?: ChatTextStyle;
+    /** Grey hint under each row. Default 12. */
+    rowHint?: ChatTextStyle;
     /** Cancel button. Default 16 / "600". */
     cancelButton?: ChatTextStyle;
   };
+
+  /**
+   * Generic per-element font overrides addressed by key, applied via the
+   * `getElementFont` helper as the highest-priority style layer. These target
+   * smaller text elements that don't have a dedicated key above:
+   *   - `headerSubtitle`      — the "N users" / typing line in the chat header
+   *   - `inputText`           — the message composer input (overrides `input`)
+   *   - `profileStatus`       — the "N members" line on the profile screen
+   *   - `profileSectionLabel` — profile field labels ("Description", "Chat
+   *                             type") and the member last-active line
+   * When both this and a dedicated key target the same element, this wins.
+   */
+  elements?: Partial<
+    Record<
+      'headerSubtitle' | 'inputText' | 'profileStatus' | 'profileSectionLabel',
+      ChatTextStyle
+    >
+  >;
 }
 
 export interface IConfig {
@@ -358,6 +380,20 @@ export interface IConfig {
   headerLogo?: string | React.ReactElement;
 
   // ----- header / nav -----
+  /**
+   * Sizing for BOTH headers (the in-chat header and the full-screen modal
+   * headers like Chat Profile), kept in sync so they render at the same
+   * visible height.
+   */
+  headerLayout?: {
+    /**
+     * Height in px of the header bar (the band below the status bar).
+     * Default 64. Acts as a floor too: values at or below the default are
+     * ignored so a too-small number can't collapse the bar — only a larger
+     * value takes effect.
+     */
+    height?: number;
+  };
   disableHeader?: boolean;
   disableMedia?: boolean;
   /**