react-native-gifted-chat 2.8.1 → 2.8.2-alpha.0

package/lib/MessageContainer/types.d.ts

@@ -1,15 +1,11 @@
-import React, { Component, RefObject } from 'react';
-import { FlatListProps, LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
+import React, { RefObject } from 'react';
+import { FlatListProps, StyleProp, ViewStyle, FlatList } from 'react-native';
 import { LoadEarlierProps } from '../LoadEarlier';
 import { MessageProps } from '../Message';
-import { User, IMessage, Reply } from '../types';
+import { User, IMessage, Reply, DayProps } from '../types';
 import { ReanimatedScrollEvent } from 'react-native-reanimated/lib/typescript/hook/commonTypes';
-import { FlatList } from 'react-native-reanimated/lib/typescript/Animated';
-import { AnimateProps } from 'react-native-reanimated';
-export type ListViewProps = {
-    onLayout?: (event: LayoutChangeEvent) => void;
-} & object;
-export type AnimatedList<TMessage> = Component<AnimateProps<FlatListProps<TMessage>>, unknown, unknown> & FlatList<FlatListProps<TMessage>>;
+export type ListViewProps<TMessage extends IMessage = IMessage> = Partial<FlatListProps<TMessage>>;
+export type AnimatedList<TMessage> = FlatList<TMessage>;
 export interface MessageContainerProps<TMessage extends IMessage = IMessage> {
     forwardRef?: RefObject<AnimatedList<TMessage>>;
     messages?: TMessage[];
@@ -27,6 +23,7 @@ export interface MessageContainerProps<TMessage extends IMessage = IMessage> {
     renderChatEmpty?(): React.ReactNode;
     renderFooter?(props: MessageContainerProps<TMessage>): React.ReactNode;
     renderMessage?(props: MessageProps<TMessage>): React.ReactElement;
+    renderDay?(props: DayProps): React.ReactNode;
     renderLoadEarlier?(props: LoadEarlierProps): React.ReactNode;
     renderTypingIndicator?(): React.ReactNode;
     scrollToBottomComponent?(): React.ReactNode;

package/lib/MessageText.d.ts

@@ -1,15 +1,19 @@
 import React from 'react';
-import { TextProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { AutolinkProps } from 'react-native-autolink';
+import { Match } from 'autolinker/dist/es2015';
 import { LeftRightStyle, IMessage } from './types';
-export interface MessageTextProps<TMessage extends IMessage> {
+export interface MessageOption {
+    title: string;
+    action: (phone: string) => void;
+}
+export type MessageTextProps<TMessage extends IMessage> = {
     position?: 'left' | 'right';
-    optionTitles?: string[];
     currentMessage: TMessage;
     containerStyle?: LeftRightStyle<ViewStyle>;
     textStyle?: LeftRightStyle<TextStyle>;
     linkStyle?: LeftRightStyle<TextStyle>;
-    textProps?: TextProps;
     customTextStyle?: StyleProp<TextStyle>;
-    parsePatterns?: (linkStyle: TextStyle) => [];
-}
-export declare function MessageText<TMessage extends IMessage = IMessage>({ currentMessage, optionTitles, position, containerStyle, textStyle, linkStyle: linkStyleProp, customTextStyle, parsePatterns, textProps, }: MessageTextProps<TMessage>): React.JSX.Element;
+    onPress?: (message: TMessage, url: string, match: Match) => void;
+} & Omit<AutolinkProps, 'text' | 'onPress'>;
+export declare const MessageText: React.FC<MessageTextProps<IMessage>>;

package/lib/MessageText.js

@@ -1,46 +1,8 @@
-import React from 'react';
-import { Linking, StyleSheet, View, } from 'react-native';
-import ParsedText from 'react-native-parsed-text';
-import { useChatContext } from './GiftedChatContext';
+import React, { useMemo, useCallback } from 'react';
+import { Linking, StyleSheet, } from 'react-native';
+import Autolink from 'react-native-autolink';
 import { error } from './logging';
-const WWW_URL_PATTERN = /^www\./i;
-const { textStyle } = StyleSheet.create({
-    textStyle: {
-        fontSize: 16,
-        lineHeight: 20,
-        marginTop: 5,
-        marginBottom: 5,
-        marginLeft: 10,
-        marginRight: 10,
-    },
-});
-const styles = {
-    left: StyleSheet.create({
-        container: {},
-        text: {
-            color: 'black',
-            ...textStyle,
-        },
-        link: {
-            color: 'black',
-            textDecorationLine: 'underline',
-        },
-    }),
-    right: StyleSheet.create({
-        container: {},
-        text: {
-            color: 'white',
-            ...textStyle,
-        },
-        link: {
-            color: 'white',
-            textDecorationLine: 'underline',
-        },
-    }),
-};
-const DEFAULT_OPTION_TITLES = ['Call', 'Text', 'Cancel'];
-export function MessageText({ currentMessage = {}, optionTitles = DEFAULT_OPTION_TITLES, position = 'left', containerStyle, textStyle, linkStyle: linkStyleProp, customTextStyle, parsePatterns, textProps, }) {
-    const { actionSheet } = useChatContext();
+export const MessageText = ({ currentMessage = {}, position = 'left', containerStyle, textStyle, linkStyle: linkStyleProp, customTextStyle, onPress: onPressProp, ...rest }) => {
     // TODO: React.memo
     // const shouldComponentUpdate = (nextProps: MessageTextProps<TMessage>) => {
     //   return (
@@ -49,60 +11,59 @@ export function MessageText({ currentMessage = {}, optionTitles = DEFAULT_OPTION
     //     currentMessage.text !== nextProps.currentMessage.text
     //   )
     // }
-    const onUrlPress = (url) => {
-        // When someone sends a message that includes a website address beginning with "www." (omitting the scheme),
-        // react-native-parsed-text recognizes it as a valid url, but Linking fails to open due to the missing scheme.
-        if (WWW_URL_PATTERN.test(url))
-            onUrlPress(`https://${url}`);
-        else
-            Linking.openURL(url).catch(e => {
-                error(e, 'No handler for URL:', url);
-            });
-    };
-    const onPhonePress = (phone) => {
-        const options = optionTitles && optionTitles.length > 0
-            ? optionTitles.slice(0, 3)
-            : DEFAULT_OPTION_TITLES;
-        const cancelButtonIndex = options.length - 1;
-        actionSheet().showActionSheetWithOptions({
-            options,
-            cancelButtonIndex,
-        }, (buttonIndex) => {
-            switch (buttonIndex) {
-                case 0:
-                    Linking.openURL(`tel:${phone}`).catch(e => {
-                        error(e, 'No handler for telephone');
-                    });
-                    break;
-                case 1:
-                    Linking.openURL(`sms:${phone}`).catch(e => {
-                        error(e, 'No handler for text');
-                    });
-                    break;
-            }
+    const onUrlPress = useCallback((url) => {
+        if (/^www\./i.test(url))
+            url = `https://${url}`;
+        Linking.openURL(url).catch(e => {
+            error(e, 'No handler for URL:', url);
         });
-    };
-    const onEmailPress = (email) => Linking.openURL(`mailto:${email}`).catch(e => error(e, 'No handler for mailto'));
-    const linkStyle = [
-        styles[position].link,
+    }, []);
+    const onPhonePress = useCallback((phone) => {
+        Linking.openURL(`tel:${phone}`).catch(e => {
+            error(e, 'No handler for telephone');
+        });
+    }, []);
+    const onEmailPress = useCallback((email) => Linking.openURL(`mailto:${email}`).catch(e => error(e, 'No handler for mailto')), []);
+    const linkStyle = useMemo(() => StyleSheet.flatten([
+        styles.link,
         linkStyleProp?.[position],
-    ];
-    return (<View style={[
-            styles[position].container,
-            containerStyle?.[position],
-        ]}>
-      <ParsedText style={[
-            styles[position].text,
-            textStyle?.[position],
-            customTextStyle,
-        ]} parse={[
-            ...(parsePatterns ? parsePatterns(linkStyle) : []),
-            { type: 'url', style: linkStyle, onPress: onUrlPress },
-            { type: 'phone', style: linkStyle, onPress: onPhonePress },
-            { type: 'email', style: linkStyle, onPress: onEmailPress },
-        ]} childrenProps={{ ...textProps }}>
-        {currentMessage.text}
-      </ParsedText>
-    </View>);
-}
+    ]), [position, linkStyleProp]);
+    const handlePress = useCallback((url, match) => {
+        const type = match.getType();
+        if (onPressProp)
+            onPressProp(currentMessage, url, match);
+        else if (type === 'url')
+            onUrlPress(url);
+        else if (type === 'phone')
+            onPhonePress(url);
+        else if (type === 'email')
+            onEmailPress(url);
+    }, [onUrlPress, onPhonePress, onEmailPress, onPressProp, currentMessage]);
+    const style = useMemo(() => [
+        containerStyle?.[position],
+        styles[`text_${position}`],
+        textStyle?.[position],
+        customTextStyle,
+    ], [containerStyle, position, textStyle, customTextStyle]);
+    return (<Autolink style={style} {...rest} text={currentMessage.text} email link linkStyle={linkStyle} onPress={handlePress}/>);
+};
+const styles = StyleSheet.create({
+    text: {
+        fontSize: 16,
+        lineHeight: 20,
+        marginTop: 5,
+        marginBottom: 5,
+        marginLeft: 10,
+        marginRight: 10,
+    },
+    text_left: {
+        color: 'black',
+    },
+    text_right: {
+        color: 'white',
+    },
+    link: {
+        textDecorationLine: 'underline',
+    },
+});
 //# sourceMappingURL=MessageText.js.map

package/lib/MessageText.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageText.js","sourceRoot":"","sources":["../src/MessageText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EACL,OAAO,EACP,UAAU,EACV,IAAI,GAKL,MAAM,cAAc,CAAA;AAErB,OAAO,UAAU,MAAM,0BAA0B,CAAA;AAEjD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,MAAM,eAAe,GAAG,SAAS,CAAA;AAEjC,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,CAAC,MAAM,CAAC;IACtC,SAAS,EAAE;QACT,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,EAAE;QACd,SAAS,EAAE,CAAC;QACZ,YAAY,EAAE,CAAC;QACf,UAAU,EAAE,EAAE;QACd,WAAW,EAAE,EAAE;KAChB;CACF,CAAC,CAAA;AAEF,MAAM,MAAM,GAAG;IACb,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC;QACtB,SAAS,EAAE,EAAE;QACb,IAAI,EAAE;YACJ,KAAK,EAAE,OAAO;YACd,GAAG,SAAS;SACb;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,OAAO;YACd,kBAAkB,EAAE,WAAW;SAChC;KACF,CAAC;IACF,KAAK,EAAE,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE,EAAE;QACb,IAAI,EAAE;YACJ,KAAK,EAAE,OAAO;YACd,GAAG,SAAS;SACb;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,OAAO;YACd,kBAAkB,EAAE,WAAW;SAChC;KACF,CAAC;CACH,CAAA;AAED,MAAM,qBAAqB,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAA;AAcxD,MAAM,UAAU,WAAW,CAAwC,EACjE,cAAc,GAAG,EAAc,EAC/B,YAAY,GAAG,qBAAqB,EACpC,QAAQ,GAAG,MAAM,EACjB,cAAc,EACd,SAAS,EACT,SAAS,EAAE,aAAa,EACxB,eAAe,EACf,aAAa,EACb,SAAS,GACkB;IAC3B,MAAM,EAAE,WAAW,EAAE,GAAG,cAAc,EAAE,CAAA;IAExC,mBAAmB;IACnB,6EAA6E;IAC7E,aAAa;IACb,0BAA0B;IAC1B,oCAAoC;IACpC,4DAA4D;IAC5D,MAAM;IACN,IAAI;IAEJ,MAAM,UAAU,GAAG,CAAC,GAAW,EAAE,EAAE;QACjC,4GAA4G;QAC5G,8GAA8G;QAC9G,IAAI,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC;YAC3B,UAAU,CAAC,WAAW,GAAG,EAAE,CAAC,CAAA;;YAE5B,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;gBAC7B,KAAK,CAAC,CAAC,EAAE,qBAAqB,EAAE,GAAG,CAAC,CAAA;YACtC,CAAC,CAAC,CAAA;IACN,CAAC,CAAA;IAED,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE;QACrC,MAAM,OAAO,GACX,YAAY,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC;YACrC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;YAC1B,CAAC,CAAC,qBAAqB,CAAA;QAC3B,MAAM,iBAAiB,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,CAAA;QAC5C,WAAW,EAAE,CAAC,0BAA0B,CACtC;YACE,OAAO;YACP,iBAAiB;SAClB,EACD,CAAC,WAAoB,EAAE,EAAE;YACvB,QAAQ,WAAW,EAAE,CAAC;gBACpB,KAAK,CAAC;oBACJ,OAAO,CAAC,OAAO,CAAC,OAAO,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;wBACxC,KAAK,CAAC,CAAC,EAAE,0BAA0B,CAAC,CAAA;oBACtC,CAAC,CAAC,CAAA;oBACF,MAAK;gBACP,KAAK,CAAC;oBACJ,OAAO,CAAC,OAAO,CAAC,OAAO,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;wBACxC,KAAK,CAAC,CAAC,EAAE,qBAAqB,CAAC,CAAA;oBACjC,CAAC,CAAC,CAAA;oBACF,MAAK;YACT,CAAC;QACH,CAAC,CACF,CAAA;IACH,CAAC,CAAA;IAED,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE,CACrC,OAAO,CAAC,OAAO,CAAC,UAAU,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAC3C,KAAK,CAAC,CAAC,EAAE,uBAAuB,CAAC,CAClC,CAAA;IAEH,MAAM,SAAS,GAAG;QAChB,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI;QACrB,aAAa,EAAE,CAAC,QAAQ,CAAC;KAC1B,CAAA;IACD,OAAO,CACL,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;YACL,MAAM,CAAC,QAAQ,CAAC,CAAC,SAAS;YAC1B,cAAc,EAAE,CAAC,QAAQ,CAAC;SAC3B,CAAC,CAEF;MAAA,CAAC,UAAU,CACT,KAAK,CAAC,CAAC;YACL,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI;YACrB,SAAS,EAAE,CAAC,QAAQ,CAAC;YACrB,eAAe;SAChB,CAAC,CACF,KAAK,CAAC,CAAC;YACL,GAAG,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,SAAiC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YAC1E,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE;YACtD,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE;YAC1D,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE;SAC3D,CAAC,CACF,aAAa,CAAC,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC,CAEhC;QAAA,CAAC,cAAe,CAAC,IAAI,CACvB;MAAA,EAAE,UAAU,CACd;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC"}
+{"version":3,"file":"MessageText.js","sourceRoot":"","sources":["../src/MessageText.tsx"],"names":[],"mappings":"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"}

package/lib/SystemMessage.d.ts

@@ -6,5 +6,6 @@ export interface SystemMessageProps<TMessage extends IMessage> {
     containerStyle?: StyleProp<ViewStyle>;
     wrapperStyle?: StyleProp<ViewStyle>;
     textStyle?: StyleProp<TextStyle>;
+    children?: React.ReactNode;
 }
-export declare function SystemMessage<TMessage extends IMessage = IMessage>({ currentMessage, containerStyle, wrapperStyle, textStyle, }: SystemMessageProps<TMessage>): React.JSX.Element | null;
+export declare function SystemMessage<TMessage extends IMessage = IMessage>({ currentMessage, containerStyle, wrapperStyle, textStyle, children, }: SystemMessageProps<TMessage>): React.JSX.Element | null;

package/lib/SystemMessage.js

@@ -14,12 +14,13 @@ const styles = StyleSheet.create({
         fontWeight: '300',
     },
 });
-export function SystemMessage({ currentMessage, containerStyle, wrapperStyle, textStyle, }) {
+export function SystemMessage({ currentMessage, containerStyle, wrapperStyle, textStyle, children, }) {
     if (currentMessage == null || currentMessage.system === false)
         return null;
     return (<View style={[stylesCommon.fill, stylesCommon.centerItems, styles.container, containerStyle]}>
       <View style={wrapperStyle}>
-        <Text style={[styles.text, textStyle]}>{currentMessage.text}</Text>
+        {!!currentMessage.text && <Text style={[styles.text, textStyle]}>{currentMessage.text}</Text>}
+        {children}
       </View>
     </View>);
 }

package/lib/SystemMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SystemMessage.js","sourceRoot":"","sources":["../src/SystemMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EACL,UAAU,EACV,IAAI,EACJ,IAAI,GAIL,MAAM,cAAc,CAAA;AACrB,OAAO,KAAK,MAAM,SAAS,CAAA;AAE3B,OAAO,YAAY,MAAM,UAAU,CAAA;AAEnC,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,SAAS,EAAE,CAAC;QACZ,YAAY,EAAE,EAAE;KACjB;IACD,IAAI,EAAE;QACJ,eAAe,EAAE,KAAK,CAAC,qBAAqB;QAC5C,KAAK,EAAE,KAAK,CAAC,YAAY;QACzB,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;KAClB;CACF,CAAC,CAAA;AASF,MAAM,UAAU,aAAa,CAAwC,EACnE,cAAc,EACd,cAAc,EACd,YAAY,EACZ,SAAS,GACoB;IAC7B,IAAI,cAAc,IAAI,IAAI,IAAI,cAAc,CAAC,MAAM,KAAK,KAAK;QAC3D,OAAO,IAAI,CAAA;IAEb,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,EAAE,YAAY,CAAC,WAAW,EAAE,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAC3F;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CACxB;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,IAAI,CACpE;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC"}
+{"version":3,"file":"SystemMessage.js","sourceRoot":"","sources":["../src/SystemMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EACL,UAAU,EACV,IAAI,EACJ,IAAI,GAIL,MAAM,cAAc,CAAA;AACrB,OAAO,KAAK,MAAM,SAAS,CAAA;AAE3B,OAAO,YAAY,MAAM,UAAU,CAAA;AAEnC,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,SAAS,EAAE,CAAC;QACZ,YAAY,EAAE,EAAE;KACjB;IACD,IAAI,EAAE;QACJ,eAAe,EAAE,KAAK,CAAC,qBAAqB;QAC5C,KAAK,EAAE,KAAK,CAAC,YAAY;QACzB,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;KAClB;CACF,CAAC,CAAA;AAUF,MAAM,UAAU,aAAa,CAAwC,EACnE,cAAc,EACd,cAAc,EACd,YAAY,EACZ,SAAS,EACT,QAAQ,GACqB;IAC7B,IAAI,cAAc,IAAI,IAAI,IAAI,cAAc,CAAC,MAAM,KAAK,KAAK;QAC3D,OAAO,IAAI,CAAA;IAEb,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,EAAE,YAAY,CAAC,WAAW,EAAE,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAC3F;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CACxB;QAAA,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAC7F;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC"}

package/lib/utils.d.ts

@@ -1,3 +1,5 @@
 import { IMessage } from './types';
 export declare function isSameDay(currentMessage: IMessage, diffMessage: IMessage | null | undefined): boolean;
 export declare function isSameUser(currentMessage: IMessage, diffMessage: IMessage | null | undefined): boolean;
+export declare function useCallbackDebounced<T extends (...args: any[]) => any>(callbackFunc: T, deps: React.DependencyList | undefined, time: number): (...args: Parameters<T>) => void;
+export declare function useCallbackThrottled<T extends (...args: any[]) => any>(callbackFunc: T, deps: React.DependencyList | undefined, time: number): (...args: Parameters<T>) => void;

package/lib/utils.js

@@ -1,3 +1,4 @@
+import { useCallback, useEffect, useRef } from 'react';
 import dayjs from 'dayjs';
 export function isSameDay(currentMessage, diffMessage) {
     if (!diffMessage || !diffMessage.createdAt)
@@ -14,4 +15,69 @@ export function isSameUser(currentMessage, diffMessage) {
         currentMessage.user &&
         diffMessage.user._id === currentMessage.user._id);
 }
+function processCallbackArguments(args) {
+    const [e, ...rest] = args;
+    const { nativeEvent } = e || {};
+    let params = [];
+    if (e) {
+        if (nativeEvent)
+            params.push({ nativeEvent });
+        else
+            params.push(e);
+        if (rest)
+            params = params.concat(rest);
+    }
+    return params;
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useCallbackDebounced(callbackFunc, deps = [], time) {
+    const timeoutId = useRef(undefined);
+    const savedFunc = useCallback((...args) => {
+        const params = processCallbackArguments(args);
+        if (timeoutId.current)
+            clearTimeout(timeoutId.current);
+        timeoutId.current = setTimeout(() => {
+            callbackFunc(...params);
+        }, time);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [callbackFunc, time, ...deps]);
+    useEffect(() => {
+        return () => {
+            if (timeoutId.current)
+                clearTimeout(timeoutId.current);
+        };
+    }, []);
+    return savedFunc;
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useCallbackThrottled(callbackFunc, deps = [], time) {
+    const lastExecution = useRef(0);
+    const timeoutId = useRef(undefined);
+    // we use function instead of arrow to access arguments object
+    const savedFunc = useCallback((...args) => {
+        const params = processCallbackArguments(args);
+        const now = Date.now();
+        const timeSinceLastExecution = now - lastExecution.current;
+        if (timeSinceLastExecution >= time) {
+            // Execute immediately if enough time has passed
+            lastExecution.current = now;
+            callbackFunc(...params);
+        }
+        else {
+            // Schedule execution for the remaining time
+            clearTimeout(timeoutId.current);
+            timeoutId.current = setTimeout(() => {
+                lastExecution.current = Date.now();
+                callbackFunc(...params);
+            }, time - timeSinceLastExecution);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [callbackFunc, time, ...deps]);
+    useEffect(() => {
+        return () => {
+            clearTimeout(timeoutId.current);
+        };
+    }, []);
+    return savedFunc;
+}
 //# sourceMappingURL=utils.js.map

package/lib/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,UAAU,SAAS,CACvB,cAAwB,EACxB,WAAwC;IAExC,IAAI,CAAC,WAAW,IAAI,CAAC,WAAW,CAAC,SAAS;QACxC,OAAO,KAAK,CAAA;IAEd,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAA;IACxD,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAAA;IAElD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE;QACzD,OAAO,KAAK,CAAA;IAEd,OAAO,gBAAgB,CAAC,MAAM,CAAC,aAAa,EAAE,KAAK,CAAC,CAAA;AACtD,CAAC;AAED,MAAM,UAAU,UAAU,CACxB,cAAwB,EACxB,WAAwC;IAExC,OAAO,CAAC,CAAC,CACP,WAAW;QACX,WAAW,CAAC,IAAI;QAChB,cAAc,CAAC,IAAI;QACnB,WAAW,CAAC,IAAI,CAAC,GAAG,KAAK,cAAc,CAAC,IAAI,CAAC,GAAG,CACjD,CAAA;AACH,CAAC"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-chat",
-  "version": "2.8.1",
+  "version": "2.8.2-alpha.0",
   "description": "The most complete chat UI for React Native",
   "keywords": [
     "android",
@@ -33,7 +33,7 @@
     "build": "rm -rf lib/ && yarn tsc",
     "lint": "yarn eslint src",
     "lint:fix": "yarn eslint --cache --fix",
-    "prepublishOnly": "yarn lint && yarn build && yarn test",
+    "prepublishOnly": "yarn lint && yarn build",
     "start": "cd example && expo start",
     "start:web": "cd example && expo start -w --dev",
     "test": "TZ=Europe/Paris jest --no-watchman",
@@ -53,48 +53,55 @@
   "dependencies": {
     "@expo/react-native-action-sheet": "^4.1.1",
     "@types/lodash.isequal": "^4.5.8",
-    "dayjs": "^1.11.13",
+    "dayjs": "^1.11.18",
     "lodash.isequal": "^4.5.0",
+    "react-native-autolink": "^4.2.0",
     "react-native-communications": "^2.2.1",
     "react-native-iphone-x-helper": "^1.3.1",
-    "react-native-lightbox-v2": "^0.9.2",
-    "react-native-parsed-text": "^0.0.22"
+    "react-native-lightbox-v2": "^0.9.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.10",
-    "@babel/plugin-transform-react-jsx": "^7.25.9",
-    "@babel/plugin-transform-unicode-property-regex": "^7.25.9",
-    "@babel/preset-env": "^7.26.9",
-    "@react-native/eslint-config": "^0.76.6",
+    "@babel/core": "^7.28.4",
+    "@babel/plugin-transform-react-jsx": "^7.27.1",
+    "@babel/plugin-transform-unicode-property-regex": "^7.27.1",
+    "@babel/preset-env": "^7.28.3",
     "@stylistic/eslint-plugin": "^3.1.0",
-    "@types/jest": "^29.5.14",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
+    "@react-native-community/cli": "20.0.0",
+    "@react-native-community/cli-platform-android": "20.0.0",
+    "@react-native-community/cli-platform-ios": "20.0.0",
+    "@react-native/babel-preset": "0.81.5",
+    "@react-native/eslint-config": "0.81.5",
+    "@react-native/metro-config": "0.81.5",
+    "@react-native/typescript-config": "0.81.5",
+    "@types/jest": "^29.5.13",
+    "@types/react": "^19.1.0",
+    "@types/react-test-renderer": "^19.1.0",
+    "@types/react-dom": "^19.1.9",
     "@types/react-native": "^0.72.8",
-    "@typescript-eslint/eslint-plugin": "^8.28.0",
-    "@typescript-eslint/parser": "^8.28.0",
+    "@typescript-eslint/eslint-plugin": "^8.44.1",
+    "@typescript-eslint/parser": "^8.44.1",
     "babel-jest": "^29.7.0",
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-config-standard-jsx": "^11.0.0",
-    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jest": "^28.11.0",
     "eslint-plugin-json": "^4.0.1",
-    "eslint-plugin-n": "^17.17.0",
+    "eslint-plugin-n": "^17.23.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^7.2.1",
-    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react": "^7.37.5",
     "husky": "^9.1.7",
     "jest": "^29.7.0",
     "json": "^11.0.0",
     "lint-staged": "^15.5.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-native": "^0.76.6",
-    "react-native-keyboard-controller": "^1.16.8",
-    "react-native-reanimated": "^3.17.1",
-    "react-test-renderer": "^18.3.1",
-    "typescript": "^5.8.2"
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-keyboard-controller": "^1.19.5",
+    "react-native-reanimated": "^3.19.4",
+    "react-test-renderer": "19.1.0",
+    "typescript": "^5.9.2"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
@@ -104,6 +111,6 @@
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   }
 }

package/src/Bubble/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { JSX, useCallback } from 'react'
 import {
   Text,
   TouchableWithoutFeedback,
@@ -22,7 +22,7 @@ import styles from './styles'
 
 export * from './types'
 
-const Bubble: React.FC<BubbleProps<IMessage>> = (props: BubbleProps<IMessage>) => {
+const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessage>): JSX.Element => {
   const {
     currentMessage,
     nextMessage,
@@ -38,46 +38,22 @@ const Bubble: React.FC<BubbleProps<IMessage>> = (props: BubbleProps<IMessage>) =
     containerStyle,
     wrapperStyle,
     bottomContainerStyle,
+    onPress: onPressProp,
+    onLongPress: onLongPressProp,
   } = props
 
   const context = useChatContext()
 
   const onPress = useCallback(() => {
-    if (props.onPress)
-      props.onPress(context, currentMessage)
-  }, [context, props, currentMessage])
+    onPressProp?.(context, currentMessage)
+  }, [onPressProp, context, currentMessage])
 
   const onLongPress = useCallback(() => {
-    const {
-      onLongPress,
-      optionTitles,
-    } = props
-
-    if (onLongPress) {
-      onLongPress(context, currentMessage)
-      return
-    }
-
-    if (!optionTitles?.length)
-      return
-
-    const options = optionTitles
-    const cancelButtonIndex = options.length - 1
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ;(context as any).actionSheet().showActionSheetWithOptions(
-      {
-        options,
-        cancelButtonIndex,
-      },
-      (buttonIndex: number) => {
-        console.log('onLongPress', { buttonIndex })
-      }
-    )
+    onLongPressProp?.(context, currentMessage)
   }, [
     currentMessage,
     context,
-    props,
+    onLongPressProp,
   ])
 
   const styledBubbleToNext = useCallback(() => {
@@ -111,7 +87,7 @@ const Bubble: React.FC<BubbleProps<IMessage>> = (props: BubbleProps<IMessage>) =
     )
       return [
         styles[position].containerToPrevious,
-        containerToPreviousStyle && containerToPreviousStyle[position],
+        containerToPreviousStyle?.[position],
       ]
 
     return null
@@ -166,7 +142,6 @@ const Bubble: React.FC<BubbleProps<IMessage>> = (props: BubbleProps<IMessage>) =
         /* eslint-disable @typescript-eslint/no-unused-vars */
         containerStyle,
         wrapperStyle,
-        optionTitles,
         /* eslint-enable @typescript-eslint/no-unused-vars */
         ...messageTextProps
       } = props
@@ -385,7 +360,7 @@ const Bubble: React.FC<BubbleProps<IMessage>> = (props: BubbleProps<IMessage>) =
             <View
               style={[
                 styles[position].bottom,
-                bottomContainerStyle && bottomContainerStyle[position],
+                bottomContainerStyle?.[position],
               ]}
             >
               {renderUsername()}

package/src/Bubble/types.ts

@@ -5,7 +5,7 @@ import {
   TextStyle,
 } from 'react-native'
 import { QuickRepliesProps } from '../QuickReplies'
-import { MessageTextProps } from '../MessageText'
+import { MessageTextProps, MessageOption } from '../MessageText'
 import { MessageImageProps } from '../MessageImage'
 import { TimeProps } from '../Time'
 import {
@@ -39,7 +39,7 @@ export type RenderMessageAudioProps<TMessage extends IMessage> = Omit<
 
 export type RenderMessageTextProps<TMessage extends IMessage> = Omit<
   BubbleProps<TMessage>,
-  'containerStyle' | 'wrapperStyle'
+  'containerStyle' | 'wrapperStyle' | 'options'
 > &
   MessageTextProps<TMessage>
 /* eslint-enable no-use-before-define */
@@ -54,7 +54,7 @@ export interface BubbleProps<TMessage extends IMessage> {
   currentMessage: TMessage
   nextMessage?: TMessage
   previousMessage?: TMessage
-  optionTitles?: string[]
+  options?: MessageOption[]
   containerStyle?: LeftRightStyle<ViewStyle>
   wrapperStyle?: LeftRightStyle<ViewStyle>
   textStyle?: LeftRightStyle<TextStyle>