react-native-gifted-chat 2.4.1 → 2.6.0

package/README.md

@@ -113,6 +113,37 @@ Please give us your advice: [Related PR](https://github.com/FaridSafi/react-nati
 - Use version `0.1.x` for RN `>= 0.40.0`
 - Use version `0.0.10` for RN `< 0.40.0`
 
+# Getting started
+
+## Installation
+
+### Install dependencies
+
+Yarn:
+```bash
+yarn add react-native-gifted-chat react-native-reanimated react-native-safe-area-context
+```
+
+Npm:
+
+```bash
+npm install --save react-native-gifted-chat react-native-reanimated react-native-safe-area-context
+```
+
+Expo
+```bash
+npx expo install react-native-gifted-chat react-native-reanimated react-native-safe-area-context
+```
+
+### Setup react-native-safe-area-context
+
+Follow guide: [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context?tab=readme-ov-file#api)
+
+### react-native-video and expo-av
+
+- Both dependencies are removed since `0.11.0`.
+- You still be able to provide a `video` but you need to provide `renderMessageVideo` prop.
+
 ## Testing
 `TEST_ID` is exported as constants that can be used in your testing library of choice
 
@@ -133,16 +164,6 @@ fireEvent(loadingWrapper, 'layout', {
 })
 ```
 
-## Installation
-
-- Using [npm](https://www.npmjs.com/#getting-started): `npm install react-native-gifted-chat --save`
-- Using [Yarn](https://yarnpkg.com/): `yarn add react-native-gifted-chat`
-
-### react-native-video and expo-av
-
-- Both dependencies are removed since `0.11.0`.
-- You still be able to provide a `video` but you need to provide `renderMessageVideo` prop.
-
 ## You have a question?
 
 1. Please check this readme and may find a response
@@ -264,7 +285,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 {
@@ -346,7 +367,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
@@ -361,7 +381,7 @@ interface QuickReplies {
 - **`renderTicks`** _(Function(`message`))_ - Custom ticks indicator to display message status
 - **`renderSystemMessage`** _(Function)_ - Custom system message
 - **`onPress`** _(Function(`context`, `message`))_ - Callback when a message bubble is pressed
-- **`onLongPress`** _(Function(`context`, `message`))_ - Callback when a message bubble is long-pressed; default is to show an ActionSheet with "Copy Text" (see [example using `showActionSheetWithOptions()`](https://github.com/FaridSafi/react-native-gifted-chat/blob/master@%7B2017-09-25%7D/src/Bubble.js#L96-L119))
+- **`onLongPress`** _(Function(`context`, `message`))_ - Callback when a message bubble is long-pressed (see [example using `showActionSheetWithOptions()`](https://github.com/FaridSafi/react-native-gifted-chat/blob/master@%7B2017-09-25%7D/src/Bubble.js#L96-L119))
 - **`inverted`** _(Bool)_ - Reverses display order of `messages`; default is `true`
 - **`renderUsernameOnMessage`** _(Bool)_ - Indicate whether to show the user's username inside the message bubble; default is `false`
 - **`renderUsername`** _(Function)_ - Custom Username container
@@ -385,7 +405,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)
@@ -546,6 +565,7 @@ Feel free to ask me questions on Twitter [@FaridSafi](https://www.twitter.com/Fa
 - Kfir Golan [kfiroo](https://github.com/kfiroo)
 - Bruno Cascio [brunocascio](https://github.com/brunocascio)
 - Xavier Carpentier [xcarpentier](https://github.com/xcarpentier)
+- Kesha Antonov [kesha-antonov](https://github.com/kesha-antonov)
 - [more](https://github.com/FaridSafi/react-native-gifted-chat/graphs/contributors)
 
 ## Hire an expert!

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":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAA;AAClC,OAAO,KAAK,EAAE,EAAa,WAAW,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,EACL,UAAU,EACV,IAAI,EACJ,gBAAgB,EAChB,IAAI,GAIL,MAAM,cAAc,CAAA;AACrB,OAAO,KAAK,MAAM,SAAS,CAAA;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAYpD,MAAM,UAAU,OAAO,CAAE,EACvB,OAAO,EACP,eAAe,GAAG,KAAK,CAAC,eAAe,EACvC,IAAI,EACJ,YAAY,EACZ,aAAa,EACb,mBAAmB,EACnB,cAAc,GACD;IACb,MAAM,EAAE,WAAW,EAAE,GAAG,cAAc,EAAE,CAAA;IAExC,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,IAAI,CAAC,OAAO;YACV,OAAM;QAER,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QACvC,MAAM,iBAAiB,GAAG,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;QAEtD,WAAW,EAAE,CAAC,0BAA0B,CACtC;YACE,OAAO,EAAE,UAAU;YACnB,iBAAiB;YACjB,SAAS,EAAE,eAAe;SAC3B,EACD,CAAC,WAA+B,EAAE,EAAE;YAClC,IAAI,WAAW,KAAK,SAAS;gBAC3B,OAAM;YAER,MAAM,GAAG,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;YACnC,IAAI,GAAG;gBACL,OAAO,CAAC,GAAG,CAAC,EAAE,CAAA;QAClB,CAAC,CACF,CAAA;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,EAAE,eAAe,CAAC,CAAC,CAAA;IAE3C,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,IAAI,IAAI;YACN,OAAO,IAAI,EAAE,CAAA;QAEf,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAC1C;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,IAAI,CAC5D;MAAA,EAAE,IAAI,CAAC,CACR,CAAA;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,YAAY,CAAC,CAAC,CAAA;IAEvC,OAAO,CACL,CAAC,gBAAgB,CACf,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAC1C,OAAO,CAAC,CAAC,mBAAmB,IAAI,cAAc,CAAC,CAE/C;MAAA,CAAC,UAAU,EAAE,CACf;IAAA,EAAE,gBAAgB,CAAC,CACpB,CAAA;AACH,CAAC;AAED,OAAO,CAAC,SAAS,GAAG;IAClB,OAAO,EAAE,SAAS,CAAC,MAAM;IACzB,eAAe,EAAE,SAAS,CAAC,MAAM;IACjC,IAAI,EAAE,SAAS,CAAC,IAAI;IACpB,mBAAmB,EAAE,SAAS,CAAC,IAAI;IACnC,YAAY,EAAE,aAAa;IAC3B,cAAc,EAAE,aAAa;CAC9B,CAAA;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,UAAU,EAAE,EAAE;QACd,YAAY,EAAE,EAAE;KACjB;IACD,OAAO,EAAE;QACP,YAAY,EAAE,EAAE;QAChB,WAAW,EAAE,KAAK,CAAC,YAAY;QAC/B,WAAW,EAAE,CAAC;QACd,IAAI,EAAE,CAAC;QACP,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KACzB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,YAAY;QACzB,UAAU,EAAE,MAAM;QAClB,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,EAAE;QACd,eAAe,EAAE,KAAK,CAAC,qBAAqB;QAC5C,SAAS,EAAE,QAAQ;KACpB;CACF,CAAC,CAAA"}

package/lib/Avatar.d.ts

@@ -3,36 +3,20 @@ import React, { ReactNode } from 'react';
 import { ImageStyle, TextStyle, ViewStyle } from 'react-native';
 import { IMessage, LeftRightStyle, User } from './Models';
 export interface AvatarProps<TMessage extends IMessage> {
-    currentMessage?: TMessage;
+    currentMessage: TMessage;
     previousMessage?: TMessage;
     nextMessage?: TMessage;
-    position: 'left' | 'right' | string;
+    position: 'left' | 'right';
     renderAvatarOnTop?: boolean;
     showAvatarForEveryMessage?: boolean;
     imageStyle?: LeftRightStyle<ImageStyle>;
     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({ renderAvatarOnTop, showAvatarForEveryMessage, containerStyle, position, currentMessage, previousMessage, nextMessage, renderAvatar, imageStyle, onPressAvatar, onLongPressAvatar, }: {
-    renderAvatarOnTop?: boolean | undefined;
-    showAvatarForEveryMessage?: boolean | undefined;
-    containerStyle?: {
-        [key: string]: any;
-    } | undefined;
-    position?: string | undefined;
-    currentMessage?: IMessage | undefined;
-    previousMessage?: IMessage | undefined;
-    nextMessage?: IMessage | undefined;
-    renderAvatar?: ((props: Omit<AvatarProps<IMessage>, "renderAvatar">) => React.ReactNode) | undefined;
-    imageStyle?: {
-        [key: string]: any;
-    } | undefined;
-    onPressAvatar?: (({}: {}) => void) | undefined;
-    onLongPressAvatar?: (({}: {}) => void) | undefined;
-}): JSX.Element | null;
+export declare function Avatar<TMessage extends IMessage = IMessage>(props: AvatarProps<TMessage>): React.JSX.Element | null;
 export declare namespace Avatar {
     var propTypes: {
         renderAvatarOnTop: PropTypes.Requireable<boolean>;
@@ -45,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,
@@ -33,29 +31,27 @@ const styles = {
         },
     }),
 };
-export function Avatar({ renderAvatarOnTop = false, showAvatarForEveryMessage = false, containerStyle = {}, position = 'left', currentMessage = {}, previousMessage = {}, nextMessage = {}, renderAvatar = (({}) => null), imageStyle = {}, onPressAvatar = ({}) => { }, onLongPressAvatar = ({}) => { }, }) {
+export function Avatar(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 (renderAvatar) {
+        if (renderAvatar)
             return renderAvatar({
                 renderAvatarOnTop,
                 showAvatarForEveryMessage,
@@ -68,19 +64,17 @@ export function Avatar({ renderAvatarOnTop = false, showAvatarForEveryMessage =
                 onPressAvatar,
                 onLongPressAvatar,
             });
-        }
-        if (currentMessage) {
+        if (currentMessage)
             return (<GiftedAvatar avatarStyle={[
                     styles[position].image,
-                    imageStyle && imageStyle[position],
-                ]} user={currentMessage.user} onPress={() => onPressAvatar(currentMessage.user)} onLongPress={() => onLongPressAvatar(currentMessage.user)}/>);
-        }
+                    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>);

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":"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"}

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[];
@@ -32,8 +32,8 @@ export interface BubbleProps<TMessage extends IMessage> {
     quickReplyStyle?: StyleProp<ViewStyle>;
     quickReplyTextStyle?: StyleProp<TextStyle>;
     quickReplyContainerStyle?: StyleProp<ViewStyle>;
-    onPress?(context?: any, message?: any): void;
-    onLongPress?(context?: any, message?: any): void;
+    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;
@@ -63,7 +63,6 @@ export default class Bubble<TMessage extends IMessage = IMessage> extends React.
         renderQuickReplies: null;
         onQuickReply: null;
         position: string;
-        optionTitles: string[];
         currentMessage: {
             text: null;
             createdAt: null;
@@ -101,26 +100,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;
@@ -135,15 +134,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;
 }