@smart-link/rn-im 1.1.5 → 1.1.6

package/dist/pages/message/components/MessageItem.js

@@ -10,9 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { ConversationType, MessageStatus, PayloadType, isNotifyMessage, MessagePanelActions, } from '@smart-link/im-base';
-import { Checkbox, dp, useTheme } from '@smart-link/rn-ui';
+import { CaihText, Checkbox, dp, useTheme } from '@smart-link/rn-ui';
 import React, { memo } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, Dimensions, ActivityIndicator, TouchableWithoutFeedback, } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, Dimensions, ActivityIndicator, TouchableWithoutFeedback, } from 'react-native';
 import ChatAvatar from '../../../components/ChatAvatar/ChatAvatar';
 import useFormatMsgTime from '../../../hooks/useFormatMsgTime';
 import BusiNotifyCard from './BusiNotifyCard';
@@ -41,7 +41,7 @@ const MessageItem = (_a) => {
     return (<View style={styles.root} onLayout={(e) => {
             onLayoutItem(message, index, e);
         }}>
-            {showTimeLine && <Text style={styles.time}>{time}</Text>}
+            {showTimeLine && <CaihText style={styles.time}>{time}</CaihText>}
             {isB2C && <BusiNotifyCard payload={message.payload}/>}
             {isNotify && <PayloadNotify {...message}/>}
             {isUndo && <MessageUndo messageSeq={message.messageSeq} text={mine ? t('youWithdrawMsg') : `"${message.messageFromName}" ${t('withdrawMsg')}`} undoText={message.payload.text} haveBackgroundImage={false} edit={mine && message.payloadType === 'text'}/>}
@@ -69,10 +69,10 @@ const MessageItem = (_a) => {
                         : 0,
                 },
             ]}>
-                            {!mine && message.conversationType !== ConversationType.C2C && (<Text style={[styles.name, {
+                            {!mine && message.conversationType !== ConversationType.C2C && (<CaihText style={[styles.name, {
                         marginLeft: notArrow ? 0 : dp(10),
                         marginBottom: dp(5),
-                    }]}>{message.messageFromName}</Text>)}
+                    }]}>{message.messageFromName}</CaihText>)}
                             <View>
                                 <MessagePayload style={[
                 styles.payload,
@@ -84,17 +84,17 @@ const MessageItem = (_a) => {
                 e.stopPropagation();
                 e.preventDefault();
                 onPressPopover(message, e.nativeEvent);
-            }} onLongPress={(e, layout) => {
+            }} onLongPress={(e, ref) => {
                 e.stopPropagation();
                 e.preventDefault();
-                onLongPressPopover(message, e.nativeEvent, layout);
+                onLongPressPopover(message, ref);
             }}/>
                                 {isC2C && mine && <MessageReceiptStatus {...message}/>}
                             </View>
                         </View>
-                        {message.messageStatus === MessageStatus.EMIT_ERROR && (<Text style={{ alignSelf: 'center' }}>
+                        {message.messageStatus === MessageStatus.EMIT_ERROR && (<CaihText style={{ alignSelf: 'center' }}>
                                 <Icon name="info" size={dp(20)} color={theme.errorColor}/>
-                            </Text>)}
+                            </CaihText>)}
                         {mine && message.messageStatus === MessageStatus.EMITTING && (<ActivityIndicator size="small" color={'#666'} animating={true}/>)}
                         {!mine && isMultiple && message.payloadType !== 'voice' && (<Checkbox checked={isMultipleChecked} style={[styles.multipleCheckbox, styles.multipleCheckboxRight]}/>)}
                     </View>
@@ -102,7 +102,7 @@ const MessageItem = (_a) => {
             {message.messageStatus === MessageStatus.EMIT_ERROR && (<>
                     <View style={{ height: dp(10) }}/>
                     <View style={styles.errorInfo}>
-                        <Text style={styles.errorInfoText}>{t('sendMsgFail')}</Text>
+                        <CaihText style={styles.errorInfoText}>{t('sendMsgFail')}</CaihText>
                         <TouchableOpacity activeOpacity={0.5} onPress={() => {
                 var _a;
                 const imManager = getImManager();
@@ -114,7 +114,7 @@ const MessageItem = (_a) => {
                     offset: 0,
                 });
             }}>
-                            <Text style={styles.errorInfoSend}>{t('resendMsg')}</Text>
+                            <CaihText style={styles.errorInfoSend}>{t('resendMsg')}</CaihText>
                         </TouchableOpacity>
                     </View>
                 </>)}

package/dist/pages/message/components/MessageItemQuote.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
-import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
+import { StyleSheet, View, TouchableOpacity } from 'react-native';
 import ChatAvatar from '../../../components/ChatAvatar/ChatAvatar';
-import { dp } from '@smart-link/rn-ui';
+import { CaihText, dp } from '@smart-link/rn-ui';
 // @ts-ignore
 import Icon from 'react-native-vector-icons/MaterialIcons';
 const MessageItemQuote = memo(props => {
@@ -10,8 +10,8 @@ const MessageItemQuote = memo(props => {
             <ChatAvatar id={quoteId} url={quoteAvatars} size={dp(32)} name={''}/>
             <View style={styles.width10}/>
             <View style={styles.left}>
-                <Text style={styles.name} numberOfLines={1}>{quoteTitle}</Text>
-                <Text style={styles.text} numberOfLines={1}>{quoteText}</Text>
+                <CaihText style={styles.name} numberOfLines={1}>{quoteTitle}</CaihText>
+                <CaihText style={styles.text} numberOfLines={1}>{quoteText}</CaihText>
             </View>
             <TouchableOpacity style={styles.delete} onPress={onDeleteQuote}>
                 <Icon name="clear" color="#666" size={dp(18)}/>

package/dist/pages/message/components/MessageItemTips.js

@@ -1,6 +1,6 @@
-import { dp } from '@smart-link/rn-ui';
+import { CaihText, dp } from '@smart-link/rn-ui';
 import React, { memo } from 'react';
-import { Image, StyleSheet, Text, TouchableOpacity } from 'react-native';
+import { Image, StyleSheet, TouchableOpacity } from 'react-native';
 import FontAwesome from "react-native-vector-icons/FontAwesome";
 import { shadowStyle } from "../../../components/styles";
 import { getImManager, getLogo } from "../../../init";
@@ -12,10 +12,10 @@ const MessageItemTips = memo(props => {
             imManager.store.dispatch(MessagePanelActions.focusTipsMessage(imManager));
         }}>
             <Image style={styles.logo} source={getLogo()}/>
-            <Text style={styles.text}>{text}</Text>
-            <Text style={styles.icon}>
+            <CaihText style={styles.text}>{text}</CaihText>
+            <CaihText style={styles.icon}>
                 <FontAwesome name="angle-double-up" color="#777" size={17}/>
-            </Text>
+            </CaihText>
         </TouchableOpacity>);
 });
 const styles = StyleSheet.create({

package/dist/pages/message/components/MessageOption.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { IMessage } from '@smart-link/im-base';
-import { NativeEventLayout } from '../../../pages';
 type MessageOptionProps = {
     message?: IMessage;
     visible: boolean;
@@ -8,9 +7,9 @@ type MessageOptionProps = {
         x: number;
         y: number;
     };
-    nativeEventLayout?: NativeEventLayout;
+    touchTarget?: any;
     onClose: () => void;
     setLoading: (loading: boolean) => void;
 };
-declare const _default: React.MemoExoticComponent<({ visible, message, nativeEventLayout, touchPoint, onClose, setLoading }: MessageOptionProps) => React.JSX.Element | null>;
+declare const _default: React.MemoExoticComponent<({ visible, message, touchTarget, onClose, setLoading }: MessageOptionProps) => React.JSX.Element | null>;
 export default _default;

package/dist/pages/message/components/MessageOption.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import React, { memo, useRef } from 'react';
-import { Animated, Text, StyleSheet, TouchableOpacity, View, TouchableWithoutFeedback, Dimensions, StatusBar, Modal, } from 'react-native';
+import { Animated, StyleSheet, TouchableOpacity, View, TouchableWithoutFeedback, Dimensions, Modal, } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
 import { getMessageActionKeys, MessageActions, MessagePanelActions, MessageStatus, PayloadType, ConversationType, } from '@smart-link/im-base';
 import AntDesign from 'react-native-vector-icons/AntDesign';
@@ -16,7 +16,7 @@ import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
-import { dp, Toast, useNavigation, Modal as Dialog } from '@smart-link/rn-ui';
+import { dp, Toast, useNavigation, Modal as Dialog, CaihText } from '@smart-link/rn-ui';
 import useTranslation from '../../../hooks/useTranslation';
 import { ConfirmActionSheet } from '../../../utils/common-action-sheet';
 import { getImManager } from '../../../init';
@@ -193,14 +193,13 @@ const renderOperations = (items, close) => {
                 }}>
                         <View style={styles.operationItem}>
                             {item.icon}
-                            <Text style={styles.operationText}>{item.title}</Text>
+                            <CaihText allowFontScaling={false} style={styles.operationText}>{item.title}</CaihText>
                         </View>
                     </TouchableOpacity>);
         })}
         </View>);
 };
-const MessageOption = ({ visible, message, nativeEventLayout, touchPoint, onClose, setLoading }) => {
-    var _a;
+const MessageOption = ({ visible, message, touchTarget, onClose, setLoading }) => {
     const { t } = useTranslation();
     const headerHeight = useHeaderHeight();
     const { messageBarHeight } = usePanel();
@@ -217,7 +216,7 @@ const MessageOption = ({ visible, message, nativeEventLayout, touchPoint, onClos
         x: padding,
         y: padding,
         width: screenWidth - padding * 2,
-        height: screenHeight - headerHeight - messageBarHeight - ((_a = StatusBar.currentHeight) !== null && _a !== void 0 ? _a : 0) - padding * 2,
+        height: screenHeight - headerHeight - messageBarHeight - padding * 2,
     };
     const showAnimation = (x, y) => {
         translateX.setValue(x);
@@ -256,20 +255,21 @@ const MessageOption = ({ visible, message, nativeEventLayout, touchPoint, onClos
         });
     };
     const onLayout = (e) => {
+        console.log('[MessageOption] onLayout: ', touchTarget);
         const { width: contentWidth, height: contentHeight } = e.nativeEvent.layout;
         // 计算操作项的显示位置
-        // 判断点击位置是否存在
-        if (nativeEventLayout && touchPoint) {
-            const { height } = nativeEventLayout;
-            const { x, y } = touchPoint;
-            let safePageY = !isNaN(y) ? y : displayArea.y;
-            let targetY = safePageY + height + contentHeight > displayArea.height
-                ? safePageY - contentHeight
-                : safePageY + height;
-            let targetX = x + contentWidth > displayArea.width
-                ? displayArea.width - contentWidth
-                : x;
-            showAnimation(targetX, targetY);
+        if (touchTarget) {
+            touchTarget.measureInWindow((x, y, width, height, pageX, pageY) => {
+                console.log('[MessageOption] touchTarget.measure: ', x, y, width, height, pageX, pageY);
+                let safePageY = !isNaN(y) ? y : displayArea.y;
+                let targetY = safePageY + height + contentHeight > displayArea.height
+                    ? safePageY - contentHeight
+                    : safePageY + height;
+                let targetX = x + contentWidth > displayArea.width
+                    ? displayArea.width - contentWidth
+                    : x;
+                showAnimation(targetX, targetY);
+            });
         }
         else {
             showAnimation(displayArea.x + displayArea.width - contentWidth, displayArea.y + displayArea.height / 2 - contentHeight / 2);

package/dist/pages/message/components/MessagePayload.d.ts

@@ -3,14 +3,13 @@ import { IMessage } from '@smart-link/im-base';
 import { StyleProp } from 'react-native';
 import { ViewStyle } from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
 import { GestureResponderEvent } from 'react-native/Libraries/Types/CoreEventTypes';
-import { NativeEventLayout } from "../../types";
 export interface MessagePayloadProps extends IMessage {
     style?: StyleProp<ViewStyle>;
     direction?: 'left' | 'right';
     showArrow?: boolean;
     isRecord?: boolean;
     onPress?: (e: GestureResponderEvent) => void;
-    onLongPress?: (e: GestureResponderEvent, layout: NativeEventLayout) => void;
+    onLongPress?: (e: GestureResponderEvent, ref: any) => void;
     onLoad?: (localPath: string) => void;
 }
 declare const _default: React.NamedExoticComponent<MessagePayloadProps>;

package/dist/pages/message/components/MessagePayload.js

@@ -11,7 +11,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { memo } from 'react';
 import { PayloadType } from '@smart-link/im-base';
-import { Text } from 'react-native';
 import PayloadContact from './Payload/PayloadContact';
 import PayloadFile from './Payload/PayloadFile';
 import PayloadPicture from './Payload/PayloadPicture';
@@ -23,6 +22,7 @@ import useTranslation from '../../../hooks/useTranslation';
 import PayloadMultiple from './Payload/PayloadMultiple';
 import PayloadWrapper from './Payload/PayloadWrapper';
 import PayloadShare from "../../../pages/message/components/Payload/PayloadShare";
+import { CaihText } from "@smart-link/rn-ui";
 const MessagePayload = props => {
     const { style: outStyle, isRecord } = props, retProps = __rest(props, ["style", "isRecord"]);
     const { t } = useTranslation();
@@ -60,7 +60,7 @@ const MessagePayload = props => {
         default:
             console.log('暂不支持的消息类型：', payloadType);
             content = (<PayloadWrapper style={style} direction={mergeProps.direction} isRecord={isRecord}>
-                    <Text style={plain}>[{t('msgTypeNotSupported')}]</Text>
+                    <CaihText style={plain}>[{t('msgTypeNotSupported')}]</CaihText>
                 </PayloadWrapper>);
             break;
     }

package/dist/pages/message/components/MessageUndo.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import { dp } from "@smart-link/rn-ui";
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import { CaihText, dp } from "@smart-link/rn-ui";
 import useTranslation from '../../../hooks/useTranslation';
 import { getImManager } from "../../../init";
 export const MessageUndo = (props) => {
@@ -16,30 +16,27 @@ export const MessageUndo = (props) => {
         }
     };
     return (<View style={[styles.root, bgStyle]}>
-            <Text style={[styles.text, bgFont]}>{text}</Text>
+            <CaihText style={[styles.text, bgFont]}>{text}</CaihText>
             <TouchableOpacity activeOpacity={0.5} onPress={onPress}>
-                {edit && (undoText === null || undoText === void 0 ? void 0 : undoText.length) && <Text style={styles.edit}> {t('reedit')} </Text>}
+                {edit && !!(undoText === null || undoText === void 0 ? void 0 : undoText.length) && <CaihText style={styles.edit}>{t('reedit')}</CaihText>}
             </TouchableOpacity>
         </View>);
 };
 const styles = StyleSheet.create({
     root: {
-        borderRadius: dp(3),
         padding: dp(8),
         flexDirection: 'row',
-        alignSelf: 'center'
+        alignSelf: 'center',
     },
     text: {
         color: '#808080',
         fontSize: (13),
-        lineHeight: (15)
     },
     edit: {
-        paddingHorizontal: 5,
         textDecorationLine: 'underline',
         color: '#208aff',
         fontSize: (13),
-        lineHeight: (15)
+        paddingHorizontal: dp(5),
     }
 });
 export default MessageUndo;

package/dist/pages/message/components/MultipleBar/index.js

@@ -8,11 +8,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import React, { memo, useEffect, useState } from 'react';
-import { StyleSheet, TouchableOpacity, Text, View, Animated } from 'react-native';
+import { StyleSheet, TouchableOpacity, View, Animated } from 'react-native';
 import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 import AntDesign from 'react-native-vector-icons/AntDesign';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
-import { dp, Toast, useNavigation } from '@smart-link/rn-ui';
+import { CaihText, dp, Toast, useNavigation } from '@smart-link/rn-ui';
 import useTranslation from '../../../../hooks/useTranslation';
 import { useMessage } from '../../../../hooks/useImSelector';
 import { getImManager } from '../../../../init';
@@ -42,7 +42,7 @@ const MultipleBar = memo((props) => {
         }}>
                 <View style={styles.item}>
                     <FontAwesome5 name="reply" size={dp(20)} color={color}/>
-                    <Text style={fontStyle}>{t('forward')}</Text>
+                    <CaihText style={fontStyle}>{t('forward')}</CaihText>
                 </View>
             </TouchableOpacity>
 
@@ -51,7 +51,7 @@ const MultipleBar = memo((props) => {
             Toast.info(t('collectSuccess'));
         })}>
                 <MaterialIcons name="collections" size={dp(20)} color={color}/>
-                <Text style={fontStyle}>{t('collect')}</Text>
+                <CaihText style={fontStyle}>{t('collect')}</CaihText>
             </TouchableOpacity>
 
 
@@ -61,7 +61,7 @@ const MultipleBar = memo((props) => {
             }, t);
         }}>
                 <AntDesign name="delete" size={dp(20)} color={color}/>
-                <Text style={fontStyle}>{t('delete')}</Text>
+                <CaihText style={fontStyle}>{t('delete')}</CaihText>
             </TouchableOpacity>
         </Animated.View>);
 });

package/dist/pages/message/components/Payload/PayloadContact.js

@@ -1,7 +1,7 @@
 import useTranslation from '../../../../hooks/useTranslation';
-import { dp, useNavigation } from '@smart-link/rn-ui';
+import { CaihText, dp, useNavigation } from '@smart-link/rn-ui';
 import React, { memo } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import PayloadWrapper from './PayloadWrapper';
 import ChatAvatar from '../../../../components/ChatAvatar/ChatAvatar';
 const PayloadContact = ({ payload, direction, style, showArrow = true, onLongPress }) => {
@@ -14,13 +14,13 @@ const PayloadContact = ({ payload, direction, style, showArrow = true, onLongPre
             <View style={styles.content}>
                 <ChatAvatar id={contact.userId} url={contact.avatars} name={contact.userName}/>
                 <View style={styles.info}>
-                    <Text style={styles.name}>{contact.userName}</Text>
-                    <Text style={styles.group} numberOfLines={2}>
+                    <CaihText style={styles.name}>{contact.userName}</CaihText>
+                    <CaihText style={styles.group} numberOfLines={2}>
                         {contact.groupNamePaths}
-                    </Text>
+                    </CaihText>
                 </View>
             </View>
-            <Text style={styles.footer}>{t('contact')}</Text>
+            <CaihText style={styles.footer}>{t('contact')}</CaihText>
         </PayloadWrapper>);
 };
 const styles = StyleSheet.create({

package/dist/pages/message/components/Payload/PayloadFile.js

@@ -7,10 +7,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { dp, Toast } from '@smart-link/rn-ui';
+import { CaihText, dp, Toast } from '@smart-link/rn-ui';
 import FileViewer from 'react-native-file-viewer';
 import React, { memo, useRef, useState } from 'react';
-import { View, Text, StyleSheet, Dimensions, Platform, } from 'react-native';
+import { View, StyleSheet, Dimensions, Platform, } from 'react-native';
 import { numberToFileSize, toAbsolutePath } from '../../../../utils/file';
 import { MessageStatus } from '@smart-link/im-base';
 import UploadProgress from '../UploadProgress';
@@ -108,8 +108,8 @@ const PayloadFile = ({ width = Dimensions.get('window').width * 0.72, payload, m
                 <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}>
                     <Icon style={styles.fileIcon}/>
                     <View style={{ flex: 1 }}>
-                        <Text numberOfLines={1} ellipsizeMode="middle">{payload.filename}</Text>
-                        <Text style={styles.size}>{numberToFileSize(payload.size)} {payload.localPath ? t('downloaded') : ''}</Text>
+                        <CaihText numberOfLines={1} ellipsizeMode="middle">{payload.filename}</CaihText>
+                        <CaihText style={styles.size}>{numberToFileSize(payload.size)} {payload.localPath ? t('downloaded') : ''}</CaihText>
                     </View>
                 </View>
 

package/dist/pages/message/components/Payload/PayloadMultiple.js

@@ -2,9 +2,9 @@ import { borderStyle, shadowStyle } from '../../../../components/styles';
 import useTranslation from '../../../../hooks/useTranslation';
 import { getImManager } from '../../../../init';
 import { buildSimpleText, ConversationType, MessageListActions } from '@smart-link/im-base';
-import { dp, useNavigation } from '@smart-link/rn-ui';
+import { CaihText, dp, useNavigation } from '@smart-link/rn-ui';
 import React, { memo } from 'react';
-import { View, StyleSheet, Text, Dimensions } from 'react-native';
+import { View, StyleSheet, Dimensions } from 'react-native';
 import PayloadWrapper from './PayloadWrapper';
 const { width } = Dimensions.get('window');
 const PayloadMultiple = memo(({ payload, isRecord, messageSeq, direction, showArrow = true, style, onLongPress }) => {
@@ -27,20 +27,20 @@ const PayloadMultiple = memo(({ payload, isRecord, messageSeq, direction, showAr
                 },
             });
         }} onLongPress={onLongPress}>
-            <Text style={styles.titleText} numberOfLines={2}>
+            <CaihText style={styles.titleText} numberOfLines={2}>
                 {title}
-            </Text>
+            </CaihText>
             <View style={styles.content}>
                 {messages.map((message, index) => {
-            return message === 'more' ? (<Text key={index} style={styles.itemTextMore}>
+            return message === 'more' ? (<CaihText key={index} style={styles.itemTextMore}>
                                     ......
-                                </Text>) : (<Text key={index} style={styles.itemText} numberOfLines={1} ellipsizeMode="middle">
+                                </CaihText>) : (<CaihText key={index} style={styles.itemText} numberOfLines={1} ellipsizeMode="middle">
                                     {message.messageFromName + ': ' + buildSimpleText(imManager, message.payloadType, message.payload)}
-                                </Text>);
+                                </CaihText>);
         })}
             </View>
             <View style={styles.line}/>
-            <Text style={styles.footerText}>{t('multipleChatRecord')}</Text>
+            <CaihText style={styles.footerText}>{t('multipleChatRecord')}</CaihText>
         </PayloadWrapper>);
 });
 const styles = StyleSheet.create({

package/dist/pages/message/components/Payload/PayloadNotify.js

@@ -1,39 +1,40 @@
 import useTranslation from '../../../../hooks/useTranslation';
 import { PayloadType, MemberLevel } from '@smart-link/im-base';
 import React, { memo } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
+import { CaihText } from "@smart-link/rn-ui";
 const DetailChange = ({ payload }) => {
     const { t } = useTranslation();
     const changeKeys = {
         noticeChange: 'chatGroupNoticeChange',
         nameChange: 'chatGroupNameChange',
     };
-    return <Text style={styles.text}>{t(changeKeys[payload.changeKey], payload)}</Text>;
+    return <CaihText style={styles.text}>{t(changeKeys[payload.changeKey], payload)}</CaihText>;
 };
 const MemberInvite = ({ payload }) => {
     const { t } = useTranslation();
-    return (<Text style={styles.text}>
+    return (<CaihText style={styles.text}>
             {t('chatGroupInviteMember', { userName: payload.inviterName, content: payload.inviteesName.join('、') })}
-        </Text>);
+        </CaihText>);
 };
 const MemberRemove = ({ payload }) => {
     const { t } = useTranslation();
-    return <Text style={styles.text}>{t('chatGroupRemoveMember', { content: payload.names.join('、') })}</Text>;
+    return <CaihText style={styles.text}>{t('chatGroupRemoveMember', { content: payload.names.join('、') })}</CaihText>;
 };
 const MemberBeenRemove = ({ payload }) => {
     const { t } = useTranslation();
-    return <Text style={styles.text}>{t('chatGroupBeenRemoveMember')}</Text>;
+    return <CaihText style={styles.text}>{t('chatGroupBeenRemoveMember')}</CaihText>;
 };
 const MemberLeave = ({ payload }) => {
     const { t } = useTranslation();
-    return <Text style={styles.text}>{t('chatGroupMemberLeave', { userName: payload.userName })}</Text>;
+    return <CaihText style={styles.text}>{t('chatGroupMemberLeave', { userName: payload.userName })}</CaihText>;
 };
 const GroupInviteSwitch = ({ payload }) => {
     const { t } = useTranslation();
     // console.log('GroupInviteSwitch: ', payload)
-    return (<Text style={styles.text}>
+    return (<CaihText style={styles.text}>
             {t(payload.switchCode === 'on' ? 'groupInviteValidateEnable' : 'groupInviteValidateDisable')}
-        </Text>);
+        </CaihText>);
 };
 const UpdateManager = ({ payload }) => {
     const { t } = useTranslation();
@@ -43,7 +44,7 @@ const UpdateManager = ({ payload }) => {
     if (memberLevel === MemberLevel.OWNER) {
         content = t('setToOwner', { userName: targetUserName });
     }
-    return <Text style={styles.text}>{opUserName} {content}</Text>;
+    return <CaihText style={styles.text}>{opUserName} {content}</CaihText>;
 };
 const PayloadNotify = ({ payload, payloadType }) => {
     let content;
@@ -70,7 +71,7 @@ const PayloadNotify = ({ payload, payloadType }) => {
             content = <UpdateManager payload={payload}/>;
             break;
         default:
-            content = <Text style={styles.text}>{payload === null || payload === void 0 ? void 0 : payload.text}</Text>;
+            content = <CaihText style={styles.text}>{payload === null || payload === void 0 ? void 0 : payload.text}</CaihText>;
             console.log('default PayloadNotify: ', payload, payloadType);
             break;
     }

package/dist/pages/message/components/Payload/PayloadPicture.js

@@ -29,7 +29,7 @@ const PayloadPicture = (_a) => {
             onLoad === null || onLoad === void 0 ? void 0 : onLoad(localPath);
         }
     }, [onLoad, localPath]);
-    const size = calculate(payload.height || dp(163), payload.width || dp(100), 200);
+    const size = calculate(payload.height || dp(163), payload.width || dp(100));
     if (!localPath) {
         return <View style={[borderStyle, size, { alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(0,0,0, 0.8)' }]}>
             <ActivityIndicator color={theme.primaryColor} size={'large'}/>

package/dist/pages/message/components/Payload/PayloadShare.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import useTranslation from "../../../../hooks/useTranslation";
-import { dp } from "@smart-link/rn-ui";
-import { Linking, StyleSheet, Text, View } from "react-native";
+import { CaihText, dp } from "@smart-link/rn-ui";
+import { Linking, StyleSheet, View } from "react-native";
 import PayloadWrapper from "./PayloadWrapper";
 import { borderStyle, shadowStyle } from "../../../../components/styles";
 import Favicon from "../../../../components/Favicon";
@@ -17,17 +17,17 @@ const PayloadShare = ({ payload, direction, showArrow = true, style, onLongPress
             }
         }} onLongPress={onLongPress}>
             <View style={styles.card}>
-                <Text style={styles.title} numberOfLines={2}>{title}</Text>
+                <CaihText style={styles.title} numberOfLines={2}>{title}</CaihText>
                 <View style={styles.h5}/>
                 <View style={styles.info}>
-                    <Text style={styles.description} numberOfLines={3}>{description}</Text>
+                    <CaihText style={styles.description} numberOfLines={3}>{description}</CaihText>
                     <View style={styles.w10}/>
                     {/* favicon */}
                     <Favicon url={url} size={size}/>
                 </View>
             </View>
             <View style={styles.line}/>
-            <Text style={styles.shareName}>{t('shareLink')}</Text>
+            <CaihText style={styles.shareName}>{t('shareLink')}</CaihText>
         </PayloadWrapper>);
 };
 const styles = StyleSheet.create({

package/dist/pages/message/components/Payload/PayloadVideo.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import { MessageStatus, numberToTime } from '@smart-link/im-base';
-import { dp } from '@smart-link/rn-ui';
-import { StyleSheet, View, Text } from 'react-native';
+import { CaihText, dp } from '@smart-link/rn-ui';
+import { StyleSheet, View } from 'react-native';
 import { getDownloadUrl } from '../../../../api/file';
 import { calculate } from '../../../../utils/golden-rectangle';
 import Icon from 'react-native-vector-icons/MaterialIcons';
@@ -30,7 +30,7 @@ const PayloadVideo = ({ messageStatus, messageSeq, payload, sendSize = 0, isReco
                 <Icon size={30} name='play-circle-outline' color='#fff'/>
             </View>
             <View style={{ position: 'absolute', bottom: dp(5), right: dp(5) }}>
-                <Text style={{ fontSize: dp(12), color: '#fff' }}>{numberToTime(payload.duration)}</Text>
+                <CaihText style={{ fontSize: dp(12), color: '#fff' }}>{numberToTime(payload.duration)}</CaihText>
             </View>
         </PayloadWrapper>);
 };

package/dist/pages/message/components/Payload/PayloadVoice.js

@@ -8,8 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import React, { memo, useRef } from 'react';
-import { Text, StyleSheet, View } from 'react-native';
-import { dp } from '@smart-link/rn-ui';
+import { StyleSheet, View } from 'react-native';
+import { CaihText, dp } from '@smart-link/rn-ui';
 import PayloadWrapper from './PayloadWrapper';
 import variables from '@smart-link/rn-ui/dist/components/styles/variables';
 import { getImManager } from '../../../../init';
@@ -92,7 +92,7 @@ const PayloadVoice = ({ payload, direction, style, messageSeq, showArrow = true,
     });
     return (<View style={[styles.root, { flexDirection: direction === 'left' ? 'row' : 'row-reverse' }]}>
             <PayloadWrapper showArrow={showArrow} direction={direction} onPress={handlePlay} onLongPress={onLongPress} style={[style, styles.popoverVoice, { width: voiceWidth + 15 }]}>
-                <Text style={styles.duration}>{second}''</Text>
+                <CaihText style={styles.duration}>{second}''</CaihText>
                 <Image style={[
             styles.voiceImage,
             {

package/dist/pages/message/components/Payload/PayloadWrapper.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import { GestureResponderEvent } from 'react-native';
-import { NativeEventLayout } from "../../../types";
+import { GestureResponderEvent, ViewComponent } from 'react-native';
 export interface PayloadWrapperProps {
     showArrow?: boolean;
     isRecord?: boolean;
@@ -8,7 +7,7 @@ export interface PayloadWrapperProps {
     children: React.ReactNode;
     style?: any;
     onPress?: (e: GestureResponderEvent) => void;
-    onLongPress?: (e: GestureResponderEvent, layout: NativeEventLayout) => void;
+    onLongPress?: (e: GestureResponderEvent, ref: ViewComponent) => void;
 }
 declare const PayloadWrapper: React.NamedExoticComponent<PayloadWrapperProps>;
 export default PayloadWrapper;