react-native-gifted-chat 2.4.1 → 2.5.1

package/src/MessageContainer.tsx

@@ -0,0 +1,362 @@
+import React, { RefObject } from 'react'
+import PropTypes from 'prop-types'
+
+import {
+  FlatList,
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  Text,
+  ListRenderItemInfo,
+  NativeSyntheticEvent,
+  NativeScrollEvent,
+  StyleProp,
+  ViewStyle,
+  Platform,
+} from 'react-native'
+
+import { LoadEarlier, LoadEarlierProps } from './LoadEarlier'
+import Message from './Message'
+import Color from './Color'
+import { User, IMessage, Reply } from './Models'
+import TypingIndicator from './TypingIndicator'
+
+import { StylePropType } from './utils'
+import { warning } from './logging'
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  containerAlignTop: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+  contentContainerStyle: {
+    flexGrow: 1,
+    justifyContent: 'flex-start',
+  },
+  emptyChatContainer: {
+    flex: 1,
+    transform: [{ scaleY: -1 }],
+  },
+  headerWrapper: {
+    flex: 1,
+  },
+  listStyle: {
+    flex: 1,
+  },
+  scrollToBottomStyle: {
+    opacity: 0.8,
+    position: 'absolute',
+    right: 10,
+    bottom: 30,
+    zIndex: 999,
+    height: 40,
+    width: 40,
+    borderRadius: 20,
+    backgroundColor: Color.white,
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: Color.black,
+    shadowOpacity: 0.5,
+    shadowOffset: { width: 0, height: 0 },
+    shadowRadius: 1,
+  },
+})
+
+export interface MessageContainerProps<TMessage extends IMessage> {
+  messages?: TMessage[]
+  isTyping?: boolean
+  user?: User
+  listViewProps: object
+  inverted?: boolean
+  loadEarlier?: boolean
+  alignTop?: boolean
+  scrollToBottom?: boolean
+  scrollToBottomStyle?: StyleProp<ViewStyle>
+  invertibleScrollViewProps?: object
+  extraData?: object
+  scrollToBottomOffset?: number
+  forwardRef?: RefObject<FlatList<TMessage>>
+  renderChatEmpty?(): React.ReactNode
+  renderFooter?(props: MessageContainerProps<TMessage>): React.ReactNode
+  renderMessage?(props: Message['props']): React.ReactElement
+  renderLoadEarlier?(props: LoadEarlierProps): React.ReactNode
+  scrollToBottomComponent?(): React.ReactNode
+  onLoadEarlier?(): void
+  onQuickReply?(replies: Reply[]): void
+  infiniteScroll?: boolean
+  isLoadingEarlier?: boolean
+}
+
+interface State {
+  showScrollBottom: boolean
+  hasScrolled: boolean
+}
+
+export default class MessageContainer<
+  TMessage extends IMessage = IMessage,
+> extends React.PureComponent<MessageContainerProps<TMessage>, State> {
+  static defaultProps = {
+    messages: [],
+    user: {},
+    isTyping: false,
+    renderChatEmpty: null,
+    renderFooter: null,
+    renderMessage: null,
+    onLoadEarlier: () => {},
+    onQuickReply: () => {},
+    inverted: true,
+    loadEarlier: false,
+    listViewProps: {},
+    invertibleScrollViewProps: {},
+    extraData: null,
+    scrollToBottom: false,
+    scrollToBottomOffset: 200,
+    alignTop: false,
+    scrollToBottomStyle: {},
+    infiniteScroll: false,
+    isLoadingEarlier: false,
+  }
+
+  static propTypes = {
+    messages: PropTypes.arrayOf(PropTypes.object),
+    isTyping: PropTypes.bool,
+    user: PropTypes.object,
+    renderChatEmpty: PropTypes.func,
+    renderFooter: PropTypes.func,
+    renderMessage: PropTypes.func,
+    renderLoadEarlier: PropTypes.func,
+    onLoadEarlier: PropTypes.func,
+    listViewProps: PropTypes.object,
+    inverted: PropTypes.bool,
+    loadEarlier: PropTypes.bool,
+    invertibleScrollViewProps: PropTypes.object,
+    extraData: PropTypes.object,
+    scrollToBottom: PropTypes.bool,
+    scrollToBottomOffset: PropTypes.number,
+    scrollToBottomComponent: PropTypes.func,
+    alignTop: PropTypes.bool,
+    scrollToBottomStyle: StylePropType,
+    infiniteScroll: PropTypes.bool,
+  }
+
+  state = {
+    showScrollBottom: false,
+    hasScrolled: false,
+  }
+
+  renderTypingIndicator = () => {
+    if (Platform.OS === 'web')
+      return null
+
+    return <TypingIndicator isTyping={this.props.isTyping || false} />
+  }
+
+  renderFooter = () => {
+    if (this.props.renderFooter)
+      return this.props.renderFooter(this.props)
+
+    return this.renderTypingIndicator()
+  }
+
+  renderLoadEarlier = () => {
+    if (this.props.loadEarlier === true) {
+      const loadEarlierProps = {
+        ...this.props,
+      }
+      if (this.props.renderLoadEarlier)
+        return this.props.renderLoadEarlier(loadEarlierProps)
+
+      return <LoadEarlier {...loadEarlierProps} />
+    }
+    return null
+  }
+
+  scrollTo (options: { animated?: boolean, offset: number }) {
+    if (this.props.forwardRef?.current && options)
+      this.props.forwardRef.current.scrollToOffset(options)
+  }
+
+  scrollToBottom = (animated: boolean = true) => {
+    const { inverted } = this.props
+    if (inverted)
+      this.scrollTo({ offset: 0, animated })
+    else if (this.props.forwardRef?.current)
+      this.props.forwardRef.current.scrollToEnd({ animated })
+  }
+
+  handleOnScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const {
+      nativeEvent: {
+        contentOffset: { y: contentOffsetY },
+        contentSize: { height: contentSizeHeight },
+        layoutMeasurement: { height: layoutMeasurementHeight },
+      },
+    } = event
+    const { scrollToBottomOffset } = this.props
+    if (this.props.inverted)
+      if (contentOffsetY > scrollToBottomOffset!)
+        this.setState({ showScrollBottom: true, hasScrolled: true })
+      else
+        this.setState({ showScrollBottom: false, hasScrolled: true })
+    else if (
+      contentOffsetY < scrollToBottomOffset! &&
+      contentSizeHeight - layoutMeasurementHeight > scrollToBottomOffset!
+    )
+      this.setState({ showScrollBottom: true, hasScrolled: true })
+    else
+      this.setState({ showScrollBottom: false, hasScrolled: true })
+  }
+
+  renderRow = ({ item, index }: ListRenderItemInfo<TMessage>): React.ReactElement | null => {
+    if (!item._id && item._id !== 0)
+      warning('GiftedChat: `_id` is missing for message', JSON.stringify(item))
+
+    if (!item.user) {
+      if (!item.system)
+        warning(
+          'GiftedChat: `user` is missing for message',
+          JSON.stringify(item)
+        )
+
+      item.user = { _id: 0 }
+    }
+    const { messages, user, inverted, ...restProps } = this.props
+    if (messages && user) {
+      const previousMessage =
+        (inverted ? messages[index + 1] : messages[index - 1]) || {}
+      const nextMessage =
+        (inverted ? messages[index - 1] : messages[index + 1]) || {}
+
+      const messageProps: Message['props'] = {
+        ...restProps,
+        user,
+        currentMessage: item,
+        previousMessage,
+        inverted,
+        nextMessage,
+        position: item.user._id === user._id ? 'right' : 'left',
+      }
+
+      if (this.props.renderMessage)
+        return this.props.renderMessage(messageProps)
+
+      return <Message key={item._id.toString()} {...messageProps} />
+    }
+    return null
+  }
+
+  renderChatEmpty = () => {
+    if (this.props.renderChatEmpty)
+      return this.props.inverted
+        ? (
+          this.props.renderChatEmpty()
+        )
+        : (
+          <View style={styles.emptyChatContainer}>
+            {this.props.renderChatEmpty()}
+          </View>
+        )
+
+    return <View style={styles.container} />
+  }
+
+  renderHeaderWrapper = () => (
+    <View style={styles.headerWrapper}>{this.renderLoadEarlier()}</View>
+  )
+
+  renderScrollBottomComponent () {
+    const { scrollToBottomComponent } = this.props
+
+    if (scrollToBottomComponent)
+      return scrollToBottomComponent()
+
+    return <Text>{'V'}</Text>
+  }
+
+  renderScrollToBottomWrapper () {
+    const propsStyle = this.props.scrollToBottomStyle || {}
+    return (
+      <View style={[styles.scrollToBottomStyle, propsStyle]}>
+        <TouchableOpacity
+          onPress={() => this.scrollToBottom()}
+          hitSlop={{ top: 5, left: 5, right: 5, bottom: 5 }}
+        >
+          {this.renderScrollBottomComponent()}
+        </TouchableOpacity>
+      </View>
+    )
+  }
+
+  onLayoutList = () => {
+    if (
+      !this.props.inverted &&
+      !!this.props.messages &&
+      this.props.messages!.length
+    )
+      setTimeout(
+        () => this.scrollToBottom && this.scrollToBottom(false),
+        15 * this.props.messages!.length
+      )
+  }
+
+  onEndReached = ({ distanceFromEnd }: { distanceFromEnd: number }) => {
+    const { loadEarlier, onLoadEarlier, infiniteScroll, isLoadingEarlier } =
+      this.props
+    if (
+      infiniteScroll &&
+      (this.state.hasScrolled || distanceFromEnd > 0) &&
+      distanceFromEnd <= 100 &&
+      loadEarlier &&
+      onLoadEarlier &&
+      !isLoadingEarlier &&
+      Platform.OS !== 'web'
+    )
+      onLoadEarlier()
+  }
+
+  keyExtractor = (item: TMessage) => `${item._id}`
+
+  render () {
+    const { inverted } = this.props
+
+    return (
+      <View
+        style={
+          this.props.alignTop ? styles.containerAlignTop : styles.container
+        }
+      >
+        <FlatList
+          ref={this.props.forwardRef}
+          extraData={[this.props.extraData, this.props.isTyping]}
+          keyExtractor={this.keyExtractor}
+          automaticallyAdjustContentInsets={false}
+          inverted={inverted}
+          data={this.props.messages}
+          style={styles.listStyle}
+          contentContainerStyle={styles.contentContainerStyle}
+          renderItem={this.renderRow}
+          {...this.props.invertibleScrollViewProps}
+          ListEmptyComponent={this.renderChatEmpty}
+          ListFooterComponent={
+            inverted ? this.renderHeaderWrapper : this.renderFooter
+          }
+          ListHeaderComponent={
+            inverted ? this.renderFooter : this.renderHeaderWrapper
+          }
+          onScroll={this.handleOnScroll}
+          scrollEventThrottle={100}
+          onLayout={this.onLayoutList}
+          onEndReached={this.onEndReached}
+          onEndReachedThreshold={0.1}
+          {...this.props.listViewProps}
+        />
+        {this.state.showScrollBottom && this.props.scrollToBottom
+          ? this.renderScrollToBottomWrapper()
+          : null}
+      </View>
+    )
+  }
+}

package/src/MessageImage.tsx

@@ -0,0 +1,78 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import {
+  Image,
+  StyleSheet,
+  View,
+  ImageProps,
+  ViewStyle,
+  StyleProp,
+  ImageStyle,
+  ImageURISource,
+} from 'react-native'
+// TODO: support web
+import Lightbox, { LightboxProps } from 'react-native-lightbox-v2'
+import { IMessage } from './Models'
+import { StylePropType } from './utils'
+
+const styles = StyleSheet.create({
+  image: {
+    width: 150,
+    height: 100,
+    borderRadius: 13,
+    margin: 3,
+    resizeMode: 'cover',
+  },
+  imageActive: {
+    flex: 1,
+    resizeMode: 'contain',
+  },
+})
+
+export interface MessageImageProps<TMessage extends IMessage> {
+  currentMessage: TMessage
+  containerStyle?: StyleProp<ViewStyle>
+  imageSourceProps?: Partial<ImageURISource>
+  imageStyle?: StyleProp<ImageStyle>
+  imageProps?: Partial<ImageProps>
+  lightboxProps?: LightboxProps
+}
+
+export function MessageImage<TMessage extends IMessage = IMessage> ({
+  containerStyle,
+  lightboxProps,
+  imageProps,
+  imageSourceProps,
+  imageStyle,
+  currentMessage,
+}: MessageImageProps<TMessage>) {
+  if (currentMessage == null)
+    return null
+
+  return (
+    <View style={containerStyle}>
+      {/* @ts-expect-error: Lightbox types are not fully compatible */}
+      <Lightbox
+        activeProps={{
+          style: styles.imageActive,
+        }}
+        {...lightboxProps}
+      >
+        <Image
+          {...imageProps}
+          style={[styles.image, imageStyle]}
+          source={{ ...imageSourceProps, uri: currentMessage.image }}
+        />
+      </Lightbox>
+    </View>
+  )
+}
+
+MessageImage.propTypes = {
+  currentMessage: PropTypes.object,
+  containerStyle: StylePropType,
+  imageSourceProps: PropTypes.object,
+  imageStyle: StylePropType,
+  imageProps: PropTypes.object,
+  lightboxProps: PropTypes.object,
+}

package/src/MessageText.tsx

@@ -0,0 +1,187 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import {
+  Linking,
+  StyleSheet,
+  View,
+  TextProps,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+} from 'react-native'
+
+import ParsedText from 'react-native-parsed-text'
+import { LeftRightStyle, IMessage } from './Models'
+import { StylePropType } from './utils'
+import { useChatContext } from './GiftedChatContext'
+import { error } from './logging'
+
+const WWW_URL_PATTERN = /^www\./i
+
+const { textStyle } = StyleSheet.create({
+  textStyle: {
+    fontSize: 16,
+    lineHeight: 20,
+    marginTop: 5,
+    marginBottom: 5,
+    marginLeft: 10,
+    marginRight: 10,
+  },
+})
+
+const styles = {
+  left: StyleSheet.create({
+    container: {},
+    text: {
+      color: 'black',
+      ...textStyle,
+    },
+    link: {
+      color: 'black',
+      textDecorationLine: 'underline',
+    },
+  }),
+  right: StyleSheet.create({
+    container: {},
+    text: {
+      color: 'white',
+      ...textStyle,
+    },
+    link: {
+      color: 'white',
+      textDecorationLine: 'underline',
+    },
+  }),
+}
+
+const DEFAULT_OPTION_TITLES = ['Call', 'Text', 'Cancel']
+
+export interface MessageTextProps<TMessage extends IMessage> {
+  position?: 'left' | 'right'
+  optionTitles?: string[]
+  currentMessage: TMessage
+  containerStyle?: LeftRightStyle<ViewStyle>
+  textStyle?: LeftRightStyle<TextStyle>
+  linkStyle?: LeftRightStyle<TextStyle>
+  textProps?: TextProps
+  customTextStyle?: StyleProp<TextStyle>
+  parsePatterns?: (linkStyle: TextStyle) => []
+}
+
+export function MessageText<TMessage extends IMessage = IMessage> ({
+  currentMessage = {} as TMessage,
+  optionTitles = DEFAULT_OPTION_TITLES,
+  position = 'left',
+  containerStyle,
+  textStyle,
+  linkStyle: linkStyleProp,
+  customTextStyle,
+  parsePatterns,
+  textProps,
+}: MessageTextProps<TMessage>) {
+  const { actionSheet } = useChatContext()
+
+  // TODO: React.memo
+  // const shouldComponentUpdate = (nextProps: MessageTextProps<TMessage>) => {
+  //   return (
+  //     !!currentMessage &&
+  //     !!nextProps.currentMessage &&
+  //     currentMessage.text !== nextProps.currentMessage.text
+  //   )
+  // }
+
+  const onUrlPress = (url: string) => {
+    // When someone sends a message that includes a website address beginning with "www." (omitting the scheme),
+    // react-native-parsed-text recognizes it as a valid url, but Linking fails to open due to the missing scheme.
+    if (WWW_URL_PATTERN.test(url))
+      onUrlPress(`https://${url}`)
+    else
+      Linking.openURL(url).catch(e => {
+        error(e, 'No handler for URL:', url)
+      })
+  }
+
+  const onPhonePress = (phone: string) => {
+    const options =
+      optionTitles && optionTitles.length > 0
+        ? optionTitles.slice(0, 3)
+        : DEFAULT_OPTION_TITLES
+    const cancelButtonIndex = options.length - 1
+    actionSheet().showActionSheetWithOptions(
+      {
+        options,
+        cancelButtonIndex,
+      },
+      (buttonIndex?: number) => {
+        switch (buttonIndex) {
+          case 0:
+            Linking.openURL(`tel:${phone}`).catch(e => {
+              error(e, 'No handler for telephone')
+            })
+            break
+          case 1:
+            Linking.openURL(`sms:${phone}`).catch(e => {
+              error(e, 'No handler for text')
+            })
+            break
+        }
+      }
+    )
+  }
+
+  const onEmailPress = (email: string) =>
+    Linking.openURL(`mailto:${email}`).catch(e =>
+      error(e, 'No handler for mailto')
+    )
+
+  const linkStyle = [
+    styles[position].link,
+    linkStyleProp?.[position],
+  ]
+  return (
+    <View
+      style={[
+        styles[position].container,
+        containerStyle && containerStyle[position],
+      ]}
+    >
+      <ParsedText
+        style={[
+          styles[position].text,
+          textStyle && textStyle[position],
+          customTextStyle,
+        ]}
+        parse={[
+          ...(parsePatterns ? parsePatterns(linkStyle as TextStyle) : []),
+          { type: 'url', style: linkStyle, onPress: onUrlPress },
+          { type: 'phone', style: linkStyle, onPress: onPhonePress },
+          { type: 'email', style: linkStyle, onPress: onEmailPress },
+        ]}
+        childrenProps={{ ...textProps }}
+      >
+        {currentMessage!.text}
+      </ParsedText>
+    </View>
+  )
+}
+
+MessageText.propTypes = {
+  position: PropTypes.oneOf(['left', 'right']),
+  optionTitles: PropTypes.arrayOf(PropTypes.string),
+  currentMessage: PropTypes.object,
+  containerStyle: PropTypes.shape({
+    left: StylePropType,
+    right: StylePropType,
+  }),
+  textStyle: PropTypes.shape({
+    left: StylePropType,
+    right: StylePropType,
+  }),
+  linkStyle: PropTypes.shape({
+    left: StylePropType,
+    right: StylePropType,
+  }),
+  parsePatterns: PropTypes.func,
+  textProps: PropTypes.object,
+  customTextStyle: StylePropType,
+}

package/src/MessageVideo.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import Color from './Color'
+import { View, Text } from 'react-native'
+
+export function MessageVideo () {
+  return (
+    <View style={{ padding: 20 }}>
+      <Text style={{ color: Color.alizarin, fontWeight: '600' }}>
+        {'Video is not implemented by GiftedChat.'}
+      </Text>
+      <Text style={{ color: Color.alizarin, fontWeight: '600' }}>
+        {
+          'You need to provide your own implementation by using renderMessageVideo'
+        }
+        {'prop.'}
+      </Text>
+    </View>
+  )
+}