The future of GiftedChat 🎉

App.tsx

@@ -1,8 +1,9 @@
 import { MaterialIcons } from '@expo/vector-icons'
-import { AppLoading, Asset, Linking } from 'expo'
+import { Asset, Linking } from 'expo'
+import AppLoading from 'expo-app-loading'
 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 +220,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>

example-expo/mediaUtils.ts

@@ -28,7 +28,7 @@ export default async function getPermissionAsync(permission) {
 }
 
 export async function getLocationAsync(onSend) {
-  if (await getPermissionAsync(Permissions.LOCATION)) {
+  if (await Location.requestForegroundPermissionsAsync()) {
     const location = await Location.getCurrentPositionAsync({})
     if (location) {
       onSend([{ location: location.coords }])
@@ -37,7 +37,7 @@ export async function getLocationAsync(onSend) {
 }
 
 export async function pickImageAsync(onSend) {
-  if (await getPermissionAsync(Permissions.CAMERA_ROLL)) {
+  if (await ImagePicker.requestMediaLibraryPermissionsAsync()) {
     const result = await ImagePicker.launchImageLibraryAsync({
       allowsEditing: true,
       aspect: [4, 3],
@@ -51,7 +51,7 @@ export async function pickImageAsync(onSend) {
 }
 
 export async function takePictureAsync(onSend) {
-  if (await getPermissionAsync(Permissions.CAMERA)) {
+  if (await ImagePicker.requestCameraPermissionsAsync()) {
     const result = await ImagePicker.launchCameraAsync({
       allowsEditing: true,
       aspect: [4, 3],

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/",
@@ -67,48 +68,50 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "7.9.6",
+    "@babel/core": "~7.9.0",
     "@babel/preset-typescript": "7.9.0",
     "@types/jest": "25.2.1",
-    "@types/react": "^16.9.11",
-    "@types/react-native": "^0.60.22",
+    "@types/react": "~16.9.35",
+    "@types/react-native": "~0.63.2",
     "@types/react-native-communications": "2.2.1",
     "@types/react-test-renderer": "16.9.2",
     "@types/uuid": "3.4.9",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "25.5.1",
-    "babel-preset-expo": "^8.1.0",
-    "expo": "^37.0.0",
-    "expo-constants": "~9.0.0",
-    "expo-image-picker": "~8.1.0",
-    "expo-location": "~8.1.0",
-    "expo-permissions": "~8.1.0",
+    "babel-preset-expo": "8.3.0",
+    "expo": "^41.0.0",
+    "expo-constants": "~10.1.3",
+    "expo-image-picker": "~10.1.4",
+    "expo-location": "~12.0.4",
+    "expo-permissions": "~12.0.1",
     "flow-bin": "0.125.0",
     "husky": "4.2.5",
-    "jest-expo": "^37.0.0",
+    "jest-expo": "^41.0.0",
     "json": "9.0.6",
     "prettier": "2.0.5",
-    "react": "16.9.0",
-    "react-dom": "16.9.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
-    "react-native-maps": "0.26.1",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-native": "0.63.4",
+    "react-native-maps": "0.27.1",
     "react-native-nav": "2.0.2",
+    "react-native-web": "~0.13.12",
     "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"
+    "typescript": "~4.0.0"
   },
   "dependencies": {
     "@expo/react-native-action-sheet": "^3.6.0",
     "dayjs": "^1.8.26",
+    "expo-app-loading": "^1.0.3",
     "prop-types": "^15.7.2",
     "react-native-communications": "^2.2.1",
     "react-native-iphone-x-helper": "^1.3.1",
     "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": {
@@ -121,4 +124,4 @@
       "pre-commit": "yarn lint:fix && yarn prettier && yarn tsc"
     }
   }
-}
+}

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({