@ethora/chat-component-rn 26.5.19 → 26.5.21

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

@@ -12,8 +12,8 @@ import {
   View,
 } from 'react-native';
 import { CameraIcon, DocumentIcon, MediaIcon } from '../../../assets/icons';
-import { getElementFont } from '../../../helpers/getElementFont';
-import { IConfig } from '../../../types/types';
+import { useChatSettingState } from '../../../hooks/useChatSettingState';
+import { chatTextStyle } from '../../../helpers/typography';
 
 interface AttachSheetProps {
   visible: boolean;
@@ -22,8 +22,6 @@ interface AttachSheetProps {
   onGallery: () => void;
   onDocument: () => void;
   primaryColor?: string;
-  /** For `typography.elements.attachSheet*` font overrides. */
-  config?: IConfig;
 }
 
 // Starting translateY for the sheet. Larger than any realistic sheet
@@ -38,8 +36,9 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
   onGallery,
   onDocument,
   primaryColor = '#0052CD',
-  config,
 }) => {
+  const { config } = useChatSettingState();
+  const ts = config?.typography?.attachSheet;
   // Pending handler captured on row tap — runs once the EXIT animation
   // finishes so iOS doesn't try to present an image picker over a
   // still-dismissing modal (was the original reason for the
@@ -184,9 +183,7 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
         >
           <TouchableOpacity activeOpacity={1}>
             <View style={styles.grabber} />
-            <Text style={[styles.title, getElementFont(config, 'attachSheetTitle')]}>
-              Attach
-            </Text>
+            <Text style={[styles.title, chatTextStyle(ts?.title)]}>Attach</Text>
             {rows.map(({ label, hint, Icon, handler }, idx) => (
               <TouchableOpacity
                 key={label}
@@ -206,22 +203,8 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
                   <Icon color={primaryColor} width={20} height={20} />
                 </View>
                 <View style={styles.rowText}>
-                  <Text
-                    style={[
-                      styles.rowLabel,
-                      getElementFont(config, 'attachSheetRowLabel'),
-                    ]}
-                  >
-                    {label}
-                  </Text>
-                  <Text
-                    style={[
-                      styles.rowHint,
-                      getElementFont(config, 'attachSheetRowHint'),
-                    ]}
-                  >
-                    {hint}
-                  </Text>
+                  <Text style={[styles.rowLabel, chatTextStyle(ts?.rowLabel)]}>{label}</Text>
+                  <Text style={[styles.rowHint, chatTextStyle(ts?.rowHint)]}>{hint}</Text>
                 </View>
               </TouchableOpacity>
             ))}
@@ -230,14 +213,7 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
               style={styles.cancelRow}
               onPress={onClose}
             >
-              <Text
-                style={[
-                  styles.cancelLabel,
-                  getElementFont(config, 'attachSheetCancel'),
-                ]}
-              >
-                Cancel
-              </Text>
+              <Text style={[styles.cancelLabel, chatTextStyle(ts?.cancelButton)]}>Cancel</Text>
             </TouchableOpacity>
           </TouchableOpacity>
         </Animated.View>

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

@@ -25,6 +25,8 @@ import Button from '../../styled/Button';
 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';
@@ -33,7 +35,6 @@ import DropdownMenu, { MenuOption } from '../../DropdownMenu/DropdownMenu';
 import SelectUsersModal from '../SelectUsersModal/SelectUsersModal';
 import { useToast } from '../../../context/ToastContext';
 import DeleteChatModal from './DeleteChatModal';
-import { getElementFont } from '../../../helpers/getElementFont';
 
 
 interface ChatProfileModalProps {
@@ -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' && (
@@ -314,10 +316,13 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
           size={128}
         />
         <UserInfo>
-          <UserName style={getElementFont(config, 'chatProfileTitle')}>
+          <UserName
+            fontSize={config?.typography?.profile?.title?.fontSize}
+            fontWeight={config?.typography?.profile?.title?.fontWeight as any}
+          >
             {activeRoom.title || activeRoom.name}
           </UserName>
-          <UserStatus>
+          <UserStatus style={getElementFont(config, 'profileStatus')}>
             {activeRoom.usersCnt}{' '}
             {activeRoom.usersCnt > 1 ? 'members' : 'member'}
           </UserStatus>
@@ -330,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>
         )}
@@ -419,13 +428,13 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
                         <Label
                           style={[
                             { fontSize: 16, fontWeight: 600 },
-                            getElementFont(config, 'chatProfileMemberName'),
+                            chatTextStyle(config?.typography?.profile?.memberName),
                           ]}
                         >
                           {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/Modals/styledModalComponents.tsx

@@ -128,10 +128,13 @@ export const UserInfo = styled.View`
   align-items: center;
 `;
 
-export const UserName = styled.Text`
+export const UserName = styled.Text<{
+  fontSize?: number;
+  fontWeight?: string;
+}>`
   color: #141414;
-  font-size: 24px;
-  font-weight: 400;
+  font-size: ${({ fontSize }) => fontSize ?? 24}px;
+  font-weight: ${({ fontWeight }) => fontWeight ?? 400};
 `;
 
 export const UserStatus = styled.Text`

package/src/components/styled/SendInput.tsx

@@ -121,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
@@ -238,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,
@@ -256,6 +277,8 @@ const SendInput: React.FC<SendInputProps> = ({
       ]);
     } catch (err) {
       console.error('DocumentPicker error:', err);
+    } finally {
+      pickingDocRef.current = false;
     }
   };
 
@@ -496,6 +519,8 @@ const SendInput: React.FC<SendInputProps> = ({
                 accessibilityLabel="chat-message-input"
                 isFocused={isFocused}
                 color={config?.colors?.primary}
+                fontSize={config?.typography?.input?.fontSize}
+                fontWeight={config?.typography?.input?.fontWeight as any}
                 placeholder="Type message"
                 placeholderTextColor="#999"
                 value={message}
@@ -521,11 +546,11 @@ const SendInput: React.FC<SendInputProps> = ({
                 // the content-sized input.
                 style={[
                   {
-                    minHeight: config?.inputLayout?.minHeight ?? 40,
-                    maxHeight: config?.inputLayout?.maxHeight ?? 120,
+                    minHeight: config?.typography?.input?.minHeight ?? 40,
+                    maxHeight: config?.typography?.input?.maxHeight ?? 120,
                     flex: 1,
                   },
-                  getElementFont(config, 'input'),
+                  getElementFont(config, 'inputText'),
                 ]}
               />
             </>
@@ -598,7 +623,6 @@ const SendInput: React.FC<SendInputProps> = ({
                 : handleSendClick;
             const disabled = !isRecording && !showMic && !hasContent;
             const filled = isRecording || hasContent || showMic;
-            const sendSize = config?.inputLayout?.sendButtonSize ?? 40;
             return (
               <Button
                 testID={showMic ? 'chat-record-button' : 'chat-send-button'}
@@ -613,9 +637,9 @@ const SendInput: React.FC<SendInputProps> = ({
                   )
                 }
                 style={{
-                  width: sendSize,
-                  height: sendSize,
-                  borderRadius: sendSize / 2,
+                  width: config?.typography?.input?.sendButtonSize ?? 40,
+                  height: config?.typography?.input?.sendButtonSize ?? 40,
+                  borderRadius: 50,
                   alignItems: 'center',
                   justifyContent: 'center',
                   marginLeft: 0,
@@ -636,7 +660,6 @@ const SendInput: React.FC<SendInputProps> = ({
           onGallery={handleGallerySelection}
           onDocument={handleFileSelection}
           primaryColor={getIconColor(config)}
-          config={config}
         />
       </InputContainer>
   );

package/src/components/styled/StyledComponents.ts

@@ -75,10 +75,13 @@ export const ChatContainerHeaderInfo = styled.View`
   gap: 2px;
 `;
 
-export const ChatContainerHeaderLabel = styled.Text`
+export const ChatContainerHeaderLabel = styled.Text<{
+  fontSize?: number;
+  fontWeight?: string;
+}>`
   color: #141414;
-  font-weight: 600;
-  font-size: 16px;
+  font-weight: ${({ fontWeight }) => fontWeight ?? 600};
+  font-size: ${({ fontSize }) => fontSize ?? 16}px;
   text-align: left;
   overflow: hidden;
   max-width: 100%;

package/src/components/styled/StyledInputComponents/StyledInputComponents.tsx

@@ -45,6 +45,8 @@ export const MessageInputContainer = styled.View`
 export const MessageInput = styled.TextInput<{
   isFocused?: boolean;
   color?: string;
+  fontSize?: number;
+  fontWeight?: string;
 }>`
   padding: 8px 14px;
   border-radius: 20px;
@@ -52,7 +54,8 @@ export const MessageInput = styled.TextInput<{
   border-color: ${(props) =>
     props.isFocused ? props.color || '#0052CD' : 'transparent'};
   color: #141414;
-  font-size: 16px;
+  font-size: ${({ fontSize }) => fontSize ?? 16}px;
+  ${({ fontWeight }) => (fontWeight ? `font-weight: ${fontWeight};` : '')}
   background-color: #f5f7f9;
   flex: 1;
   /* No explicit line-height: on iOS a line-height larger than the

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/helpers/parseMessageBody.tsx

@@ -8,6 +8,7 @@ import {
   ScrollView,
   StyleProp,
   ViewStyle,
+  TextStyle,
 } from 'react-native';
 
 let elementKeyCounter = 0;
@@ -292,7 +293,15 @@ const renderMarkdownTableRN = (
   );
 };
 
-export const parseMessageBody = (text: string): JSX.Element => {
+// `baseStyle` is applied to the normal body-text leaves (paragraphs, list
+// items, quotes) so a host can configure message font size / weight. Headings
+// and code blocks keep their own semantic sizes. Markdown wraps text in
+// <View>s, which break RN's Text-style inheritance — so the size has to be set
+// on the leaf <Text>s here rather than on the bubble wrapper.
+export const parseMessageBody = (
+  text: string,
+  baseStyle?: TextStyle
+): JSX.Element => {
   if (typeof text !== 'string') {
     return <View />;
   }
@@ -339,14 +348,14 @@ export const parseMessageBody = (text: string): JSX.Element => {
                 <View style={[styles.checkboxBox, item.checked && { backgroundColor: '#e8f3ff', borderColor: '#0a66c2' }]}>
                   {item.checked ? <Text style={styles.checkboxTick}>✓</Text> : null}
                 </View>
-                <Text style={{ flex: 1 }}>{parseInline(item.content)}</Text>
+                <Text style={[{ flex: 1 }, baseStyle]}>{parseInline(item.content)}</Text>
               </View>
             );
           } else {
             contentEl = (
               <View key={`ulitem-${elementKeyCounter++}`} style={styles.listItemRow}>
                 <Text style={styles.listMarker}>{'\u2022'}</Text>
-                <Text style={{ flex: 1 }}>{parseInline(item.content)}</Text>
+                <Text style={[{ flex: 1 }, baseStyle]}>{parseInline(item.content)}</Text>
               </View>
             );
           }
@@ -493,7 +502,7 @@ export const parseMessageBody = (text: string): JSX.Element => {
       flushList();
       elements.push(
         <View key={`p-${elementKeyCounter++}`} style={styles.paragraph}>
-          <Text>{parseInline(trimmedLine)}</Text>
+          <Text style={baseStyle}>{parseInline(trimmedLine)}</Text>
         </View>
       );
     } else {

package/src/helpers/typography.ts

@@ -0,0 +1,19 @@
+import type { TextStyle } from 'react-native';
+import type { ChatTextStyle } from '../types/types';
+
+/**
+ * Turn a `ChatTextStyle` config (fontSize / fontWeight) into a partial RN
+ * `TextStyle` that can be spread on top of a base style. Only sets fields the
+ * consumer actually provided, so it never clobbers a component default with
+ * `undefined`. Pair with a base style: `style={[styles.title, chatTextStyle(cfg)]}`.
+ *
+ * Note: with a custom font, `fontWeight` only renders visibly when
+ * `typography.weightFamilies` is configured — the global font patch
+ * (useChatFonts) maps the weight to the matching family variant.
+ */
+export const chatTextStyle = (cfg?: ChatTextStyle): TextStyle => {
+  const s: TextStyle = {};
+  if (cfg?.fontSize != null) {s.fontSize = cfg.fontSize;}
+  if (cfg?.fontWeight != null) {s.fontWeight = cfg.fontWeight;}
+  return s;
+};

package/src/hooks/useChatFonts.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Text, TextInput } from 'react-native';
+import { StyleSheet, Text, TextInput } from 'react-native';
 import type { TypographyConfig } from '../types/types';
 
 /**
@@ -25,6 +25,8 @@ import type { TypographyConfig } from '../types/types';
 export function useChatFonts(typography?: TypographyConfig): boolean {
   const [ready, setReady] = useState(!typography?.fonts?.length);
 
+  // Apply synchronously on render (not just in the effect) so the factory
+  // patch sees the active family/weights before the first child paints.
   applyDefaultFont(typography);
 
   useEffect(() => {
@@ -76,23 +78,78 @@ export function useChatFonts(typography?: TypographyConfig): boolean {
 }
 
 /**
- * The family currently applied as the chat-wide default. Read at render time
- * by the patched components below, so updating it (then triggering a re-render)
- * restyles the whole tree.
+ * The family currently applied as the chat-wide default. Read at element-
+ * creation time by the patched JSX factories below, so updating it (then
+ * triggering a re-render) restyles the whole tree.
  */
 let activeFamily: string | undefined;
 
+/**
+ * Per-weight families (regular/medium/semibold/bold). When set, the factory
+ * patch maps a Text's effective `fontWeight` to the matching family so custom
+ * fonts render intermediate weights correctly — RN can't synthesise 500/600
+ * from a single font file (only fake-bold ~700), so each weight needs its own
+ * loaded family. This is why a bare `fontWeight: '500'` looked like it did
+ * nothing before: there was no medium family to switch to.
+ */
+let activeWeightFamilies: TypographyConfig['weightFamilies'] | undefined;
+
+/**
+ * Resolve a desired weight to a configured family variant. Returns undefined
+ * when there's no variant for that tier (so we leave the default family /
+ * weight untouched rather than guessing).
+ */
+function familyForWeight(weight: unknown): string | undefined {
+  const wf = activeWeightFamilies;
+  if (!wf || weight == null) {return undefined;}
+  let w: number;
+  if (typeof weight === 'number') {
+    w = weight;
+  } else if (weight === 'bold') {
+    w = 700;
+  } else if (weight === 'normal') {
+    w = 400;
+  } else {
+    const n = parseInt(String(weight), 10);
+    w = Number.isFinite(n) ? n : 400;
+  }
+  if (w >= 700) {return wf.bold;}
+  if (w >= 600) {return wf.semibold;}
+  if (w >= 500) {return wf.medium;}
+  return wf.regular;
+}
 
+/**
+ * Build the style array for a Text/TextInput element: the default family as the
+ * lowest-priority layer (explicit per-component styles still win), and — when
+ * per-weight families are configured — the variant family that matches the
+ * element's effective `fontWeight` as a top layer (with the numeric weight
+ * cleared so the OS doesn't also try to synthesise on top). An explicit
+ * per-element `fontFamily` override is respected.
+ */
+function styleForElement(style: any): any {
+  const base = [{ fontFamily: activeFamily }, style];
+  if (!activeWeightFamilies) {return base;}
+  const flat = (StyleSheet.flatten(style) || {}) as any;
+  if (flat.fontFamily && flat.fontFamily !== activeFamily) {return base;}
+  const fam = familyForWeight(flat.fontWeight);
+  if (!fam) {return base;}
+  return [{ fontFamily: activeFamily }, style, { fontFamily: fam, fontWeight: 'normal' }];
+}
+
+/**
+ * Wrap a JSX factory (`jsx`/`jsxs`/`jsxDEV`/`createElement`) so every Text /
+ * TextInput it creates gets the chat-wide font injected. We patch the factory
+ * rather than `Text.render` because render-wrapping a `forwardRef` component is
+ * fragile across React 19 / RN 0.81; intercepting element creation is version-
+ * independent and catches styled-components' inner Text elements too.
+ */
 function wrapFactory(orig: any): any {
   if (typeof orig !== 'function') return orig;
   if (orig.__ethoraFontWrapped) return orig;
   const wrapped = function (this: any, type: any, props: any, ...rest: any[]) {
-    if (
-      activeFamily &&
-      props &&
-      (type === Text || type === TextInput)
-    ) {
-      props = { ...props, style: [{ fontFamily: activeFamily }, props.style] };
+    if (activeFamily && props && (type === Text || type === TextInput)) {
+      props = { ...props, style: styleForElement(props.style) };
     }
     return orig.call(this, type, props, ...rest);
   };
@@ -145,9 +202,10 @@ function ensurePatched(): void {
 }
 
 /**
- * Set (or clear) the chat-wide default font family.
+ * Set (or clear) the chat-wide default font family + per-weight families.
  */
 function applyDefaultFont(typography?: TypographyConfig): void {
   activeFamily = typography?.fontFamily;
+  activeWeightFamilies = typography?.weightFamilies;
   if (activeFamily) ensurePatched();
 }

package/src/main.ts

@@ -47,4 +47,5 @@ export type {
   MessageProps,
   TypographyConfig,
   RNFontSource,
+  ChatTextStyle,
 } from './types/types';