WIP Quick Replies

example/data/messages.js

@@ -29,4 +29,30 @@ module.exports = [
     createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
     system: true,
   },
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text: "This is a quick reply. Do you love Gifted Chat?",
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    quickReplies: [
+      {
+        _id: Math.round(Math.random() * 1000000),
+        contentType: "text",
+        title: "😋 Yes"
+      },
+      {
+        _id: Math.round(Math.random() * 1000000),
+        contentType: "camera",
+        title: "📷 Yes, let me show you with a picture!",
+      },
+      {
+        _id: Math.round(Math.random() * 1000000),
+        contentType: "text",
+        title: "😞 Nope. Whaaaaaat?",
+      }
+    ],
+    user: {
+      _id: 2,
+      name: 'React Native',
+    },
+  },
 ];

src/Bubble.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Text, Clipboard, StyleSheet, TouchableWithoutFeedback, View, ViewPropTypes } from 'react-native';
 
+import QuickReplies from './QuickReplies';
 import MessageText from './MessageText';
 import MessageImage from './MessageImage';
 import Time from './Time';
@@ -127,6 +128,18 @@ export default class Bubble extends React.PureComponent {
     return null;
   }
 
+  renderQuickReplies() {
+    const { currentMessage } = this.props;
+    if (currentMessage.quickReplies) {
+      const { containerStyle, wrapperStyle, ...quickReplyProps } = this.props;
+      if (this.props.renderQuickReplies) {
+        return this.props.renderQuickReplies(quickReplyProps);
+      }
+      return <QuickReplies {...quickReplyProps} />;
+    }
+    return null;
+  }
+
   render() {
     return (
       <View style={[styles[this.props.position].container, this.props.containerStyle[this.props.position]]}>
@@ -154,6 +167,7 @@ export default class Bubble extends React.PureComponent {
             </View>
           </TouchableWithoutFeedback>
         </View>
+        {this.renderQuickReplies()}
       </View>
     );
   }
@@ -221,6 +235,7 @@ Bubble.contextTypes = {
 Bubble.defaultProps = {
   touchableProps: {},
   onLongPress: null,
+  renderQuickReplies: null,
   renderMessageImage: null,
   renderMessageText: null,
   renderCustomView: null,
@@ -246,6 +261,7 @@ Bubble.propTypes = {
   user: PropTypes.object.isRequired,
   touchableProps: PropTypes.object,
   onLongPress: PropTypes.func,
+  renderQuickReplies: PropTypes.func,
   renderMessageImage: PropTypes.func,
   renderMessageText: PropTypes.func,
   renderCustomView: PropTypes.func,

src/QuickReplies.js

@@ -0,0 +1,48 @@
+/* eslint no-use-before-define: ["error", { "variables": false }] */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Text, StyleSheet, View, ViewPropTypes } from 'react-native';
+
+export default function QuickReplies({
+  containerStyle,
+  quickReplyProps,
+  currentMessage,
+}) {
+  return (
+    <View style={[styles.container, containerStyle]}>
+      {currentMessage.quickReplies.map((quickReply) => {
+         return (
+           <View style={styles.quickReply} {...quickReplyProps} key={quickReply._id}>
+             <Text>{quickReply.title}</Text>
+           </View>
+         );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {},
+  quickReply: {
+    borderWidth: 1,
+    width: 150,
+    height: 30,
+    borderRadius: 13,
+    margin: 3,
+  },
+});
+
+QuickReplies.defaultProps = {
+  currentMessage: {
+    quickReplies: [],
+  },
+  containerStyle: {},
+  quickReplyProps: {},
+};
+
+QuickReplies.propTypes = {
+  currentMessage: PropTypes.object,
+  containerStyle: ViewPropTypes.style,
+  quickReplyProps: PropTypes.object,
+};