react-native-gifted-chat 0.16.3 → 1.0.0-beta-3

package/.eslintignore

@@ -0,0 +1,2 @@
+
+example/*

package/.eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  // extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+  rules: {
+    'member-access': 0,
+    'interface-name': 0,
+    'ordered-imports': 0,
+    'object-literal-sort-keys': 0,
+    'variable-name': 0,
+    'one-variable-per-declaration': 0,
+    'no-empty': 0,
+    'no-console': 0,
+    'no-shadowed-variable': 0,
+    'no-extra-boolean-cast': 0,
+  },
+}

package/README.md

@@ -16,7 +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://greenkeeper.io/"><img src="https://badges.greenkeeper.io/FaridSafi/react-native-gifted-chat.svg" alt="build"></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>
@@ -57,15 +56,15 @@
 
 <p align="center">
   <br/>
-  <a href="https://getstream.io/chat/?utm_source=github&utm_medium=react-native-gifted-chat&utm_campaign=sponsorship" target="_blank">
+  <a href="https://getstream.io/chat/?utm_source=Github&utm_medium=Github_Repo_Content_Ad&utm_content=Developer&utm_campaign=Github_Jan2022_Chat&utm_term=react-native-gifted-chat" target="_blank">
     <img src="https://i.imgur.com/oU7XYkk.png">
   </a>
   <br>
   <p align="center">
-    Scalable <a href="https://getstream.io/chat/?utm_source=github&utm_medium=react-native-gifted-chat&utm_campaign=sponsorship" target="_blank">chat API/Server</a> written in Go
+    Scalable <a href="https://getstream.io/chat/?utm_source=Github&utm_medium=Github_Repo_Content_Ad&utm_content=Developer&utm_campaign=Github_Jan2022_Chat&utm_term=react-native-gifted-chat" target="_blank">chat API/Server</a> written in Go
   </p>
   <p align="center">
-    <a href="https://getstream.io/chat/get_started/?utm_source=github&utm_medium=react-native-gifted-chat&utm_campaign=sponsorship" target="_blank">API Tour</a> | <a href="https://dev.to/nickparsons/react-native-chat-with-chuck-norris-3h7m?utm_source=github&utm_medium=react-native-gifted-chat&utm_campaign=sponsorship" target="_blank">React Native Gifted tutorial</a>
+    <a href="https://getstream.io/chat/get_started/?utm_source=Github&utm_medium=Github_Repo_Content_Ad&utm_content=Developer&utm_campaign=Github_Jan2022_Chat&utm_term=react-native-gifted-chat" target="_blank">API Tour</a> | <a href="https://dev.to/nickparsons/react-native-chat-with-chuck-norris-3h7m?utm_source=Github&utm_medium=Github_Repo_Content_Ad&utm_content=Developer&utm_campaign=Github_Jan2022_Chat&utm_term=react-native-gifted-chat" target="_blank">React Native Gifted tutorial</a>
   </p>
 </p>
 
@@ -81,11 +80,12 @@
   </p>
 </p>
 
+## The future of GiftedChat 🎉 
+Please give us your advice: [Related PR](https://github.com/FaridSafi/react-native-gifted-chat/pull/1775)
+
 ## Please vote
 
 **GiftedChat** depends on other packages and some needs a boost, please vote for PRs will improve it, thanks:
-
-- https://github.com/taskrabbit/react-native-parsed-text/pull/58
 - https://github.com/watadarkstar/react-native-typing-animation/issues/18
 
 ## Features
@@ -104,7 +104,7 @@
 - Redux support
 - System message
 - Quick Reply messages (bot)
-- Typying indicatior [react-native-typing-animation](https://github.com/watadarkstar/react-native-typing-animation)
+- Typing indicator [react-native-typing-animation](https://github.com/watadarkstar/react-native-typing-animation)
 
 ## Dependency
 
@@ -318,8 +318,8 @@ interface QuickReplies {
 - **`onSend`** _(Function)_ - Callback when sending a message
 - **`alwaysShowSend`** _(Bool)_ - Always show send button in input text composer; default `false`, show only when text input is not empty
 - **`locale`** _(String)_ - Locale to localize the dates. You need first to import the locale you need (ie. `require('dayjs/locale/de')` or `import 'dayjs/locale/fr'`)
-- **`timeFormat`** _(String)_ - Format to use for rendering times; default is `'LT'`
-- **`dateFormat`** _(String)_ - Format to use for rendering dates; default is `'ll'`
+- **`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
@@ -335,6 +335,7 @@ interface QuickReplies {
 - **`renderBubble`** _(Function)_ - Custom message bubble
 - **`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))
 - **`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`
@@ -349,7 +350,7 @@ interface QuickReplies {
 - **`renderCustomView`** _(Function)_ - Custom view inside the bubble
 - **`renderDay`** _(Function)_ - Custom day above a message
 - **`renderTime`** _(Function)_ - Custom time inside a message
-- **`renderFooter`** _(Function)_ - Custom footer component on the ListView, e.g. `'User is typing...'`; see [example/App.js](example/App.js) for an example. Overrides default typing indicator that triggers when `isTyping` is true.
+- **`renderFooter`** _(Function)_ - Custom footer component on the ListView, e.g. `'User is typing...'`; see [App.tsx](/App.tsx) for an example. Overrides default typing indicator that triggers when `isTyping` is true.
 - **`renderChatEmpty`** _(Function)_ - Custom component to render in the ListView when messages are empty
 - **`renderChatFooter`** _(Function)_ - Custom component to render below the MessageContainer (separate from the ListView)
 - **`renderInputToolbar`** _(Function)_ - Custom message composer container
@@ -451,15 +452,17 @@ If you use React Navigation, additional handling may be required to account for
 
 ### Native
 
-1. Install `yarn add -g expo-cli`
-2. `expo start`
+1. Install `yarn global add expo-cli`
+2. Install dependencies`yarn install`
+3. `expo start`
 
 ### react-native-web
 
 #### With expo
 
-1. Install `yarn add -g expo-cli`
-2. `expo start -w`
+1. Install `yarn global add expo-cli`
+2. Install dependencies`yarn install`
+3. `expo start -w`
 
 [Upgrade snack version](https://snackager.expo.io/bundle/react-native-gifted-chat@0.15.0?bypassCache=true)
 
@@ -525,4 +528,4 @@ Feel free to ask me questions on Twitter [@FaridSafi](https://www.twitter.com/Fa
 
 ## Hire an expert!
 
-Looking for a ReactNative freelance expert with more than 12 years of experience? Contact Xavier from his [website](https://xaviercarpentier.com)!
+Looking for a ReactNative freelance expert with more than 14 years of experience? Contact Xavier from his [website](https://xaviercarpentier.com)!

package/jest.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  preset: 'react-native',
+  setupFiles: ['<rootDir>/tests/setup.js'],
+  moduleFileExtensions: ['js', 'jsx', 'json', 'ts', 'tsx'],
+  transform: {
+    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
+    // '^.+\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
+  },
+  transformIgnorePatterns: [
+    '/node_modules/(?!(@react-native|react-native)).*/',
+  ],
+  testMatch: ['**/*.test.ts?(x)'],
+  modulePathIgnorePatterns: ['<rootDir>/example'],
+  coveragePathIgnorePatterns: ['./src/__tests__/'],
+}

package/lib/Actions.d.ts

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { StyleProp, ViewStyle, TextStyle } from 'react-native';
 export interface ActionsProps {
     options?: {
@@ -12,9 +12,9 @@ export interface ActionsProps {
     containerStyle?: StyleProp<ViewStyle>;
     onPressActionButton?(): void;
 }
-export default class Actions extends React.Component<ActionsProps> {
-    static defaultProps: ActionsProps;
-    static propTypes: {
+export declare function Actions({ options, optionTintColor, icon, wrapperStyle, iconTextStyle, onPressActionButton, containerStyle, }: ActionsProps): JSX.Element;
+export declare namespace Actions {
+    var propTypes: {
         onSend: PropTypes.Requireable<(...args: any[]) => any>;
         options: PropTypes.Requireable<object>;
         optionTintColor: PropTypes.Requireable<string>;
@@ -23,10 +23,4 @@ export default class Actions extends React.Component<ActionsProps> {
         wrapperStyle: PropTypes.Requireable<number | boolean | object>;
         containerStyle: PropTypes.Requireable<number | boolean | object>;
     };
-    static contextTypes: {
-        actionSheet: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    onActionsPress: () => void;
-    renderIcon(): {} | null | undefined;
-    render(): JSX.Element;
 }

package/lib/Actions.js

@@ -3,47 +3,36 @@ import React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View, } from 'react-native';
 import Color from './Color';
 import { StylePropType } from './utils';
-export default class Actions extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.onActionsPress = () => {
-            const { options } = this.props;
-            const optionKeys = Object.keys(options);
-            const cancelButtonIndex = optionKeys.indexOf('Cancel');
-            this.context.actionSheet().showActionSheetWithOptions({
-                options: optionKeys,
-                cancelButtonIndex,
-                tintColor: this.props.optionTintColor,
-            }, (buttonIndex) => {
-                const key = optionKeys[buttonIndex];
-                if (key) {
-                    options[key](this.props);
-                }
-            });
-        };
-    }
-    renderIcon() {
-        if (this.props.icon) {
-            return this.props.icon();
+import { useChatContext } from './GiftedChatContext';
+import { useCallbackOne } from 'use-memo-one';
+export function Actions({ options = {}, optionTintColor = Color.optionTintColor, icon, wrapperStyle, iconTextStyle, onPressActionButton, containerStyle, }) {
+    const { actionSheet } = useChatContext();
+    const onActionsPress = useCallbackOne(() => {
+        const optionKeys = Object.keys(options);
+        const cancelButtonIndex = optionKeys.indexOf('Cancel');
+        actionSheet().showActionSheetWithOptions({
+            options: optionKeys,
+            cancelButtonIndex,
+            tintColor: optionTintColor,
+        }, (buttonIndex) => {
+            const key = optionKeys[buttonIndex];
+            if (key) {
+                options[key]();
+            }
+        });
+    }, []);
+    const renderIcon = useCallbackOne(() => {
+        if (icon) {
+            return icon();
         }
-        return (<View style={[styles.wrapper, this.props.wrapperStyle]}>
-        <Text style={[styles.iconText, this.props.iconTextStyle]}>+</Text>
+        return (<View style={[styles.wrapper, wrapperStyle]}>
+        <Text style={[styles.iconText, iconTextStyle]}>+</Text>
       </View>);
-    }
-    render() {
-        return (<TouchableOpacity style={[styles.container, this.props.containerStyle]} onPress={this.props.onPressActionButton || this.onActionsPress}>
-        {this.renderIcon()}
-      </TouchableOpacity>);
-    }
+    }, []);
+    return (<TouchableOpacity style={[styles.container, containerStyle]} onPress={onPressActionButton || onActionsPress}>
+      {renderIcon()}
+    </TouchableOpacity>);
 }
-Actions.defaultProps = {
-    options: {},
-    optionTintColor: Color.optionTintColor,
-    icon: undefined,
-    containerStyle: {},
-    iconTextStyle: {},
-    wrapperStyle: {},
-};
 Actions.propTypes = {
     onSend: PropTypes.func,
     options: PropTypes.object,
@@ -53,9 +42,6 @@ Actions.propTypes = {
     wrapperStyle: StylePropType,
     containerStyle: StylePropType,
 };
-Actions.contextTypes = {
-    actionSheet: PropTypes.func,
-};
 const styles = StyleSheet.create({
     container: {
         width: 26,

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,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { ImageStyle, TextStyle, ViewStyle } from 'react-native';
 import { Omit, IMessage, User, LeftRightStyle } from './Models';
 export interface AvatarProps<TMessage extends IMessage> {
@@ -16,8 +16,9 @@ export interface AvatarProps<TMessage extends IMessage> {
     onPressAvatar?(user: User): void;
     onLongPressAvatar?(user: User): void;
 }
-export default class Avatar<TMessage extends IMessage = IMessage> extends React.Component<AvatarProps<TMessage>> {
-    static defaultProps: {
+export declare function Avatar<TMessage extends IMessage = IMessage>(props: AvatarProps<TMessage>): JSX.Element | null;
+export declare namespace Avatar {
+    var defaultProps: {
         renderAvatarOnTop: boolean;
         showAvatarForEveryMessage: boolean;
         position: string;
@@ -31,7 +32,7 @@ export default class Avatar<TMessage extends IMessage = IMessage> extends React.
         onPressAvatar: () => void;
         onLongPressAvatar: () => void;
     };
-    static propTypes: {
+    var propTypes: {
         renderAvatarOnTop: PropTypes.Requireable<boolean>;
         showAvatarForEveryMessage: PropTypes.Requireable<boolean>;
         position: PropTypes.Requireable<string>;
@@ -50,6 +51,4 @@ export default class Avatar<TMessage extends IMessage = IMessage> extends React.
             right: PropTypes.Requireable<number | boolean | object>;
         }>>;
     };
-    renderAvatar(): {} | null | undefined;
-    render(): JSX.Element | null;
 }

package/lib/Avatar.js

@@ -33,53 +33,48 @@ const styles = {
         },
     }),
 };
-export default class Avatar extends React.Component {
-    renderAvatar() {
-        if (this.props.renderAvatar) {
-            const { renderAvatar, ...avatarProps } = this.props;
-            return this.props.renderAvatar(avatarProps);
-        }
-        if (this.props.currentMessage) {
-            return (<GiftedAvatar avatarStyle={[
-                styles[this.props.position].image,
-                this.props.imageStyle &&
-                    this.props.imageStyle[this.props.position],
-            ]} textStyle={this.props.textStyle ? this.props.textStyle : {}} user={this.props.currentMessage.user} onPress={() => this.props.onPressAvatar &&
-                this.props.onPressAvatar(this.props.currentMessage.user)} onLongPress={() => this.props.onLongPressAvatar &&
-                this.props.onLongPressAvatar(this.props.currentMessage.user)}/>);
-        }
+export function Avatar(props) {
+    const { renderAvatarOnTop, showAvatarForEveryMessage, containerStyle, position, currentMessage, renderAvatar, previousMessage, nextMessage, imageStyle, } = props;
+    const messageToCompare = renderAvatarOnTop ? previousMessage : nextMessage;
+    const computedStyle = renderAvatarOnTop ? 'onTop' : 'onBottom';
+    if (renderAvatar === null) {
         return null;
     }
-    render() {
-        const { renderAvatarOnTop, showAvatarForEveryMessage, containerStyle, position, currentMessage, renderAvatar, previousMessage, nextMessage, imageStyle, } = this.props;
-        const messageToCompare = renderAvatarOnTop ? previousMessage : nextMessage;
-        const computedStyle = renderAvatarOnTop ? 'onTop' : 'onBottom';
-        if (renderAvatar === null) {
-            return null;
-        }
-        if (!showAvatarForEveryMessage &&
-            currentMessage &&
-            messageToCompare &&
-            isSameUser(currentMessage, messageToCompare) &&
-            isSameDay(currentMessage, messageToCompare)) {
-            return (<View style={[
+    if (!showAvatarForEveryMessage &&
+        currentMessage &&
+        messageToCompare &&
+        isSameUser(currentMessage, messageToCompare) &&
+        isSameDay(currentMessage, messageToCompare)) {
+        return (<View style={[
                 styles[position].container,
                 containerStyle && containerStyle[position],
             ]}>
-          <GiftedAvatar avatarStyle={[
+        <GiftedAvatar avatarStyle={[
                 styles[position].image,
                 imageStyle && imageStyle[position],
             ]}/>
-        </View>);
+      </View>);
+    }
+    const renderAvatarComponent = () => {
+        if (props.renderAvatar) {
+            const { renderAvatar, ...avatarProps } = props;
+            return props.renderAvatar(avatarProps);
         }
-        return (<View style={[
+        if (props.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); }}/>);
+        }
+        return null;
+    };
+    return (<View style={[
             styles[position].container,
             styles[position][computedStyle],
             containerStyle && containerStyle[position],
         ]}>
-        {this.renderAvatar()}
-      </View>);
-    }
+      {renderAvatarComponent()}
+    </View>);
 }
 Avatar.defaultProps = {
     renderAvatarOnTop: false,

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

@@ -1,15 +1,15 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { StyleProp, ViewStyle, TextStyle } from 'react-native';
-import QuickReplies from './QuickReplies';
-import MessageText from './MessageText';
-import MessageImage from './MessageImage';
-import Time from './Time';
+import { QuickRepliesProps } from './QuickReplies';
+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'> & MessageImage['props'];
+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'> & MessageText['props'];
+export declare type RenderMessageTextProps<TMessage extends IMessage> = Omit<BubbleProps<TMessage>, 'containerStyle' | 'wrapperStyle'> & MessageTextProps<TMessage>;
 export interface BubbleProps<TMessage extends IMessage> {
     user?: User;
     touchableProps?: object;
@@ -30,6 +30,8 @@ export interface BubbleProps<TMessage extends IMessage> {
     containerToPreviousStyle?: LeftRightStyle<ViewStyle>;
     usernameStyle?: TextStyle;
     quickReplyStyle?: StyleProp<ViewStyle>;
+    quickReplyTextStyle?: StyleProp<TextStyle>;
+    onPress?(context?: any, message?: any): void;
     onLongPress?(context?: any, message?: any): void;
     onQuickReply?(replies: Reply[]): void;
     renderMessageImage?(props: RenderMessageImageProps<TMessage>): React.ReactNode;
@@ -37,11 +39,11 @@ export interface BubbleProps<TMessage extends IMessage> {
     renderMessageAudio?(props: RenderMessageAudioProps<TMessage>): React.ReactNode;
     renderMessageText?(props: RenderMessageTextProps<TMessage>): React.ReactNode;
     renderCustomView?(bubbleProps: BubbleProps<TMessage>): React.ReactNode;
-    renderTime?(timeProps: Time['props']): React.ReactNode;
+    renderTime?(timeProps: TimeProps<TMessage>): React.ReactNode;
     renderTicks?(currentMessage: TMessage): React.ReactNode;
     renderUsername?(): React.ReactNode;
     renderQuickReplySend?(): React.ReactNode;
-    renderQuickReplies?(quickReplies: QuickReplies['props']): React.ReactNode;
+    renderQuickReplies?(quickReplies: QuickRepliesProps): React.ReactNode;
 }
 export default class Bubble<TMessage extends IMessage = IMessage> extends React.Component<BubbleProps<TMessage>> {
     static contextTypes: {
@@ -49,6 +51,7 @@ export default class Bubble<TMessage extends IMessage = IMessage> extends React.
     };
     static defaultProps: {
         touchableProps: {};
+        onPress: null;
         onLongPress: null;
         renderMessageImage: null;
         renderMessageVideo: null;
@@ -121,26 +124,27 @@ export default class Bubble<TMessage extends IMessage = IMessage> extends React.
             right: PropTypes.Requireable<number | boolean | object>;
         }>>;
     };
+    onPress: () => void;
     onLongPress: () => void;
-    styledBubbleToNext(): (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | {
+    styledBubbleToNext(): (StyleProp<ViewStyle> | {
         borderBottomLeftRadius: number;
     } | {
         borderBottomRightRadius: number;
-    } | null | undefined)[] | null;
-    styledBubbleToPrevious(): (false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | {
+    })[] | null;
+    styledBubbleToPrevious(): (StyleProp<ViewStyle> | {
         borderTopLeftRadius: number;
     } | {
         borderTopRightRadius: number;
-    } | null | undefined)[] | null;
-    renderQuickReplies(): {} | null | undefined;
-    renderMessageText(): {} | null | undefined;
-    renderMessageImage(): {} | null | undefined;
-    renderMessageVideo(): {} | null | undefined;
-    renderMessageAudio(): {} | null | undefined;
-    renderTicks(): {} | null | undefined;
-    renderTime(): {} | null | undefined;
+    })[] | null;
+    renderQuickReplies(): React.ReactNode;
+    renderMessageText(): React.ReactNode;
+    renderMessageImage(): React.ReactNode;
+    renderMessageVideo(): React.ReactNode;
+    renderMessageAudio(): React.ReactNode;
+    renderTicks(): React.ReactNode;
+    renderTime(): React.ReactNode;
     renderUsername(): JSX.Element | null;
-    renderCustomView(): {} | null | undefined;
+    renderCustomView(): React.ReactNode;
     renderBubbleContent(): JSX.Element;
     render(): JSX.Element;
 }

package/lib/Bubble.js

@@ -1,12 +1,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Text, Clipboard, StyleSheet, TouchableWithoutFeedback, View, } from 'react-native';
-import QuickReplies from './QuickReplies';
-import MessageText from './MessageText';
-import MessageImage from './MessageImage';
-import MessageVideo from './MessageVideo';
-import MessageAudio from './MessageAudio';
-import Time from './Time';
+import { QuickReplies } from './QuickReplies';
+import { MessageText } from './MessageText';
+import { MessageImage } from './MessageImage';
+import { MessageVideo } from './MessageVideo';
+import { MessageAudio } from './MessageAudio';
+import { Time } from './Time';
 import Color from './Color';
 import { StylePropType, isSameUser, isSameDay } from './utils';
 const styles = {
@@ -83,6 +83,11 @@ const DEFAULT_OPTION_TITLES = ['Copy Text', 'Cancel'];
 export default class Bubble extends React.Component {
     constructor() {
         super(...arguments);
+        this.onPress = () => {
+            if (this.props.onPress) {
+                this.props.onPress(this.context, this.props.currentMessage);
+            }
+        };
         this.onLongPress = () => {
             const { currentMessage } = this.props;
             if (this.props.onLongPress) {
@@ -138,7 +143,7 @@ export default class Bubble extends React.Component {
         return null;
     }
     renderQuickReplies() {
-        const { currentMessage, onQuickReply, nextMessage, renderQuickReplySend, quickReplyStyle, } = this.props;
+        const { currentMessage, onQuickReply, nextMessage, renderQuickReplySend, quickReplyStyle, quickReplyTextStyle, } = this.props;
         if (currentMessage && currentMessage.quickReplies) {
             const { containerStyle, wrapperStyle, ...quickReplyProps } = this.props;
             if (this.props.renderQuickReplies) {
@@ -150,6 +155,7 @@ export default class Bubble extends React.Component {
                 nextMessage,
                 renderQuickReplySend,
                 quickReplyStyle,
+                quickReplyTextStyle,
             }}/>);
         }
         return null;
@@ -263,22 +269,22 @@ export default class Bubble extends React.Component {
     render() {
         const { position, containerStyle, wrapperStyle, bottomContainerStyle, } = this.props;
         return (<View style={[
-            styles[position].container,
-            containerStyle && containerStyle[position],
-        ]}>
+                styles[position].container,
+                containerStyle && containerStyle[position],
+            ]}>
         <View style={[
-            styles[position].wrapper,
-            this.styledBubbleToNext(),
-            this.styledBubbleToPrevious(),
-            wrapperStyle && wrapperStyle[position],
-        ]}>
-          <TouchableWithoutFeedback onLongPress={this.onLongPress} accessibilityTraits='text' {...this.props.touchableProps}>
+                styles[position].wrapper,
+                this.styledBubbleToNext(),
+                this.styledBubbleToPrevious(),
+                wrapperStyle && wrapperStyle[position],
+            ]}>
+          <TouchableWithoutFeedback onPress={this.onPress} onLongPress={this.onLongPress} accessibilityRole='text' {...this.props.touchableProps}>
             <View>
               {this.renderBubbleContent()}
               <View style={[
-            styles[position].bottom,
-            bottomContainerStyle && bottomContainerStyle[position],
-        ]}>
+                styles[position].bottom,
+                bottomContainerStyle && bottomContainerStyle[position],
+            ]}>
                 {this.renderUsername()}
                 {this.renderTime()}
                 {this.renderTicks()}
@@ -295,6 +301,7 @@ Bubble.contextTypes = {
 };
 Bubble.defaultProps = {
     touchableProps: {},
+    onPress: null,
     onLongPress: null,
     renderMessageImage: null,
     renderMessageVideo: null,