react-native-gifted-chat 0.16.1 → 1.0.0-beta-1

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>
@@ -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
@@ -132,48 +132,40 @@
 ## Example
 
 ```jsx
-import React from 'react'
+import React, { useState, useCallback, useEffect } from 'react'
 import { GiftedChat } from 'react-native-gifted-chat'
 
-class Example extends React.Component {
-  state = {
-    messages: [],
-  }
-
-  componentDidMount() {
-    this.setState({
-      messages: [
-        {
-          _id: 1,
-          text: 'Hello developer',
-          createdAt: new Date(),
-          user: {
-            _id: 2,
-            name: 'React Native',
-            avatar: 'https://placeimg.com/140/140/any',
-          },
+export function Example() {
+  const [messages, setMessages] = useState([]);
+
+  useEffect(() => {
+    setMessages([
+      {
+        _id: 1,
+        text: 'Hello developer',
+        createdAt: new Date(),
+        user: {
+          _id: 2,
+          name: 'React Native',
+          avatar: 'https://placeimg.com/140/140/any',
         },
-      ],
-    })
-  }
-
-  onSend(messages = []) {
-    this.setState(previousState => ({
-      messages: GiftedChat.append(previousState.messages, messages),
-    }))
-  }
-
-  render() {
-    return (
-      <GiftedChat
-        messages={this.state.messages}
-        onSend={messages => this.onSend(messages)}
-        user={{
-          _id: 1,
-        }}
-      />
-    )
-  }
+      },
+    ])
+  }, [])
+
+  const onSend = useCallback((messages = []) => {
+    setMessages(previousMessages => GiftedChat.append(previousMessages, messages))
+  }, [])
+
+  return (
+    <GiftedChat
+      messages={messages}
+      onSend={messages => onSend(messages)}
+      user={{
+        _id: 1,
+      }}
+    />
+  )
 }
 ```
 
@@ -189,6 +181,23 @@ See the files in [`example-slack-message`](example-slack-message) for an example
 
 > e.g. Chat Message
 
+```ts
+export interface IMessage {
+  _id: string | number
+  text: string
+  createdAt: Date | number
+  user: User
+  image?: string
+  video?: string
+  audio?: string
+  system?: boolean
+  sent?: boolean
+  received?: boolean
+  pending?: boolean
+  quickReplies?: QuickReplies
+}
+```
+
 ```js
 {
   _id: 1,
@@ -202,6 +211,12 @@ See the files in [`example-slack-message`](example-slack-message) for an example
   image: 'https://facebook.github.io/react/img/logo_og.png',
   // You can also add a video prop:
   video: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
+  // Mark the message as sent, using one tick
+  sent: true,
+  // Mark the message as received, using two tick
+  received: true,
+  // Mark the message as pending with a clock loader
+  pending: true,
   // Any additional custom parameters are passed through
 }
 ```
@@ -305,7 +320,7 @@ interface QuickReplies {
 - **`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'`
-- **`loadEarlier`** _(Bool)_ - Enables the "load earlier messages" button
+- **`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
@@ -318,7 +333,9 @@ interface QuickReplies {
 - **`onLongPressAvatar`** _(Function(`user`))_ - Callback when a message avatar is long-pressed
 - **`renderAvatarOnTop`** _(Bool)_ - Render the message avatar at the top of consecutive messages, rather than the bottom; default is `false`
 - **`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`
@@ -333,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
@@ -376,7 +393,7 @@ interface QuickReplies {
 * **`quickReplyStyle`** _(StyleProp<ViewStyle>)_ - Custom quick reply view style
 * **`renderQuickReplySend`** _(Function)_ - Custom quick reply **send** view
 * **`shouldUpdateMessage`** _(Function)_ - Lets the message component know when to update outside of normal cases.
-* **`infiniteScroll`** _(Bool)_ - infinite scroll up when reach the top of messages container, automatically call onLoadEarlier function if exist (not yet supported for the web)
+* **`infiniteScroll`** _(Bool)_ - infinite scroll up when reach the top of messages container, automatically call onLoadEarlier function if exist (not yet supported for the web). You need to add `loadEarlier` prop too.
 
 ## Imperative methods
 
@@ -435,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)
 
@@ -509,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/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,17 @@ export interface ActionsProps {
     containerStyle?: StyleProp<ViewStyle>;
     onPressActionButton?(): void;
 }
-export default class Actions extends React.Component<ActionsProps> {
-    static defaultProps: ActionsProps;
-    static propTypes: {
+export declare const Actions: {
+    ({ options, optionTintColor, icon, wrapperStyle, iconTextStyle, onPressActionButton, containerStyle, }: ActionsProps): JSX.Element;
+    defaultProps: {
+        options: {};
+        optionTintColor: string;
+        icon: undefined;
+        containerStyle: {};
+        iconTextStyle: {};
+        wrapperStyle: {};
+    };
+    propTypes: {
         onSend: PropTypes.Requireable<(...args: any[]) => any>;
         options: PropTypes.Requireable<object>;
         optionTintColor: PropTypes.Requireable<string>;
@@ -23,10 +31,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,39 +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 const Actions = ({ options, 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,
@@ -53,9 +50,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,6 +1,6 @@
 import PropTypes from 'prop-types';
-import React, { ReactNode } from 'react';
-import { ImageStyle, ViewStyle } from 'react-native';
+import { ReactNode } from 'react';
+import { ImageStyle, TextStyle, ViewStyle } from 'react-native';
 import { Omit, IMessage, User, LeftRightStyle } from './Models';
 export interface AvatarProps<TMessage extends IMessage> {
     currentMessage?: TMessage;
@@ -11,12 +11,14 @@ export interface AvatarProps<TMessage extends IMessage> {
     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;
 }
-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;
@@ -30,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>;
@@ -49,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

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, } from 'react-native';
 import GiftedAvatar from './GiftedAvatar';
 import { StylePropType, isSameUser, isSameDay } from './utils';
 const styles = {
@@ -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],
-            ]} 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={[
-                styles[position].container,
-                containerStyle && containerStyle[position],
-            ]}>
-          <GiftedAvatar avatarStyle={[
-                styles[position].image,
-                imageStyle && imageStyle[position],
-            ]}/>
-        </View>);
-        }
+    if (!showAvatarForEveryMessage &&
+        currentMessage &&
+        messageToCompare &&
+        isSameUser(currentMessage, messageToCompare) &&
+        isSameDay(currentMessage, messageToCompare)) {
         return (<View style={[
             styles[position].container,
-            styles[position][computedStyle],
             containerStyle && containerStyle[position],
         ]}>
-        {this.renderAvatar()}
+        <GiftedAvatar avatarStyle={[
+            styles[position].image,
+            imageStyle && imageStyle[position],
+        ]}/>
       </View>);
     }
+    const renderAvatarComponent = () => {
+        if (props.renderAvatar) {
+            const { renderAvatar, ...avatarProps } = props;
+            return props.renderAvatar(avatarProps);
+        }
+        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],
+    ]}>
+      {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,7 @@ export interface BubbleProps<TMessage extends IMessage> {
     containerToPreviousStyle?: LeftRightStyle<ViewStyle>;
     usernameStyle?: TextStyle;
     quickReplyStyle?: StyleProp<ViewStyle>;
+    onPress?(context?: any, message?: any): void;
     onLongPress?(context?: any, message?: any): void;
     onQuickReply?(replies: Reply[]): void;
     renderMessageImage?(props: RenderMessageImageProps<TMessage>): React.ReactNode;
@@ -37,11 +38,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 +50,7 @@ export default class Bubble<TMessage extends IMessage = IMessage> extends React.
     };
     static defaultProps: {
         touchableProps: {};
+        onPress: null;
         onLongPress: null;
         renderMessageImage: null;
         renderMessageVideo: null;
@@ -121,6 +123,7 @@ 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> | {
         borderBottomLeftRadius: number;

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) {
@@ -272,7 +277,7 @@ export default class Bubble extends React.Component {
             this.styledBubbleToPrevious(),
             wrapperStyle && wrapperStyle[position],
         ]}>
-          <TouchableWithoutFeedback onLongPress={this.onLongPress} accessibilityTraits='text' {...this.props.touchableProps}>
+          <TouchableWithoutFeedback onPress={this.onPress} onLongPress={this.onLongPress} accessibilityRole='text' {...this.props.touchableProps}>
             <View>
               {this.renderBubbleContent()}
               <View style={[
@@ -295,6 +300,7 @@ Bubble.contextTypes = {
 };
 Bubble.defaultProps = {
     touchableProps: {},
+    onPress: null,
     onLongPress: null,
     renderMessageImage: null,
     renderMessageVideo: null,