The future of GiftedChat 🎉

App.tsx

@@ -2,7 +2,7 @@ import { MaterialIcons } from '@expo/vector-icons'
 import { AppLoading, Asset, Linking } from 'expo'
 import React, { Component } from 'react'
 import { StyleSheet, View, Text, Platform } from 'react-native'
-import { Bubble, GiftedChat, SystemMessage, IMessage, Send } from './src'
+import { Bubble, GiftedChat, SystemMessage, IMessage, Send, SendProps } from './src'
 
 import AccessoryBar from './example-expo/AccessoryBar'
 import CustomActions from './example-expo/CustomActions'
@@ -219,7 +219,7 @@ export default class App extends Component {
 
   renderQuickReplySend = () => <Text>{' custom send =>'}</Text>
 
-  renderSend = (props: Send['props']) => (
+  renderSend = (props: SendProps<IMessage>) => (
     <Send {...props} containerStyle={{ justifyContent: 'center' }}>
       <MaterialIcons size={30} color={'tomato'} name={'send'} />
     </Send>

package.json

@@ -28,8 +28,9 @@
     "config:dev": "json -I -f package.json -e 'this.main=\"node_modules/expo/AppEntry.js\"'",
     "config:npm": "json -I -f package.json -e 'this.main=\"lib/index.js\"'",
     "lint": "tslint --project .",
-    "lint:fix": "./node_modules/.bin/tslint ./src/**/*.{ts,tsx} --fix",
+    "lint:fix": "./node_modules/.bin/tslint ./src/*.{ts,tsx} --fix",
     "tsc": "node_modules/.bin/tsc --noEmit",
+    "tsc:watch": "node_modules/.bin/tsc --watch --noEmit",
     "start": "yarn config:dev && expo start",
     "start:web": "yarn config:dev && expo start -w --dev",
     "build": "rm -rf lib/ && node_modules/.bin/tsc && cp flow-typedefs/*.js.flow lib/",
@@ -93,9 +94,9 @@
     "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
     "react-native-maps": "0.26.1",
     "react-native-nav": "2.0.2",
+    "react-native-web": "^0.11.7",
     "react-native-web-maps": "0.2.0",
     "react-test-renderer": "16.9.0",
-    "react-native-web": "^0.11.7",
     "tslint": "6.1.2",
     "tslint-config-prettier": "1.18.0",
     "typescript": "^3.8.3"
@@ -109,6 +110,7 @@
     "react-native-lightbox": "^0.8.1",
     "react-native-parsed-text": "0.0.22",
     "react-native-typing-animation": "^0.1.7",
+    "use-memo-one": "1.1.1",
     "uuid": "3.4.0"
   },
   "peerDependencies": {

src/Actions.tsx

@@ -11,6 +11,8 @@ import {
 } from 'react-native'
 import Color from './Color'
 import { StylePropType } from './utils'
+import { useChatContext } from './GiftedChatContext'
+import { useCallbackOne } from 'use-memo-one'
 
 export interface ActionsProps {
   options?: { [key: string]: any }
@@ -22,70 +24,72 @@ export interface ActionsProps {
   onPressActionButton?(): void
 }
 
-export default class Actions extends React.Component<ActionsProps> {
-  static defaultProps: ActionsProps = {
-    options: {},
-    optionTintColor: Color.optionTintColor,
-    icon: undefined,
-    containerStyle: {},
-    iconTextStyle: {},
-    wrapperStyle: {},
-  }
-
-  static propTypes = {
-    onSend: PropTypes.func,
-    options: PropTypes.object,
-    optionTintColor: PropTypes.string,
-    icon: PropTypes.func,
-    onPressActionButton: PropTypes.func,
-    wrapperStyle: StylePropType,
-    containerStyle: StylePropType,
-  }
-
-  static contextTypes = {
-    actionSheet: PropTypes.func,
-  }
-
-  onActionsPress = () => {
-    const { options } = this.props
+export const Actions = ({
+  options,
+  optionTintColor,
+  icon,
+  wrapperStyle,
+  iconTextStyle,
+  onPressActionButton,
+  containerStyle,
+}: ActionsProps) => {
+  const { actionSheet } = useChatContext()
+  const onActionsPress = useCallbackOne(() => {
     const optionKeys = Object.keys(options!)
     const cancelButtonIndex = optionKeys.indexOf('Cancel')
-    this.context.actionSheet().showActionSheetWithOptions(
+    actionSheet().showActionSheetWithOptions(
       {
         options: optionKeys,
         cancelButtonIndex,
-        tintColor: this.props.optionTintColor,
+        tintColor: optionTintColor,
       },
       (buttonIndex: number) => {
         const key = optionKeys[buttonIndex]
         if (key) {
-          options![key](this.props)
+          options![key]()
         }
       },
     )
-  }
+  }, [])
 
-  renderIcon() {
-    if (this.props.icon) {
-      return this.props.icon()
+  const renderIcon = useCallbackOne(() => {
+    if (icon) {
+      return icon()
     }
     return (
-      <View style={[styles.wrapper, this.props.wrapperStyle]}>
-        <Text style={[styles.iconText, this.props.iconTextStyle]}>+</Text>
+      <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,
+  optionTintColor: PropTypes.string,
+  icon: PropTypes.func,
+  onPressActionButton: PropTypes.func,
+  wrapperStyle: StylePropType,
+  containerStyle: StylePropType,
 }
 
 const styles = StyleSheet.create({