react-native-gifted-chat 2.4.0 → 2.5.1

package/README.md

@@ -16,8 +16,6 @@
   <a href="https://www.npmjs.com/package/react-native-gifted-chat">
   <img alt="npm downloads" src="https://img.shields.io/npm/dm/react-native-gifted-chat.svg"/></a>
   <a href="https://www.npmjs.com/package/react-native-gifted-chat"><img alt="npm version" src="https://badge.fury.io/js/react-native-gifted-chat.svg"/></a>
-   <a href="https://reactnative.gallery/FaridSafi/gifted-chat"><img src="https://img.shields.io/badge/reactnative.gallery-%F0%9F%8E%AC-green.svg"/></a>
-
 </p>
 <p align="center">
   <a href="https://circleci.com/gh/FaridSafi/react-native-gifted-chat"><img src="https://circleci.com/gh/FaridSafi/react-native-gifted-chat.svg?style=shield" alt="build"></a>
@@ -67,6 +65,20 @@
   </p>
 </p>
 
+<p align="center">
+  <br/>
+  <a href="https://www.ethora.com" target="_blank">
+    <img src="https://www.dappros.com/wp-content/uploads/2023/12/Ethora-Logo.png" width="300px">
+  </a>
+  <br>
+  <p align="center">
+    A complete app engine featuring GiftedChat
+  </p>
+  <p align="center">
+    <a href="https://bit.ly/ethorachat" target="_blank">Check out our GitHub</a>
+  </p>
+</p>
+
 ## The future of GiftedChat 🎉
 
 Please give us your advice: [Related PR](https://github.com/FaridSafi/react-native-gifted-chat/pull/1775)
@@ -186,7 +198,7 @@ See [`App.tsx`](https://github.com/FaridSafi/react-native-gifted-chat/blob/maste
 
 ## "Slack" example
 
-See the files in [`example-slack-message`](example-slack-message) for an example of how to override the default UI to make something that looks more like Slack -- with usernames displayed and all messages on the left.
+See the files in [`example/example-slack-message`](example/example-slack-message) for an example of how to override the default UI to make something that looks more like Slack -- with usernames displayed and all messages on the left.
 
 ## Message object
 
@@ -252,7 +264,7 @@ See PR [#1211](https://github.com/FaridSafi/react-native-gifted-chat/pull/1211)
 interface Reply {
   title: string
   value: string
-  messageId?: any
+  messageId?: number | string
 }
 
 interface QuickReplies {
@@ -334,7 +346,6 @@ interface QuickReplies {
 - **`timeFormat`** _(String)_ - Format to use for rendering times; default is `'LT'` (see [Day.js Format](https://day.js.org/docs/en/display/format))
 - **`dateFormat`** _(String)_ - Format to use for rendering dates; default is `'ll'` (see [Day.js Format](https://day.js.org/docs/en/display/format))
 - **`loadEarlier`** _(Bool)_ - Enables the "load earlier messages" button, required for `infiniteScroll`
-- **`isKeyboardInternallyHandled`** _(Bool)_ - Determine whether to handle keyboard awareness inside the plugin. If you have your own keyboard handling outside the plugin set this to false; default is `true`
 - **`onLoadEarlier`** _(Function)_ - Callback when loading earlier messages
 - **`isLoadingEarlier`** _(Bool)_ - Display an `ActivityIndicator` when loading earlier messages
 - **`renderLoading`** _(Function)_ - Render a loading view when initializing
@@ -373,7 +384,6 @@ interface QuickReplies {
 - **`renderSend`** _(Function)_ - Custom send button; you can pass children to the original `Send` component quite easily, for example, to use a custom icon ([example](https://github.com/FaridSafi/react-native-gifted-chat/pull/487))
 - **`renderAccessory`** _(Function)_ - Custom second line of actions below the message composer
 - **`onPressActionButton`** _(Function)_ - Callback when the Action button is pressed (if set, the default `actionSheet` will not be used)
-- **`bottomOffset`** _(Integer)_ - Distance of the chat from the bottom of the screen (e.g. useful if you display a tab bar)
 - **`minInputToolbarHeight`** _(Integer)_ - Minimum height of the input toolbar; default is `44`
 - **`listViewProps`** _(Object)_ - Extra props to be passed to the messages [`<ListView>`](https://facebook.github.io/react-native/docs/listview.html); some props can't be overridden, see the code in `MessageContainer.render()` for details
 - **`textInputProps`** _(Object)_ - Extra props to be passed to the [`<TextInput>`](https://facebook.github.io/react-native/docs/textinput.html)

package/lib/Actions.d.ts

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { StyleProp, ViewStyle, TextStyle } from 'react-native';
 export interface ActionsProps {
     options?: {
-        [key: string]: any;
+        [key: string]: () => void;
     };
     optionTintColor?: string;
     icon?: () => ReactNode;
@@ -12,15 +12,14 @@ export interface ActionsProps {
     containerStyle?: StyleProp<ViewStyle>;
     onPressActionButton?(): void;
 }
-export declare function Actions({ options, optionTintColor, icon, wrapperStyle, iconTextStyle, onPressActionButton, containerStyle, }: ActionsProps): JSX.Element;
+export declare function Actions({ options, optionTintColor, icon, wrapperStyle, iconTextStyle, onPressActionButton, containerStyle, }: ActionsProps): React.JSX.Element;
 export declare namespace Actions {
     var propTypes: {
-        onSend: PropTypes.Requireable<(...args: any[]) => any>;
         options: PropTypes.Requireable<object>;
         optionTintColor: PropTypes.Requireable<string>;
         icon: PropTypes.Requireable<(...args: any[]) => any>;
         onPressActionButton: PropTypes.Requireable<(...args: any[]) => any>;
-        wrapperStyle: PropTypes.Requireable<number | boolean | object>;
-        containerStyle: PropTypes.Requireable<number | boolean | object>;
+        wrapperStyle: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
+        containerStyle: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
     };
 }

package/lib/Actions.js

@@ -1,13 +1,14 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { StyleSheet, Text, TouchableOpacity, View, } from 'react-native';
 import Color from './Color';
 import { StylePropType } from './utils';
 import { useChatContext } from './GiftedChatContext';
-import { useCallbackOne } from 'use-memo-one';
-export function Actions({ options = {}, optionTintColor = Color.optionTintColor, icon, wrapperStyle, iconTextStyle, onPressActionButton, containerStyle, }) {
+export function Actions({ options, optionTintColor = Color.optionTintColor, icon, wrapperStyle, iconTextStyle, onPressActionButton, containerStyle, }) {
     const { actionSheet } = useChatContext();
-    const onActionsPress = useCallbackOne(() => {
+    const onActionsPress = useCallback(() => {
+        if (!options)
+            return;
         const optionKeys = Object.keys(options);
         const cancelButtonIndex = optionKeys.indexOf('Cancel');
         actionSheet().showActionSheetWithOptions({
@@ -15,26 +16,25 @@ export function Actions({ options = {}, optionTintColor = Color.optionTintColor,
             cancelButtonIndex,
             tintColor: optionTintColor,
         }, (buttonIndex) => {
+            if (buttonIndex === undefined)
+                return;
             const key = optionKeys[buttonIndex];
-            if (key) {
+            if (key)
                 options[key]();
-            }
         });
-    }, []);
-    const renderIcon = useCallbackOne(() => {
-        if (icon) {
+    }, [actionSheet, options, optionTintColor]);
+    const renderIcon = useCallback(() => {
+        if (icon)
             return icon();
-        }
         return (<View style={[styles.wrapper, wrapperStyle]}>
-        <Text style={[styles.iconText, iconTextStyle]}>+</Text>
+        <Text style={[styles.iconText, iconTextStyle]}>{'+'}</Text>
       </View>);
-    }, []);
+    }, [icon, iconTextStyle, wrapperStyle]);
     return (<TouchableOpacity style={[styles.container, containerStyle]} onPress={onPressActionButton || onActionsPress}>
       {renderIcon()}
     </TouchableOpacity>);
 }
 Actions.propTypes = {
-    onSend: PropTypes.func,
     options: PropTypes.object,
     optionTintColor: PropTypes.string,
     icon: PropTypes.func,
@@ -54,11 +54,14 @@ const styles = StyleSheet.create({
         borderColor: Color.defaultColor,
         borderWidth: 2,
         flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
     },
     iconText: {
         color: Color.defaultColor,
         fontWeight: 'bold',
         fontSize: 16,
+        lineHeight: 16,
         backgroundColor: Color.backgroundTransparent,
         textAlign: 'center',
     },

package/lib/Actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../src/Actions.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../src/Actions.tsx"],"names":[],"mappings":"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"}

package/lib/Avatar.d.ts

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { ImageStyle, TextStyle, ViewStyle } from 'react-native';
-import { Omit, IMessage, User, LeftRightStyle } from './Models';
+import { IMessage, LeftRightStyle, User } from './Models';
 export interface AvatarProps<TMessage extends IMessage> {
-    currentMessage?: TMessage;
+    currentMessage: TMessage;
     previousMessage?: TMessage;
     nextMessage?: TMessage;
     position: 'left' | 'right';
@@ -13,25 +13,11 @@ export interface AvatarProps<TMessage extends IMessage> {
     containerStyle?: LeftRightStyle<ViewStyle>;
     textStyle?: TextStyle;
     renderAvatar?(props: Omit<AvatarProps<TMessage>, 'renderAvatar'>): ReactNode;
-    onPressAvatar?(user: User): void;
-    onLongPressAvatar?(user: User): void;
+    onPressAvatar?: (user: User) => void;
+    onLongPressAvatar?: (user: User) => void;
 }
-export declare function Avatar<TMessage extends IMessage = IMessage>(props: AvatarProps<TMessage>): JSX.Element | null;
+export declare function Avatar<TMessage extends IMessage = IMessage>(props: AvatarProps<TMessage>): React.JSX.Element | null;
 export declare namespace Avatar {
-    var defaultProps: {
-        renderAvatarOnTop: boolean;
-        showAvatarForEveryMessage: boolean;
-        position: string;
-        currentMessage: {
-            user: null;
-        };
-        previousMessage: {};
-        nextMessage: {};
-        containerStyle: {};
-        imageStyle: {};
-        onPressAvatar: () => void;
-        onLongPressAvatar: () => void;
-    };
     var propTypes: {
         renderAvatarOnTop: PropTypes.Requireable<boolean>;
         showAvatarForEveryMessage: PropTypes.Requireable<boolean>;
@@ -43,12 +29,12 @@ export declare namespace Avatar {
         onLongPressAvatar: PropTypes.Requireable<(...args: any[]) => any>;
         renderAvatar: PropTypes.Requireable<(...args: any[]) => any>;
         containerStyle: PropTypes.Requireable<PropTypes.InferProps<{
-            left: PropTypes.Requireable<number | boolean | object>;
-            right: PropTypes.Requireable<number | boolean | object>;
+            left: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
+            right: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
         }>>;
         imageStyle: PropTypes.Requireable<PropTypes.InferProps<{
-            left: PropTypes.Requireable<number | boolean | object>;
-            right: PropTypes.Requireable<number | boolean | object>;
+            left: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
+            right: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
         }>>;
     };
 }

package/lib/Avatar.js

@@ -11,7 +11,6 @@ const styles = {
         onTop: {
             alignSelf: 'flex-start',
         },
-        onBottom: {},
         image: {
             height: 36,
             width: 36,
@@ -25,7 +24,6 @@ const styles = {
         onTop: {
             alignSelf: 'flex-start',
         },
-        onBottom: {},
         image: {
             height: 36,
             width: 36,
@@ -34,62 +32,53 @@ const styles = {
     }),
 };
 export function Avatar(props) {
-    const { renderAvatarOnTop, showAvatarForEveryMessage, containerStyle, position, currentMessage, renderAvatar, previousMessage, nextMessage, imageStyle, } = props;
+    const { renderAvatarOnTop, showAvatarForEveryMessage, containerStyle, position, currentMessage, renderAvatar, previousMessage, nextMessage, imageStyle, onPressAvatar, onLongPressAvatar, } = props;
     const messageToCompare = renderAvatarOnTop ? previousMessage : nextMessage;
-    const computedStyle = renderAvatarOnTop ? 'onTop' : 'onBottom';
-    if (renderAvatar === null) {
+    if (renderAvatar === null)
         return null;
-    }
     if (!showAvatarForEveryMessage &&
         currentMessage &&
         messageToCompare &&
         isSameUser(currentMessage, messageToCompare) &&
-        isSameDay(currentMessage, messageToCompare)) {
+        isSameDay(currentMessage, messageToCompare))
         return (<View style={[
                 styles[position].container,
-                containerStyle && containerStyle[position],
+                containerStyle?.[position],
             ]}>
         <GiftedAvatar avatarStyle={[
                 styles[position].image,
-                imageStyle && imageStyle[position],
+                imageStyle?.[position],
             ]}/>
       </View>);
-    }
     const renderAvatarComponent = () => {
-        if (props.renderAvatar) {
-            const { renderAvatar, ...avatarProps } = props;
-            return props.renderAvatar(avatarProps);
-        }
-        if (props.currentMessage) {
+        if (renderAvatar)
+            return renderAvatar({
+                renderAvatarOnTop,
+                showAvatarForEveryMessage,
+                containerStyle,
+                position,
+                currentMessage,
+                previousMessage,
+                nextMessage,
+                imageStyle,
+                onPressAvatar,
+                onLongPressAvatar,
+            });
+        if (currentMessage)
             return (<GiftedAvatar avatarStyle={[
-                    styles[props.position].image,
-                    props.imageStyle && props.imageStyle[props.position],
-                ]} user={props.currentMessage.user} onPress={() => { var _a; return (_a = props.onPressAvatar) === null || _a === void 0 ? void 0 : _a.call(props, props.currentMessage.user); }} onLongPress={() => { var _a; return (_a = props.onLongPressAvatar) === null || _a === void 0 ? void 0 : _a.call(props, props.currentMessage.user); }}/>);
-        }
+                    styles[position].image,
+                    imageStyle?.[position],
+                ]} user={currentMessage.user} onPress={() => onPressAvatar?.(currentMessage.user)} onLongPress={() => onLongPressAvatar?.(currentMessage.user)}/>);
         return null;
     };
     return (<View style={[
             styles[position].container,
-            styles[position][computedStyle],
-            containerStyle && containerStyle[position],
+            renderAvatarOnTop && styles[position].onTop,
+            containerStyle?.[position],
         ]}>
       {renderAvatarComponent()}
     </View>);
 }
-Avatar.defaultProps = {
-    renderAvatarOnTop: false,
-    showAvatarForEveryMessage: false,
-    position: 'left',
-    currentMessage: {
-        user: null,
-    },
-    previousMessage: {},
-    nextMessage: {},
-    containerStyle: {},
-    imageStyle: {},
-    onPressAvatar: () => { },
-    onLongPressAvatar: () => { },
-};
 Avatar.propTypes = {
     renderAvatarOnTop: PropTypes.bool,
     showAvatarForEveryMessage: PropTypes.bool,

package/lib/Avatar.js.flow

@@ -7,7 +7,7 @@ import type {
 } from 'react-native/Libraries/StyleSheet/StyleSheet'
 
 export type AvatarProps<TMessage: IMessage = IMessage> = $ReadOnly<{|
-  currentMessage?: TMessage,
+  currentMessage: TMessage,
   previousMessage?: TMessage,
   nextMessage?: TMessage,
   position: 'left' | 'right',

package/lib/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAA;AAClC,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,EAEL,UAAU,EAEV,IAAI,GAEL,MAAM,cAAc,CAAA;AACrB,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAgB9D,MAAM,MAAM,GAAW;IACrB,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC;QACtB,SAAS,EAAE;YACT,WAAW,EAAE,CAAC;SACf;QACD,KAAK,EAAE;YACL,SAAS,EAAE,YAAY;SACxB;QACD,KAAK,EAAE;YACL,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,EAAE;YACT,YAAY,EAAE,EAAE;SACjB;KACF,CAAC;IACF,KAAK,EAAE,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,UAAU,EAAE,CAAC;SACd;QACD,KAAK,EAAE;YACL,SAAS,EAAE,YAAY;SACxB;QACD,KAAK,EAAE;YACL,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,EAAE;YACT,YAAY,EAAE,EAAE;SACjB;KACF,CAAC;CACH,CAAA;AAiBD,MAAM,UAAU,MAAM,CACpB,KAA4B;IAE5B,MAAM,EACJ,iBAAiB,EACjB,yBAAyB,EACzB,cAAc,EACd,QAAQ,EACR,cAAc,EACd,YAAY,EACZ,eAAe,EACf,WAAW,EACX,UAAU,EACV,aAAa,EACb,iBAAiB,GAClB,GAAG,KAAK,CAAA;IAET,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,WAAW,CAAA;IAE1E,IAAI,YAAY,KAAK,IAAI;QACvB,OAAO,IAAI,CAAA;IAEb,IACE,CAAC,yBAAyB;QAC1B,cAAc;QACd,gBAAgB;QAChB,UAAU,CAAC,cAAc,EAAE,gBAAgB,CAAC;QAC5C,SAAS,CAAC,cAAc,EAAE,gBAAgB,CAAC;QAE3C,OAAO,CACL,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;gBACL,MAAM,CAAC,QAAQ,CAAC,CAAC,SAAS;gBAC1B,cAAc,EAAE,CAAC,QAAQ,CAAC;aAC3B,CAAC,CAEF;QAAA,CAAC,YAAY,CACX,WAAW,CAAC,CAAC;gBACX,MAAM,CAAC,QAAQ,CAAC,CAAC,KAAK;gBACtB,UAAU,EAAE,CAAC,QAAQ,CAAC;aACvB,CAAC,EAEN;MAAA,EAAE,IAAI,CAAC,CACR,CAAA;IAEH,MAAM,qBAAqB,GAAG,GAAG,EAAE;QACjC,IAAI,YAAY;YACd,OAAO,YAAY,CAAC;gBAClB,iBAAiB;gBACjB,yBAAyB;gBACzB,cAAc;gBACd,QAAQ;gBACR,cAAc;gBACd,eAAe;gBACf,WAAW;gBACX,UAAU;gBACV,aAAa;gBACb,iBAAiB;aAClB,CAAC,CAAA;QAEJ,IAAI,cAAc;YAChB,OAAO,CACL,CAAC,YAAY,CACX,WAAW,CAAC,CAAC;oBACX,MAAM,CAAC,QAAQ,CAAC,CAAC,KAAK;oBACtB,UAAU,EAAE,CAAC,QAAQ,CAAC;iBACvB,CAAC,CACF,IAAI,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAC1B,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,aAAa,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CACpD,WAAW,CAAC,CAAC,GAAG,EAAE,CAAC,iBAAiB,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,EAC5D,CACH,CAAA;QAEH,OAAO,IAAI,CAAA;IACb,CAAC,CAAA;IAED,OAAO,CACL,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;YACL,MAAM,CAAC,QAAQ,CAAC,CAAC,SAAS;YAC1B,iBAAiB,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,KAAK;YAC3C,cAAc,EAAE,CAAC,QAAQ,CAAC;SAC3B,CAAC,CAEF;MAAA,CAAC,qBAAqB,EAAE,CAC1B;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,CAAC,SAAS,GAAG;IACjB,iBAAiB,EAAE,SAAS,CAAC,IAAI;IACjC,yBAAyB,EAAE,SAAS,CAAC,IAAI;IACzC,QAAQ,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC5C,cAAc,EAAE,SAAS,CAAC,MAAM;IAChC,eAAe,EAAE,SAAS,CAAC,MAAM;IACjC,WAAW,EAAE,SAAS,CAAC,MAAM;IAC7B,aAAa,EAAE,SAAS,CAAC,IAAI;IAC7B,iBAAiB,EAAE,SAAS,CAAC,IAAI;IACjC,YAAY,EAAE,SAAS,CAAC,IAAI;IAC5B,cAAc,EAAE,SAAS,CAAC,KAAK,CAAC;QAC9B,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,aAAa;KACrB,CAAC;IACF,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC;QAC1B,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,aAAa;KACrB,CAAC;CACH,CAAA"}

package/lib/Bubble.d.ts

@@ -6,10 +6,10 @@ import { MessageTextProps } from './MessageText';
 import { MessageImageProps } from './MessageImage';
 import { TimeProps } from './Time';
 import { User, IMessage, LeftRightStyle, Reply, Omit, MessageVideoProps, MessageAudioProps } from './Models';
-export declare type RenderMessageImageProps<TMessage extends IMessage> = Omit<BubbleProps<TMessage>, 'containerStyle' | 'wrapperStyle'> & MessageImageProps<TMessage>;
-export declare type RenderMessageVideoProps<TMessage extends IMessage> = Omit<BubbleProps<TMessage>, 'containerStyle' | 'wrapperStyle'> & MessageVideoProps<TMessage>;
-export declare type RenderMessageAudioProps<TMessage extends IMessage> = Omit<BubbleProps<TMessage>, 'containerStyle' | 'wrapperStyle'> & MessageAudioProps<TMessage>;
-export declare type RenderMessageTextProps<TMessage extends IMessage> = Omit<BubbleProps<TMessage>, 'containerStyle' | 'wrapperStyle'> & MessageTextProps<TMessage>;
+export type RenderMessageImageProps<TMessage extends IMessage> = Omit<BubbleProps<TMessage>, 'containerStyle' | 'wrapperStyle'> & MessageImageProps<TMessage>;
+export type RenderMessageVideoProps<TMessage extends IMessage> = Omit<BubbleProps<TMessage>, 'containerStyle' | 'wrapperStyle'> & MessageVideoProps<TMessage>;
+export type RenderMessageAudioProps<TMessage extends IMessage> = Omit<BubbleProps<TMessage>, 'containerStyle' | 'wrapperStyle'> & MessageAudioProps<TMessage>;
+export type RenderMessageTextProps<TMessage extends IMessage> = Omit<BubbleProps<TMessage>, 'containerStyle' | 'wrapperStyle'> & MessageTextProps<TMessage>;
 export interface BubbleProps<TMessage extends IMessage> {
     user?: User;
     touchableProps?: object;
@@ -17,7 +17,7 @@ export interface BubbleProps<TMessage extends IMessage> {
     isCustomViewBottom?: boolean;
     inverted?: boolean;
     position: 'left' | 'right';
-    currentMessage?: TMessage;
+    currentMessage: TMessage;
     nextMessage?: TMessage;
     previousMessage?: TMessage;
     optionTitles?: string[];
@@ -31,8 +31,9 @@ export interface BubbleProps<TMessage extends IMessage> {
     usernameStyle?: TextStyle;
     quickReplyStyle?: StyleProp<ViewStyle>;
     quickReplyTextStyle?: StyleProp<TextStyle>;
-    onPress?(context?: any, message?: any): void;
-    onLongPress?(context?: any, message?: any): void;
+    quickReplyContainerStyle?: StyleProp<ViewStyle>;
+    onPress?(context?: unknown, message?: unknown): void;
+    onLongPress?(context?: unknown, message?: unknown): void;
     onQuickReply?(replies: Reply[]): void;
     renderMessageImage?(props: RenderMessageImageProps<TMessage>): React.ReactNode;
     renderMessageVideo?(props: RenderMessageVideoProps<TMessage>): React.ReactNode;
@@ -100,26 +101,26 @@ export default class Bubble<TMessage extends IMessage = IMessage> extends React.
         nextMessage: PropTypes.Requireable<object>;
         previousMessage: PropTypes.Requireable<object>;
         containerStyle: PropTypes.Requireable<PropTypes.InferProps<{
-            left: PropTypes.Requireable<number | boolean | object>;
-            right: PropTypes.Requireable<number | boolean | object>;
+            left: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
+            right: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
         }>>;
         wrapperStyle: PropTypes.Requireable<PropTypes.InferProps<{
-            left: PropTypes.Requireable<number | boolean | object>;
-            right: PropTypes.Requireable<number | boolean | object>;
+            left: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
+            right: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
         }>>;
         bottomContainerStyle: PropTypes.Requireable<PropTypes.InferProps<{
-            left: PropTypes.Requireable<number | boolean | object>;
-            right: PropTypes.Requireable<number | boolean | object>;
+            left: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
+            right: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
         }>>;
-        tickStyle: PropTypes.Requireable<number | boolean | object>;
-        usernameStyle: PropTypes.Requireable<number | boolean | object>;
+        tickStyle: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
+        usernameStyle: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
         containerToNextStyle: PropTypes.Requireable<PropTypes.InferProps<{
-            left: PropTypes.Requireable<number | boolean | object>;
-            right: PropTypes.Requireable<number | boolean | object>;
+            left: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
+            right: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
         }>>;
         containerToPreviousStyle: PropTypes.Requireable<PropTypes.InferProps<{
-            left: PropTypes.Requireable<number | boolean | object>;
-            right: PropTypes.Requireable<number | boolean | object>;
+            left: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
+            right: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
         }>>;
     };
     onPress: () => void;
@@ -134,15 +135,15 @@ export default class Bubble<TMessage extends IMessage = IMessage> extends React.
     } | {
         borderTopRightRadius: number;
     })[] | null;
-    renderQuickReplies(): React.ReactNode;
-    renderMessageText(): React.ReactNode;
-    renderMessageImage(): React.ReactNode;
-    renderMessageVideo(): React.ReactNode;
-    renderMessageAudio(): React.ReactNode;
-    renderTicks(): React.ReactNode;
-    renderTime(): React.ReactNode;
-    renderUsername(): React.ReactNode;
+    renderQuickReplies(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+    renderMessageText(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+    renderMessageImage(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+    renderMessageVideo(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+    renderMessageAudio(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+    renderTicks(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+    renderTime(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+    renderUsername(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
     renderCustomView(): React.ReactNode;
-    renderBubbleContent(): JSX.Element;
-    render(): JSX.Element;
+    renderBubbleContent(): React.JSX.Element;
+    render(): React.JSX.Element;
 }