Bot message implementation (quick replies copy and inspiration)

.npmignore

@@ -10,4 +10,11 @@ README.md
 ISSUE_TEMPLATE.md
 circle.yml
 codecov.yml
-media/
+media/
+App.js
+app.json
+babel.config.js
+src/
+.expo
+tsconfig.json
+tslint.json

example-expo/App.js → App.js

@@ -1,27 +1,22 @@
 import { AppLoading, Asset, Linking } from 'expo'
 import React, { Component } from 'react'
-import { StyleSheet, View } from 'react-native'
-import { Bubble, GiftedChat, SystemMessage } from 'react-native-gifted-chat'
-import Sentry from 'sentry-expo'
+import { StyleSheet, View, Text } from 'react-native'
+import { Bubble, GiftedChat, SystemMessage } from './src/'
 
-import AccessoryBar from './AccessoryBar'
-import CustomActions from './CustomActions'
-import CustomView from './CustomView'
-import NavBar from './NavBar'
-import messagesData from './data/messages'
-import earlierMessages from './data/earlierMessages'
-
-Sentry.config(
-  'https://[email protected]/276804',
-).install()
+import AccessoryBar from './example-expo/AccessoryBar'
+import CustomActions from './example-expo/CustomActions'
+import CustomView from './example-expo/CustomView'
+import NavBar from './example-expo/NavBar'
+import messagesData from './example-expo/data/messages'
+import earlierMessages from './example-expo/data/earlierMessages'
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
 })
 
 const filterBotMessages = message =>
   !message.system && message.user && message.user._id && message.user._id === 2
-const findStep = step => (_, index) => index === step - 1
+const findStep = step => message => message._id === step
 
 const user = {
   _id: 1,
@@ -45,7 +40,7 @@ export default class App extends Component {
 
   _isMounted = false
 
-  async componentWillMount() {
+  componentDidMount() {
     this._isMounted = true
     // init with only system messages
     this.setState({
@@ -97,7 +92,7 @@ export default class App extends Component {
   botSend = (step = 0) => {
     const newMessage = messagesData
       .reverse()
-      .filter(filterBotMessages)
+      // .filter(filterBotMessages)
       .find(findStep(step))
     if (newMessage) {
       this.setState(previousState => ({
@@ -188,6 +183,31 @@ export default class App extends Component {
     return null
   }
 
+  onQuickReply = replies => {
+    const createdAt = new Date()
+    if (replies.length === 1) {
+      this.onSend([
+        {
+          createdAt,
+          _id: Math.round(Math.random() * 1000000),
+          text: replies[0].title,
+          user,
+        },
+      ])
+    } else if (replies.length > 1) {
+      this.onSend([
+        {
+          createdAt,
+          _id: Math.round(Math.random() * 1000000),
+          text: replies.map(reply => reply.title).join(', '),
+          user,
+        },
+      ])
+    } else {
+      console.warn('replies param is not set correctly')
+    }
+  }
+
   render() {
     if (!this.state.appIsReady) {
       return <AppLoading />
@@ -208,6 +228,7 @@ export default class App extends Component {
           isLoadingEarlier={this.state.isLoadingEarlier}
           parsePatterns={this.parsePatterns}
           user={user}
+          onQuickReply={this.onQuickReply}
           keyboardShouldPersistTaps='never'
           renderAccessory={this.renderAccessory}
           renderActions={this.renderCustomActions}

README.md

@@ -80,6 +80,7 @@
 - InputToolbar avoiding keyboard
 - Redux support
 - System message
+- Quick Reply messages
 
 ## Dependency
 
@@ -102,35 +103,35 @@
 ## Example
 
 ```jsx
-import React from "react";
-import { GiftedChat } from "react-native-gifted-chat";
+import React from 'react'
+import { GiftedChat } from 'react-native-gifted-chat'
 
 class Example extends React.Component {
   state = {
-    messages: []
-  };
+    messages: [],
+  }
 
   componentWillMount() {
     this.setState({
       messages: [
         {
           _id: 1,
-          text: "Hello developer",
+          text: 'Hello developer',
           createdAt: new Date(),
           user: {
             _id: 2,
-            name: "React Native",
-            avatar: "https://placeimg.com/140/140/any"
-          }
-        }
-      ]
-    });
+            name: 'React Native',
+            avatar: 'https://placeimg.com/140/140/any',
+          },
+        },
+      ],
+    })
   }
 
   onSend(messages = []) {
     this.setState(previousState => ({
-      messages: GiftedChat.append(previousState.messages, messages)
-    }));
+      messages: GiftedChat.append(previousState.messages, messages),
+    }))
   }
 
   render() {
@@ -139,10 +140,10 @@ class Example extends React.Component {
         messages={this.state.messages}
         onSend={messages => this.onSend(messages)}
         user={{
-          _id: 1
+          _id: 1,
         }}
       />
-    );
+    )
   }
 }
 ```
@@ -188,6 +189,80 @@ e.g. System Message
 }
 ```
 
+### e.g. Chat Message with Quick Reply options
+
+See PR [#1211](https://github.com/FaridSafi/react-native-gifted-chat/pull/1211)
+
+```ts
+interface Reply {
+  title: string
+  value: string
+  messageId?: any
+}
+
+interface QuickReplies {
+  type: 'radio' | 'checkbox'
+  values: Reply[]
+  keepIt?: boolean
+}
+```
+
+```js
+  {
+    _id: 1,
+    text: 'This is a quick reply. Do you love Gifted Chat? (radio) KEEP IT',
+    createdAt: new Date(),
+    quickReplies: {
+      type: 'radio', // or 'checkbox',
+      keepIt: true,
+      values: [
+        {
+          title: '😋 Yes',
+          value: 'yes',
+        },
+        {
+          title: '📷 Yes, let me show you with a picture!',
+          value: 'yes_picture',
+        },
+        {
+          title: '😞 Nope. What?',
+          value: 'no',
+        },
+      ],
+    },
+    user: {
+      _id: 2,
+      name: 'React Native',
+    },
+  },
+  {
+    _id: 2,
+    text: 'This is a quick reply. Do you love Gifted Chat? (checkbox)',
+    createdAt: new Date(),
+    quickReplies: {
+      type: 'checkbox', // or 'radio',
+      values: [
+        {
+          title: 'Yes',
+          value: 'yes',
+        },
+        {
+          title: 'Yes, let me show you with a picture!',
+          value: 'yes_picture',
+        },
+        {
+          title: 'Nope. What?',
+          value: 'no',
+        },
+      ],
+    },
+    user: {
+      _id: 2,
+      name: 'React Native',
+    },
+  }
+```
+
 ## Props
 
 - **`messages`** _(Array)_ - Messages to display
@@ -259,6 +334,8 @@ e.g. System Message
 * **`scrollToBottomComponent`** _(Function)_ - Custom Scroll To Bottom Component container
 * **`scrollToBottomOffset`** _(Integer)_ - Custom Height Offset upon which to begin showing Scroll To Bottom Component (Default is 200)
 * **`alignTop`** _(Boolean)_ Controls whether or not the message bubbles appear at the top of the chat (Default is false - bubbles align to bottom)
+* **`onQuickReply`** _(Function)_ - Callback when sending a quick reply (to backend server)
+* **`renderQuickReply`** _(Function)_ - Custom quick reply view
 
 ## Imperative methods
 

app.json

@@ -0,0 +1,22 @@
+{
+  "expo": {
+    "name": "gifted-chat-example",
+    "description": "Gifted Chat Expo Example",
+    "slug": "example-expo",
+    "privacy": "public",
+    "sdkVersion": "32.0.0",
+    "platforms": ["ios", "android"],
+    "version": "0.5.0",
+    "orientation": "portrait",
+    "icon": "https://d1wp6m56sqw74a.cloudfront.net/~assets/c9aa1be8a6a6fe81e20c3ac4106a2ebc",
+    "splash": {
+      "image": "https://d1wp6m56sqw74a.cloudfront.net/~assets/c9aa1be8a6a6fe81e20c3ac4106a2ebc"
+    },
+    "ios": {
+      "supportsTablet": true
+    },
+    "androidStatusBar": {
+      "backgroundColor": "#000000"
+    }
+  }
+}

babel.config.js

@@ -1,9 +1,6 @@
 module.exports = function(api) {
   api.cache(true)
   return {
-    presets: [
-      'module:metro-react-native-babel-preset',
-      '@babel/preset-typescript',
-    ],
+    presets: ['babel-preset-expo', '@babel/preset-typescript'],
   }
 }

example-expo/AccessoryBar.js

@@ -1,29 +1,36 @@
-import { MaterialIcons } from '@expo/vector-icons';
-import React from 'react';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { MaterialIcons } from '@expo/vector-icons'
+import React from 'react'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
 
-import { getLocationAsync, pickImageAsync, takePictureAsync } from './mediaUtils';
+import {
+  getLocationAsync,
+  pickImageAsync,
+  takePictureAsync,
+} from './mediaUtils'
 
 export default class AccessoryBar extends React.Component {
-
   render() {
-    const { onSend } = this.props;
+    const { onSend } = this.props
     return (
       <View style={styles.container}>
-        <Button onPress={() => pickImageAsync(onSend)} name="photo" />
-        <Button onPress={() => takePictureAsync(onSend)} name="camera" />
-        <Button onPress={() => getLocationAsync(onSend)} name="my-location" />
+        <Button onPress={() => pickImageAsync(onSend)} name='photo' />
+        <Button onPress={() => takePictureAsync(onSend)} name='camera' />
+        <Button onPress={() => getLocationAsync(onSend)} name='my-location' />
       </View>
-    );
+    )
   }
-
 }
 
-const Button = ({ onPress, size = 30, color = 'rgba(0,0,0,0.5)', ...props }) => (
+const Button = ({
+  onPress,
+  size = 30,
+  color = 'rgba(0,0,0,0.5)',
+  ...props
+}) => (
   <TouchableOpacity onPress={onPress}>
     <MaterialIcons size={size} color={color} {...props} />
   </TouchableOpacity>
-);
+)
 
 const styles = StyleSheet.create({
   container: {
@@ -36,4 +43,4 @@ const styles = StyleSheet.create({
     borderTopWidth: StyleSheet.hairlineWidth,
     borderTopColor: 'rgba(0,0,0,0.3)',
   },
-});
+})