react-native-gifted-chat 2.4.1 → 2.6.0

package/src/GiftedChat.tsx

@@ -0,0 +1,670 @@
+import React, {
+  createRef,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useCallback,
+  MutableRefObject,
+} from 'react'
+import 'react-native-get-random-values' // NOTE: FOR "uuid" SUPPORT
+import {
+  ActionSheetOptions,
+  ActionSheetProvider,
+  ActionSheetProviderRef,
+} from '@expo/react-native-action-sheet'
+import dayjs from 'dayjs'
+import localizedFormat from 'dayjs/plugin/localizedFormat'
+import {
+  FlatList,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  TextInput,
+  TextStyle,
+  View,
+  ViewStyle,
+  LayoutChangeEvent,
+} from 'react-native'
+import { LightboxProps } from 'react-native-lightbox-v2'
+import { v4 as uuidv4 } from 'uuid'
+import { Actions, ActionsProps } from './Actions'
+import { Avatar, AvatarProps } from './Avatar'
+import Bubble from './Bubble'
+import { Composer, ComposerProps } from './Composer'
+import { MAX_COMPOSER_HEIGHT, MIN_COMPOSER_HEIGHT, TEST_ID } from './Constant'
+import { Day, DayProps } from './Day'
+import GiftedAvatar from './GiftedAvatar'
+import { GiftedChatContext } from './GiftedChatContext'
+import { InputToolbar, InputToolbarProps } from './InputToolbar'
+import { LoadEarlier, LoadEarlierProps } from './LoadEarlier'
+import Message from './Message'
+import MessageContainer from './MessageContainer'
+import { MessageImage, MessageImageProps } from './MessageImage'
+import { MessageText, MessageTextProps } from './MessageText'
+import {
+  IMessage,
+  LeftRightStyle,
+  MessageAudioProps,
+  MessageVideoProps,
+  Reply,
+  User,
+} from './Models'
+import { QuickRepliesProps } from './QuickReplies'
+import { Send, SendProps } from './Send'
+import { SystemMessage, SystemMessageProps } from './SystemMessage'
+import { Time, TimeProps } from './Time'
+import * as utils from './utils'
+import Animated, {
+  useAnimatedKeyboard,
+  useAnimatedStyle,
+  useAnimatedReaction,
+  useSharedValue,
+  withTiming,
+  runOnJS,
+} from 'react-native-reanimated'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+dayjs.extend(localizedFormat)
+
+export interface GiftedChatProps<TMessage extends IMessage = IMessage> {
+  /* Message container ref */
+  messageContainerRef?: React.RefObject<FlatList<IMessage>>
+  /* text input ref */
+  textInputRef?: React.RefObject<TextInput>
+  /* Messages to display */
+  messages?: TMessage[]
+  /* Typing Indicator state */
+  isTyping?: boolean
+  /* Messages container style */
+  messagesContainerStyle?: StyleProp<ViewStyle>
+  /* Input text; default is undefined, but if specified, it will override GiftedChat's internal state */
+  text?: string
+  /* Controls whether or not the message bubbles appear at the top of the chat */
+  alignTop?: boolean
+  /* enables the scrollToBottom Component */
+  scrollToBottom?: boolean
+  /* Scroll to bottom wrapper style */
+  scrollToBottomStyle?: StyleProp<ViewStyle>
+  initialText?: string
+  /* Placeholder when text is empty; default is 'Type a message...' */
+  placeholder?: string
+  /* Makes the composer not editable */
+  disableComposer?: boolean
+  /* User sending the messages: { _id, name, avatar } */
+  user?: User
+  /*  Locale to localize the dates */
+  locale?: string
+  /* Format to use for rendering times; default is 'LT' */
+  timeFormat?: string
+  /* Format to use for rendering dates; default is 'll' */
+  dateFormat?: string
+  /* Enables the "Load earlier messages" button */
+  loadEarlier?: boolean
+  /* Display an ActivityIndicator when loading earlier messages */
+  isLoadingEarlier?: boolean
+  /* Whether to render an avatar for the current user; default is false, only show avatars for other users */
+  showUserAvatar?: boolean
+  /* When false, avatars will only be displayed when a consecutive message is from the same user on the same day; default is false */
+  showAvatarForEveryMessage?: boolean
+  /* Render the message avatar at the top of consecutive messages, rather than the bottom; default is false */
+  renderAvatarOnTop?: boolean
+  inverted?: boolean
+  /* Extra props to be passed to the <Image> component created by the default renderMessageImage */
+  imageProps?: Message<TMessage>['props']
+  /* Extra props to be passed to the MessageImage's Lightbox */
+  lightboxProps?: LightboxProps
+  /* Minimum height of the input toolbar; default is 44 */
+  minInputToolbarHeight?: number
+  /* Extra props to be passed to the messages <ListView>; some props can't be overridden, see the code in MessageContainer.render() for details */
+  listViewProps?: object
+  /*  Extra props to be passed to the <TextInput> */
+  textInputProps?: object
+  /* Determines whether the keyboard should stay visible after a tap; see <ScrollView> docs */
+  keyboardShouldPersistTaps?: boolean
+  /* Max message composer TextInput length */
+  maxInputLength?: number
+  /* Force send button */
+  alwaysShowSend?: boolean
+  /* Image style */
+  imageStyle?: StyleProp<ViewStyle>
+  /* This can be used to pass unknown data which needs to be re-rendered */
+  extraData?: object
+  /* composer min Height */
+  minComposerHeight?: number
+  /* composer min Height */
+  maxComposerHeight?: number
+  options?: { [key: string]: () => void }
+  optionTintColor?: string
+  quickReplyStyle?: StyleProp<ViewStyle>
+  quickReplyTextStyle?: StyleProp<TextStyle>
+  quickReplyContainerStyle?: StyleProp<ViewStyle>
+  /* optional prop used to place customView below text, image and video views; default is false */
+  isCustomViewBottom?: boolean
+  /* infinite scroll up when reach the top of messages container, automatically call onLoadEarlier function if exist */
+  infiniteScroll?: boolean
+  timeTextStyle?: LeftRightStyle<TextStyle>
+  /* Custom action sheet */
+  actionSheet?(): {
+    showActionSheetWithOptions: (
+      options: ActionSheetOptions,
+      callback: (buttonIndex: number) => void | Promise<void>,
+    ) => void
+  }
+  /* Callback when a message avatar is tapped */
+  onPressAvatar?(user: User): void
+  /* Callback when a message avatar is tapped */
+  onLongPressAvatar?(user: User): void
+  /* Generate an id for new messages. Defaults to UUID v4, generated by uuid */
+  messageIdGenerator?(message?: TMessage): string
+  /* Callback when sending a message */
+  onSend?(messages: TMessage[]): void
+  /* Callback when loading earlier messages */
+  onLoadEarlier?(): void
+  /*  Render a loading view when initializing */
+  renderLoading?(): React.ReactNode
+  /* Custom "Load earlier messages" button */
+  renderLoadEarlier?(props: LoadEarlierProps): React.ReactNode
+  /* Custom message avatar; set to null to not render any avatar for the message */
+  renderAvatar?: null | ((props: AvatarProps<TMessage>) => React.ReactNode)
+  /* Custom message bubble */
+  renderBubble?(props: Bubble<TMessage>['props']): React.ReactNode
+  /* Custom system message */
+  renderSystemMessage?(props: SystemMessageProps<TMessage>): React.ReactNode
+  /* Callback when a message bubble is pressed; default is to do nothing */
+  onPress?(context: unknown, message: TMessage): void
+  /* Callback when a message bubble is long-pressed; default is to show an ActionSheet with "Copy Text" (see example using showActionSheetWithOptions()) */
+  onLongPress?(context: unknown, message: TMessage): void
+  /* Custom Username container */
+  renderUsername?(user: User): React.ReactNode
+  /* Reverses display order of messages; default is true */
+  /* Custom message container */
+  renderMessage?(message: Message<TMessage>['props']): React.ReactElement
+  /* Custom message text */
+  renderMessageText?(messageText: MessageTextProps<TMessage>): React.ReactNode
+  /* Custom message image */
+  renderMessageImage?(props: MessageImageProps<TMessage>): React.ReactNode
+  /* Custom message video */
+  renderMessageVideo?(props: MessageVideoProps<TMessage>): React.ReactNode
+  /* Custom message video */
+  renderMessageAudio?(props: MessageAudioProps<TMessage>): React.ReactNode
+  /* Custom view inside the bubble */
+  renderCustomView?(props: Bubble<TMessage>['props']): React.ReactNode
+  /* Custom day above a message */
+  renderDay?(props: DayProps<TMessage>): React.ReactNode
+  /* Custom time inside a message */
+  renderTime?(props: TimeProps<TMessage>): React.ReactNode
+  /* Custom footer component on the ListView, e.g. 'User is typing...' */
+  renderFooter?(): React.ReactNode
+  /* Custom component to render in the ListView when messages are empty */
+  renderChatEmpty?(): React.ReactNode
+  /* Custom component to render below the MessageContainer (separate from the ListView) */
+  renderChatFooter?(): React.ReactNode
+  /* Custom message composer container */
+  renderInputToolbar?(props: InputToolbarProps<TMessage>): React.ReactNode
+  /*  Custom text input message composer */
+  renderComposer?(props: ComposerProps): React.ReactNode
+  /* Custom action button on the left of the message composer */
+  renderActions?(props: ActionsProps): React.ReactNode
+  /* Custom send button; you can pass children to the original Send component quite easily, for example to use a custom icon (example) */
+  renderSend?(props: SendProps<TMessage>): React.ReactNode
+  /* Custom second line of actions below the message composer */
+  renderAccessory?(props: InputToolbarProps<TMessage>): React.ReactNode
+  /* Callback when the Action button is pressed (if set, the default actionSheet will not be used) */
+  onPressActionButton?(): void
+  /* Callback when the input text changes */
+  onInputTextChanged?(text: string): void
+  /* Custom parse patterns for react-native-parsed-text used to linking message content (like URLs and phone numbers) */
+  parsePatterns?: (linkStyle: TextStyle) => []
+  onQuickReply?(replies: Reply[]): void
+  renderQuickReplies?(
+    quickReplies: QuickRepliesProps<TMessage>,
+  ): React.ReactNode
+  renderQuickReplySend?(): React.ReactNode
+  /* Scroll to bottom custom component */
+  scrollToBottomComponent?(): React.ReactNode
+  shouldUpdateMessage?(
+    props: Message<TMessage>['props'],
+    nextProps: Message<TMessage>['props'],
+  ): boolean
+}
+
+function GiftedChat<TMessage extends IMessage = IMessage> (
+  props: GiftedChatProps
+) {
+  const {
+    messages = [],
+    initialText = '',
+    isTyping,
+    messageIdGenerator = () => uuidv4(),
+    user = {},
+    onSend,
+    locale = 'en',
+    renderLoading,
+    actionSheet = null,
+    textInputProps,
+    renderChatFooter = null,
+    renderInputToolbar = null,
+    keyboardShouldPersistTaps = Platform.select({
+      ios: 'never',
+      android: 'always',
+      default: 'never',
+    }),
+    onInputTextChanged = null,
+    maxInputLength = null,
+    inverted = true,
+    minComposerHeight = MIN_COMPOSER_HEIGHT,
+    maxComposerHeight = MAX_COMPOSER_HEIGHT,
+  } = props
+
+  const actionSheetRef = useRef<ActionSheetProviderRef>(null)
+
+  const messageContainerRef = useMemo(
+    () => props.messageContainerRef || createRef<FlatList<IMessage>>(),
+    [props.messageContainerRef]
+  )
+
+  const textInputRef = useMemo(
+    () => props.textInputRef || createRef<TextInput>(),
+    [props.textInputRef]
+  )
+
+  const isTextInputWasFocused: MutableRefObject<boolean> = useRef(false)
+
+  const [isInitialized, setIsInitialized] = useState<boolean>(false)
+  const [composerHeight, setComposerHeight] = useState<number>(
+    minComposerHeight!
+  )
+  const [text, setText] = useState<string | undefined>(() => props.text || '')
+  const [isTypingDisabled, setIsTypingDisabled] = useState<boolean>(false)
+
+  const keyboard = useAnimatedKeyboard()
+  const trackingKeyboardMovement = useSharedValue(false)
+  const debounceEnableTypingTimeoutId = useRef<ReturnType<typeof setTimeout>>()
+  const insets = useSafeAreaInsets()
+  const keyboardOffsetBottom = useSharedValue(0)
+
+  const contentStyleAnim = useAnimatedStyle(
+    () => ({
+      transform: [
+        { translateY: -keyboard.height.value + keyboardOffsetBottom.value },
+      ],
+    }),
+    [keyboard, keyboardOffsetBottom]
+  )
+
+  const getTextFromProp = useCallback(
+    (fallback: string) => {
+      if (props.text === undefined)
+        return fallback
+
+      return props.text
+    },
+    [props.text]
+  )
+
+  /**
+   * Store text input focus status when keyboard hide to retrieve
+   * it afterwards if needed.
+   * `onKeyboardWillHide` may be called twice in sequence so we
+   * make a guard condition (eg. showing image picker)
+   */
+  const handleTextInputFocusWhenKeyboardHide = useCallback(() => {
+    if (!isTextInputWasFocused.current)
+      isTextInputWasFocused.current =
+        textInputRef.current?.isFocused() || false
+  }, [textInputRef])
+
+  /**
+   * Refocus the text input only if it was focused before showing keyboard.
+   * This is needed in some cases (eg. showing image picker).
+   */
+  const handleTextInputFocusWhenKeyboardShow = useCallback(() => {
+    if (
+      textInputRef.current &&
+      isTextInputWasFocused &&
+      !textInputRef.current.isFocused()
+    )
+      textInputRef.current.focus()
+
+    // Reset the indicator since the keyboard is shown
+    isTextInputWasFocused.current = false
+  }, [textInputRef])
+
+  const disableTyping = useCallback(() => {
+    clearTimeout(debounceEnableTypingTimeoutId.current)
+    setIsTypingDisabled(true)
+  }, [])
+
+  const enableTyping = useCallback(() => {
+    clearTimeout(debounceEnableTypingTimeoutId.current)
+    setIsTypingDisabled(false)
+  }, [])
+
+  const debounceEnableTyping = useCallback(() => {
+    clearTimeout(debounceEnableTypingTimeoutId.current)
+    debounceEnableTypingTimeoutId.current = setTimeout(() => {
+      enableTyping()
+    }, 50)
+  }, [enableTyping])
+
+  const scrollToBottom = useCallback(
+    (isAnimated = true) => {
+      if (!messageContainerRef?.current)
+        return
+
+      if (inverted) {
+        messageContainerRef.current.scrollToOffset({
+          offset: 0,
+          animated: isAnimated,
+        })
+        return
+      }
+
+      messageContainerRef.current.scrollToEnd({ animated: isAnimated })
+    },
+    [inverted, messageContainerRef]
+  )
+
+  const renderMessages = useMemo(() => {
+    if (!isInitialized)
+      return null
+
+    const { messagesContainerStyle, ...messagesContainerProps } = props
+
+    const fragment = (
+      <View style={[styles.fill, messagesContainerStyle]}>
+        <MessageContainer
+          {...messagesContainerProps}
+          invertibleScrollViewProps={{
+            inverted,
+            keyboardShouldPersistTaps,
+          }}
+          messages={messages}
+          forwardRef={messageContainerRef}
+          isTyping={isTyping}
+        />
+        {renderChatFooter?.()}
+      </View>
+    )
+
+    return fragment
+  }, [
+    isInitialized,
+    isTyping,
+    messages,
+    props,
+    inverted,
+    keyboardShouldPersistTaps,
+    messageContainerRef,
+    renderChatFooter,
+  ])
+
+  const notifyInputTextReset = useCallback(() => {
+    onInputTextChanged?.('')
+  }, [onInputTextChanged])
+
+  const resetInputToolbar = useCallback(() => {
+    textInputRef.current?.clear()
+
+    notifyInputTextReset()
+
+    setComposerHeight(minComposerHeight!)
+    setText(getTextFromProp(''))
+    enableTyping()
+  }, [
+    minComposerHeight,
+    getTextFromProp,
+    textInputRef,
+    notifyInputTextReset,
+    enableTyping,
+  ])
+
+  const _onSend = useCallback(
+    (messages: TMessage[] = [], shouldResetInputToolbar = false) => {
+      if (!Array.isArray(messages))
+        messages = [messages]
+
+      const newMessages: TMessage[] = messages.map(message => {
+        return {
+          ...message,
+          user: user!,
+          createdAt: new Date(),
+          _id: messageIdGenerator?.(),
+        }
+      })
+
+      if (shouldResetInputToolbar === true) {
+        disableTyping()
+
+        resetInputToolbar()
+      }
+
+      onSend?.(newMessages)
+    },
+    [messageIdGenerator, onSend, user, resetInputToolbar, disableTyping]
+  )
+
+  const onInputSizeChanged = useCallback(
+    (size: { height: number }) => {
+      const newComposerHeight = Math.max(
+        minComposerHeight!,
+        Math.min(maxComposerHeight!, size.height)
+      )
+
+      setComposerHeight(newComposerHeight)
+    },
+    [maxComposerHeight, minComposerHeight]
+  )
+
+  const _onInputTextChanged = useCallback(
+    (_text: string) => {
+      if (isTypingDisabled)
+        return
+
+      onInputTextChanged?.(_text)
+
+      // Only set state if it's not being overridden by a prop.
+      if (props.text === undefined)
+        setText(_text)
+    },
+    [onInputTextChanged, isTypingDisabled, props.text]
+  )
+
+  const onInitialLayoutViewLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      const { layout } = e.nativeEvent
+
+      if (layout.height <= 0)
+        return
+
+      notifyInputTextReset()
+
+      setIsInitialized(true)
+      setComposerHeight(minComposerHeight!)
+      setText(getTextFromProp(initialText))
+    },
+    [initialText, minComposerHeight, notifyInputTextReset, getTextFromProp]
+  )
+
+  const inputToolbarFragment = useMemo(() => {
+    if (!isInitialized)
+      return null
+
+    const inputToolbarProps = {
+      ...props,
+      text: getTextFromProp(text!),
+      composerHeight: Math.max(minComposerHeight!, composerHeight),
+      onSend: _onSend,
+      onInputSizeChanged,
+      onTextChanged: _onInputTextChanged,
+      textInputProps: {
+        ...textInputProps,
+        ref: textInputRef,
+        maxLength: isTypingDisabled ? 0 : maxInputLength,
+      },
+    }
+
+    if (renderInputToolbar)
+      return renderInputToolbar(inputToolbarProps)
+
+    return <InputToolbar {...inputToolbarProps} />
+  }, [
+    isInitialized,
+    _onSend,
+    getTextFromProp,
+    maxInputLength,
+    minComposerHeight,
+    onInputSizeChanged,
+    props,
+    text,
+    renderInputToolbar,
+    composerHeight,
+    isTypingDisabled,
+    textInputRef,
+    textInputProps,
+    _onInputTextChanged,
+  ])
+
+  const contextValues = useMemo(
+    () => ({
+      actionSheet:
+        actionSheet ||
+        (() => ({
+          showActionSheetWithOptions:
+            actionSheetRef.current!.showActionSheetWithOptions,
+        })),
+      getLocale: () => locale,
+    }),
+    [actionSheet, locale]
+  )
+
+  useEffect(() => {
+    if (props.text != null)
+      setText(props.text)
+  }, [props.text])
+
+  useEffect(() => {
+    if (!inverted && messages?.length)
+      setTimeout(() => scrollToBottom(false), 200)
+  }, [messages?.length, inverted, scrollToBottom])
+
+  useAnimatedReaction(
+    () => keyboard.height.value,
+    (value, prevValue) => {
+      if (prevValue && value !== prevValue) {
+        const isKeyboardMovingUp = value > prevValue
+        if (isKeyboardMovingUp !== trackingKeyboardMovement.value) {
+          trackingKeyboardMovement.value = isKeyboardMovingUp
+          keyboardOffsetBottom.value = withTiming(
+            isKeyboardMovingUp ? insets.bottom : 0,
+            {
+              duration: 400,
+            }
+          )
+
+          if (isKeyboardMovingUp)
+            runOnJS(handleTextInputFocusWhenKeyboardShow)()
+          else
+            runOnJS(handleTextInputFocusWhenKeyboardHide)()
+
+          if (value === 0) {
+            runOnJS(enableTyping)()
+          } else {
+            runOnJS(disableTyping)()
+            runOnJS(debounceEnableTyping)()
+          }
+        }
+      }
+    },
+    [
+      keyboard,
+      trackingKeyboardMovement,
+      insets,
+      handleTextInputFocusWhenKeyboardHide,
+      handleTextInputFocusWhenKeyboardShow,
+      enableTyping,
+      disableTyping,
+      debounceEnableTyping,
+    ]
+  )
+
+  return (
+    <GiftedChatContext.Provider value={contextValues}>
+      <ActionSheetProvider ref={actionSheetRef}>
+        <View
+          testID={TEST_ID.WRAPPER}
+          style={[styles.fill, styles.contentContainer]}
+          onLayout={onInitialLayoutViewLayout}
+        >
+          {isInitialized
+            ? (
+              <Animated.View style={[styles.fill, contentStyleAnim]}>
+                {renderMessages}
+                {inputToolbarFragment}
+              </Animated.View>
+            )
+            : (
+              renderLoading?.()
+            )}
+        </View>
+      </ActionSheetProvider>
+    </GiftedChatContext.Provider>
+  )
+}
+
+GiftedChat.append = <TMessage extends IMessage>(
+  currentMessages: TMessage[] = [],
+  messages: TMessage[],
+  inverted = true
+) => {
+  if (!Array.isArray(messages))
+    messages = [messages]
+
+  return inverted
+    ? messages.concat(currentMessages)
+    : currentMessages.concat(messages)
+}
+
+GiftedChat.prepend = <TMessage extends IMessage>(
+  currentMessages: TMessage[] = [],
+  messages: TMessage[],
+  inverted = true
+) => {
+  if (!Array.isArray(messages))
+    messages = [messages]
+
+  return inverted
+    ? currentMessages.concat(messages)
+    : messages.concat(currentMessages)
+}
+
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1,
+  },
+  contentContainer: {
+    overflow: 'hidden',
+  },
+})
+
+export * from './Models'
+export {
+  GiftedChat,
+  Actions,
+  Avatar,
+  Bubble,
+  SystemMessage,
+  MessageImage,
+  MessageText,
+  Composer,
+  Day,
+  InputToolbar,
+  LoadEarlier,
+  Message,
+  MessageContainer,
+  Send,
+  Time,
+  GiftedAvatar,
+  utils
+}

package/src/GiftedChatContext.ts

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import {
+  ActionSheetOptions,
+} from '@expo/react-native-action-sheet'
+
+export interface IGiftedChatContext {
+  actionSheet(): {
+    showActionSheetWithOptions: (
+      options: ActionSheetOptions,
+      callback: (buttonIndex?: number) => void | Promise<void>
+    ) => void
+  }
+  getLocale(): string
+}
+
+export const GiftedChatContext = React.createContext<IGiftedChatContext>({
+  getLocale: () => 'en',
+  actionSheet: () => ({
+    showActionSheetWithOptions: () => {},
+  }),
+})
+
+export const useChatContext = () => React.useContext(GiftedChatContext)