react-native-gifted-chat 2.8.2-alpha.4 → 2.9.0-alpha.0

package/src/GiftedChat/index.tsx

@@ -28,29 +28,15 @@ import Animated, {
   runOnJS,
 } from 'react-native-reanimated'
 import { SafeAreaProvider } from 'react-native-safe-area-context'
-import { Actions } from '../Actions'
-import { Avatar } from '../Avatar'
-import Bubble from '../Bubble'
-import { Composer } from '../Composer'
 import { MAX_COMPOSER_HEIGHT, MIN_COMPOSER_HEIGHT, TEST_ID } from '../Constant'
-import { Day } from '../Day'
-import { GiftedAvatar } from '../GiftedAvatar'
 import { GiftedChatContext } from '../GiftedChatContext'
 import { InputToolbar } from '../InputToolbar'
-import { LoadEarlierMessages } from '../LoadEarlierMessages'
-import Message from '../Message'
-import MessageContainer, { AnimatedList } from '../MessageContainer'
-import { MessageImage } from '../MessageImage'
-import { MessageText } from '../MessageText'
-import { Send } from '../Send'
+import { MessageContainer, AnimatedList } from '../MessageContainer'
 import stylesCommon from '../styles'
-import { SystemMessage } from '../SystemMessage'
-import { Time } from '../Time'
-
 import {
   IMessage,
 } from '../types'
-import * as utils from '../utils'
+import { renderComponentOrElement } from '../utils'
 import styles from './styles'
 import { GiftedChatProps } from './types'
 
@@ -200,7 +186,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
           forwardRef={messageContainerRef}
           isTyping={isTyping}
         />
-        {renderChatFooter?.()}
+        {renderComponentOrElement(renderChatFooter, {})}
       </View>
     )
   }, [
@@ -280,7 +266,6 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
 
   const onInitialLayoutViewLayout = useCallback(
     (e: LayoutChangeEvent) => {
-      console.log('onInitialLayoutViewLayout', e.nativeEvent.layout.height)
       if (isInitialized)
         return
 
@@ -316,7 +301,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     }
 
     if (renderInputToolbar)
-      return renderInputToolbar(inputToolbarProps)
+      return renderComponentOrElement(renderInputToolbar, inputToolbarProps)
 
     return <InputToolbar {...inputToolbarProps} />
   }, [
@@ -407,7 +392,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
               </Animated.View>
             )
             : (
-              renderLoading?.()
+              renderComponentOrElement(renderLoading, {})
             )}
         </View>
       </ActionSheetProvider>
@@ -416,18 +401,14 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
 }
 
 function GiftedChatWrapper<TMessage extends IMessage = IMessage> (props: GiftedChatProps<TMessage>) {
-  // Don't use KeyboardProvider when keyboard is not internally handled
-  if (!props.isKeyboardInternallyHandled)
-    return <GiftedChat<TMessage> {...props} />
-
   return (
-    <GestureHandlerRootView style={styles.fill}>
-      <SafeAreaProvider>
-        <KeyboardProvider>
+    <KeyboardProvider>
+      <GestureHandlerRootView style={styles.fill}>
+        <SafeAreaProvider>
           <GiftedChat<TMessage> {...props} />
-        </KeyboardProvider>
-      </SafeAreaProvider>
-    </GestureHandlerRootView>
+        </SafeAreaProvider>
+      </GestureHandlerRootView>
+    </KeyboardProvider>
   )
 }
 
@@ -457,24 +438,6 @@ GiftedChatWrapper.prepend = <TMessage extends IMessage>(
     : messages.concat(currentMessages)
 }
 
-export * from '../types'
-
 export {
-  GiftedChatWrapper as GiftedChat,
-  Actions,
-  Avatar,
-  Bubble,
-  SystemMessage,
-  MessageImage,
-  MessageText,
-  Composer,
-  Day,
-  InputToolbar,
-  LoadEarlierMessages,
-  Message,
-  MessageContainer,
-  Send,
-  Time,
-  GiftedAvatar,
-  utils
+  GiftedChatWrapper as GiftedChat
 }

package/src/GiftedChat/types.ts

@@ -129,8 +129,8 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   renderTime?(props: TimeProps<TMessage>): 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 message composer container. Can be a component, element, render function, or null */
+  renderInputToolbar?: React.ComponentType<InputToolbarProps<TMessage>> | React.ReactElement | ((props: InputToolbarProps<TMessage>) => React.ReactNode) | null
   /*  Custom text input message composer */
   renderComposer?(props: ComposerProps): React.ReactNode
   /* Custom action button on the left of the message composer */

package/src/InputToolbar.tsx

@@ -2,10 +2,11 @@ import React, { useMemo } from 'react'
 import { StyleSheet, View, StyleProp, ViewStyle, useColorScheme } from 'react-native'
 
 import { Actions, ActionsProps } from './Actions'
-import Color from './Color'
+import { Color } from './Color'
 import { Composer, ComposerProps } from './Composer'
 import { Send, SendProps } from './Send'
 import { IMessage } from './types'
+import { renderComponentOrElement } from './utils'
 
 export interface InputToolbarProps<TMessage extends IMessage> {
   actions?: Array<{ title: string, action: () => void }>
@@ -41,7 +42,7 @@ export function InputToolbar<TMessage extends IMessage = IMessage> (
   const colorScheme = useColorScheme()
 
   const actionsFragment = useMemo(() => {
-    const props = {
+    const actionsProps = {
       onPressActionButton,
       actions,
       actionSheetOptionTintColor,
@@ -50,9 +51,13 @@ export function InputToolbar<TMessage extends IMessage = IMessage> (
       containerStyle,
     }
 
-    return (
-      renderActions?.(props) || (onPressActionButton && <Actions {...props} />)
-    )
+    if (renderActions)
+      return renderComponentOrElement(renderActions, actionsProps)
+
+    if (onPressActionButton)
+      return <Actions {...actionsProps} />
+
+    return null
   }, [
     renderActions,
     onPressActionButton,
@@ -64,15 +69,19 @@ export function InputToolbar<TMessage extends IMessage = IMessage> (
   ])
 
   const composerFragment = useMemo(() => {
-    return (
-      renderComposer?.(props as ComposerProps) || (
-        <Composer {...(props as ComposerProps)} />
-      )
-    )
+    const composerProps = props as ComposerProps
+
+    if (renderComposer)
+      return renderComponentOrElement(renderComposer, composerProps)
+
+    return <Composer {...composerProps} />
   }, [renderComposer, props])
 
   const sendFragment = useMemo(() => {
-    return renderSend?.(props) || <Send {...props} />
+    if (renderSend)
+      return renderComponentOrElement(renderSend, props)
+
+    return <Send {...props} />
   }, [renderSend, props])
 
   const accessoryFragment = useMemo(() => {
@@ -81,13 +90,13 @@ export function InputToolbar<TMessage extends IMessage = IMessage> (
 
     return (
       <View style={[styles.accessory, props.accessoryStyle]}>
-        {renderAccessory(props)}
+        {renderComponentOrElement(renderAccessory, props)}
       </View>
     )
   }, [renderAccessory, props])
 
   return (
-    <View style={[styles.container, styles[`container_${colorScheme}`], containerStyle]}>
+    <View style={[styles.container, colorScheme === 'dark' && styles.container_dark, containerStyle]}>
       <View style={[styles.primary, props.primaryStyle]}>
         {actionsFragment}
         {composerFragment}

package/src/LoadEarlierMessages.tsx

@@ -1,7 +1,6 @@
-import React, { useMemo } from 'react'
+import React from 'react'
 import {
   ActivityIndicator,
-  Platform,
   StyleSheet,
   Text,
   View,
@@ -9,40 +8,14 @@ import {
   ViewStyle,
   TextStyle,
 } from 'react-native'
-import Color from './Color'
+import { Color } from './Color'
 import { TouchableOpacity } from './components/TouchableOpacity'
 import stylesCommon from './styles'
 
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    marginTop: 5,
-    marginBottom: 10,
-  },
-  wrapper: {
-    backgroundColor: Color.defaultColor,
-    borderRadius: 15,
-    height: 30,
-    paddingLeft: 10,
-    paddingRight: 10,
-  },
-  text: {
-    backgroundColor: Color.backgroundTransparent,
-    color: Color.white,
-    fontSize: 12,
-  },
-  activityIndicator: {
-    marginTop: Platform.select({
-      ios: -14,
-      android: -16,
-      default: -15,
-    }),
-  },
-})
-
 export interface LoadEarlierMessagesProps {
-  isAvailable?: boolean
-  isLoading?: boolean
+  isAvailable: boolean
+  isLoading: boolean
+  onPress: () => void
   isInfiniteScrollEnabled?: boolean
   label?: string
   containerStyle?: StyleProp<ViewStyle>
@@ -51,7 +24,6 @@ export interface LoadEarlierMessagesProps {
   activityIndicatorStyle?: StyleProp<ViewStyle>
   activityIndicatorColor?: string
   activityIndicatorSize?: number | 'small' | 'large'
-  onPress: () => void
 }
 
 export const LoadEarlierMessages: React.FC<LoadEarlierMessagesProps> = ({
@@ -65,23 +37,6 @@ export const LoadEarlierMessages: React.FC<LoadEarlierMessagesProps> = ({
   activityIndicatorSize = 'small',
   activityIndicatorStyle,
 }) => {
-  const loadingContent = useMemo(() => (
-    <View>
-      <Text style={[styles.text, textStyle, { opacity: 0 }]}>
-        {label}
-      </Text>
-      <ActivityIndicator
-        color={activityIndicatorColor!}
-        size={activityIndicatorSize!}
-        style={[styles.activityIndicator, activityIndicatorStyle]}
-      />
-    </View>
-  ), [label, textStyle, activityIndicatorColor, activityIndicatorSize, activityIndicatorStyle])
-
-  const labelContent = useMemo(() => (
-    <Text style={[styles.text, textStyle]}>{label}</Text>
-  ), [label, textStyle])
-
   return (
     <TouchableOpacity
       style={[styles.container, containerStyle]}
@@ -90,8 +45,50 @@ export const LoadEarlierMessages: React.FC<LoadEarlierMessagesProps> = ({
       accessibilityRole='button'
     >
       <View style={[stylesCommon.centerItems, styles.wrapper, wrapperStyle]}>
-        {isLoading ? loadingContent : labelContent}
+        {
+          isLoading
+            ? (
+              <ActivityIndicator
+                color={activityIndicatorColor}
+                size={activityIndicatorSize}
+                style={[styles.activityIndicator, activityIndicatorStyle]}
+              />
+            )
+            : (
+              <View style={styles.textContainer}>
+                <Text style={[styles.text, textStyle]}>
+                  {label}
+                </Text>
+              </View>
+            )
+        }
       </View>
     </TouchableOpacity>
   )
 }
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    marginVertical: 10,
+  },
+  wrapper: {
+    backgroundColor: Color.defaultColor,
+    borderRadius: 15,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+  },
+  textContainer: {
+    paddingTop: 3,
+    paddingBottom: 4,
+  },
+  text: {
+    backgroundColor: Color.backgroundTransparent,
+    color: Color.white,
+    fontSize: 12,
+    lineHeight: 13,
+  },
+  activityIndicator: {
+    paddingHorizontal: 20,
+  },
+})

package/src/Message/index.tsx

@@ -1,18 +1,18 @@
-import React, { memo, useCallback } from 'react'
+import React, { useCallback } from 'react'
 import { View } from 'react-native'
 
 import { Avatar } from '../Avatar'
-import Bubble from '../Bubble'
+import { Bubble } from '../Bubble'
 import { SystemMessage } from '../SystemMessage'
 
 import { IMessage } from '../types'
-import { isSameUser } from '../utils'
+import { isSameUser, renderComponentOrElement } from '../utils'
 import styles from './styles'
 import { MessageProps } from './types'
 
 export * from './types'
 
-const Message: React.FC<MessageProps<IMessage>> = (props: MessageProps<IMessage>) => {
+export const Message = <TMessage extends IMessage = IMessage>(props: MessageProps<TMessage>) => {
   const {
     currentMessage,
     renderBubble: renderBubbleProp,
@@ -35,7 +35,7 @@ const Message: React.FC<MessageProps<IMessage>> = (props: MessageProps<IMessage>
     } = props
 
     if (renderBubbleProp)
-      return renderBubbleProp(rest)
+      return renderComponentOrElement(renderBubbleProp, rest)
 
     return <Bubble {...rest} />
   }, [props, renderBubbleProp])
@@ -50,7 +50,7 @@ const Message: React.FC<MessageProps<IMessage>> = (props: MessageProps<IMessage>
     } = props
 
     if (renderSystemMessageProp)
-      return renderSystemMessageProp(rest)
+      return renderComponentOrElement(renderSystemMessageProp, rest)
 
     return <SystemMessage {...rest} />
   }, [props, renderSystemMessageProp])
@@ -111,5 +111,3 @@ const Message: React.FC<MessageProps<IMessage>> = (props: MessageProps<IMessage>
     </View>
   )
 }
-
-export default memo(Message)

package/src/MessageAudio.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react'
 import { View, Text, StyleSheet } from 'react-native'
-import Color from './Color'
+import { Color } from './Color'
 
 const styles = StyleSheet.create({
   container: {

package/src/MessageContainer/components/DayAnimated/index.tsx

@@ -11,7 +11,7 @@ import { DayAnimatedProps } from './types'
 
 export * from './types'
 
-const DayAnimated = ({ scrolledY, daysPositions, listHeight, renderDay, messages, isLoading, ...rest }: DayAnimatedProps) => {
+export const DayAnimated = ({ scrolledY, daysPositions, listHeight, renderDay, messages, isLoading, ...rest }: DayAnimatedProps) => {
   const opacity = useSharedValue(0)
   const fadeOutOpacityTimeoutId = useSharedValue<ReturnType<typeof setTimeout> | undefined>(undefined)
   const containerHeight = useSharedValue(0)
@@ -134,6 +134,7 @@ const DayAnimated = ({ scrolledY, daysPositions, listHeight, renderDay, messages
     <Animated.View
       style={[stylesCommon.centerItems, styles.dayAnimated, style]}
       onLayout={handleLayout}
+      pointerEvents='none'
     >
       <Animated.View
         style={contentStyle}
@@ -144,5 +145,3 @@ const DayAnimated = ({ scrolledY, daysPositions, listHeight, renderDay, messages
     </Animated.View>
   )
 }
-
-export default DayAnimated

package/src/MessageContainer/components/Item/index.tsx

@@ -1,8 +1,8 @@
-import React, { forwardRef, useCallback, useMemo } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { LayoutChangeEvent, View } from 'react-native'
 import Animated, { interpolate, useAnimatedStyle, useDerivedValue, useSharedValue } from 'react-native-reanimated'
 import { Day } from '../../../Day'
-import Message, { MessageProps } from '../../../Message'
+import { Message,MessageProps } from '../../../Message'
 import { IMessage } from '../../../types'
 import { isSameDay } from '../../../utils'
 import { DaysPositions } from '../../types'
@@ -68,7 +68,7 @@ export const useRelativeScrolledPositionToBottomOfDay = (
   return relativeScrolledPositionToBottomOfDay
 }
 
-const DayWrapper = forwardRef<View, MessageProps<IMessage>>((props, ref) => {
+const DayWrapper = <TMessage extends IMessage>(props: MessageProps<TMessage>) => {
   const {
     renderDay: renderDayProp,
     currentMessage,
@@ -87,7 +87,7 @@ const DayWrapper = forwardRef<View, MessageProps<IMessage>>((props, ref) => {
   } = props
 
   return (
-    <View ref={ref}>
+    <View>
       {
         renderDayProp
           ? renderDayProp({ ...rest, createdAt: currentMessage.createdAt })
@@ -95,9 +95,9 @@ const DayWrapper = forwardRef<View, MessageProps<IMessage>>((props, ref) => {
       }
     </View>
   )
-})
+}
 
-const Item = <TMessage extends IMessage>(props: ItemProps<TMessage>) => {
+export const Item = <TMessage extends IMessage>(props: ItemProps<TMessage>) => {
   const {
     renderMessage: renderMessageProp,
     scrolledY,
@@ -146,15 +146,13 @@ const Item = <TMessage extends IMessage>(props: ItemProps<TMessage>) => {
         style={style}
         onLayout={handleLayoutDayContainer}
       >
-        <DayWrapper {...rest as MessageProps<TMessage>} />
+        <DayWrapper<TMessage> {...rest as MessageProps<TMessage>} />
       </Animated.View>
       {
         renderMessageProp
           ? renderMessageProp(rest as MessageProps<TMessage>)
-          : <Message {...rest as MessageProps<TMessage>} />
+          : <Message<TMessage> {...rest as MessageProps<TMessage>} />
       }
     </View>
   )
 }
-
-export default Item

package/src/MessageContainer/index.tsx

@@ -15,11 +15,11 @@ import { ReanimatedScrollEvent } from '../reanimatedCompat'
 
 import stylesCommon from '../styles'
 import { IMessage } from '../types'
-import TypingIndicator from '../TypingIndicator'
+import { TypingIndicator } from '../TypingIndicator'
 import { isSameDay, useCallbackThrottled } from '../utils'
-import DayAnimated from './components/DayAnimated'
+import { DayAnimated } from './components/DayAnimated'
 
-import Item from './components/Item'
+import { Item } from './components/Item'
 import { ItemProps } from './components/Item/types'
 import styles from './styles'
 import { MessageContainerProps, DaysPositions } from './types'
@@ -29,7 +29,7 @@ export * from './types'
 
 const AnimatedFlatList = Animated.createAnimatedComponent(FlatList) as React.ComponentType<any>
 
-function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageContainerProps<TMessage>) {
+export const MessageContainer = <TMessage extends IMessage>(props: MessageContainerProps<TMessage>) => {
   const {
     messages = [],
     user,
@@ -79,7 +79,7 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
   }, [renderFooterProp, renderTypingIndicator, props])
 
   const renderLoadEarlier = useCallback(() => {
-    if (loadEarlierMessagesProps?.onPress && loadEarlierMessagesProps?.isAvailable) {
+    if (loadEarlierMessagesProps?.isAvailable) {
       if (renderLoadEarlierProp)
         return renderLoadEarlierProp(loadEarlierMessagesProps)
 
@@ -286,10 +286,10 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
 
   const onEndReached = useCallback(() => {
     if (
-      loadEarlierMessagesProps?.isInfiniteScrollEnabled &&
-      loadEarlierMessagesProps?.onPress &&
-      loadEarlierMessagesProps?.isAvailable &&
-      !loadEarlierMessagesProps?.isLoading
+      loadEarlierMessagesProps &&
+      loadEarlierMessagesProps.isAvailable &&
+      loadEarlierMessagesProps.isInfiniteScrollEnabled &&
+      !loadEarlierMessagesProps.isLoading
     )
       loadEarlierMessagesProps.onPress()
   }, [loadEarlierMessagesProps])
@@ -420,5 +420,3 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     </View>
   )
 }
-
-export default MessageContainer

package/src/MessageContainer/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native'
-import Color from '../Color'
+import { Color } from '../Color'
 
 export default StyleSheet.create({
   containerAlignTop: {

package/src/MessageText.tsx

@@ -55,7 +55,8 @@ export const MessageText: React.FC<MessageTextProps<IMessage>> = ({
       <Autolink
         email
         phone
-        link
+        url
+        stripPrefix={false}
         {...rest}
         onPress={onPressProp ? handlePress : undefined}
         linkStyle={linkStyle}

package/src/MessageVideo.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react'
 import { View, Text, StyleSheet } from 'react-native'
-import Color from './Color'
+import { Color } from './Color'
 
 const styles = StyleSheet.create({
   container: {

package/src/QuickReplies.tsx

@@ -7,7 +7,7 @@ import {
   ViewStyle,
   TextStyle,
 } from 'react-native'
-import Color from './Color'
+import { Color } from './Color'
 import { TouchableOpacity } from './components/TouchableOpacity'
 import { warning } from './logging'
 import stylesCommon from './styles'

package/src/Send.tsx

@@ -8,7 +8,7 @@ import {
   TextStyle,
   useColorScheme,
 } from 'react-native'
-import Color from './Color'
+import { Color } from './Color'
 
 import { TouchableOpacity, TouchableOpacityProps } from './components/TouchableOpacity'
 import { TEST_ID } from './Constant'

package/src/SystemMessage.tsx

@@ -1,29 +1,16 @@
-import React, { useMemo } from 'react'
+import React from 'react'
 import {
   StyleSheet,
-  Text,
   View,
   ViewStyle,
   StyleProp,
   TextStyle,
 } from 'react-native'
-import Color from './Color'
+import { Color } from './Color'
+import { MessageText } from './MessageText'
 import stylesCommon from './styles'
 import { IMessage } from './types'
 
-const styles = StyleSheet.create({
-  container: {
-    marginTop: 5,
-    marginBottom: 10,
-  },
-  text: {
-    backgroundColor: Color.backgroundTransparent,
-    color: Color.defaultColor,
-    fontSize: 12,
-    fontWeight: '300',
-  },
-})
-
 export interface SystemMessageProps<TMessage extends IMessage> {
   currentMessage: TMessage
   containerStyle?: StyleProp<ViewStyle>
@@ -39,22 +26,41 @@ export function SystemMessage<TMessage extends IMessage = IMessage> ({
   textStyle,
   children,
 }: SystemMessageProps<TMessage>) {
-  const textContent = useMemo(() => {
-    if (!currentMessage?.text)
-      return null
-
-    return <Text style={[styles.text, textStyle]}>{currentMessage.text}</Text>
-  }, [currentMessage?.text, textStyle])
-
   if (currentMessage == null || currentMessage.system === false)
     return null
 
   return (
     <View style={[stylesCommon.fill, stylesCommon.centerItems, styles.container, containerStyle]}>
       <View style={wrapperStyle}>
-        {textContent}
+        <MessageText
+          currentMessage={currentMessage}
+          customTextStyle={[styles.text, textStyle]}
+          containerStyle={{ left: styles.messageContainer, right: styles.messageContainer }}
+        />
         {children}
       </View>
     </View>
   )
 }
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 5,
+    marginBottom: 10,
+    marginHorizontal: 20,
+  },
+  messageContainer: {
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: 'rgba(0,0,0,0.1)',
+    paddingHorizontal: 10,
+    paddingVertical: 10,
+    backgroundColor: 'rgba(0,0,0,0.05)',
+  },
+  text: {
+    backgroundColor: Color.backgroundTransparent,
+    fontStyle: 'italic',
+    fontSize: 12,
+    fontWeight: '300',
+  },
+})