react-native-gifted-chat 2.8.1 → 2.8.2-alpha.0

package/src/GiftedChat/index.tsx

@@ -89,6 +89,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     minComposerHeight = MIN_COMPOSER_HEIGHT,
     maxComposerHeight = MAX_COMPOSER_HEIGHT,
     isKeyboardInternallyHandled = true,
+    disableKeyboardController = false,
   } = props
 
   const actionSheetRef = useRef<ActionSheetProviderRef>(null)
@@ -112,7 +113,16 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
   const [text, setText] = useState<string | undefined>(() => props.text || '')
   const [isTypingDisabled, setIsTypingDisabled] = useState<boolean>(false)
 
-  const keyboard = useReanimatedKeyboardAnimation()
+  // Always call the hook, but conditionally use its data
+  const keyboardControllerData = useReanimatedKeyboardAnimation()
+
+  // Create a mock keyboard object when disabled
+  const keyboard = useMemo(() => {
+    if (disableKeyboardController)
+      return { height: { value: 0 } }
+    return keyboardControllerData
+  }, [disableKeyboardController, keyboardControllerData])
+
   const trackingKeyboardMovement = useSharedValue(false)
   const debounceEnableTypingTimeoutId = useRef<ReturnType<typeof setTimeout>>(undefined)
   const keyboardOffsetBottom = useSharedValue(0)
@@ -380,9 +390,14 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       setText(props.text)
   }, [props.text])
 
+  // Only set up keyboard animation when keyboard controller is enabled
   useAnimatedReaction(
-    () => -keyboard.height.value,
+    () => disableKeyboardController ? 0 : -keyboard.height.value,
     (value, prevValue) => {
+      // Skip keyboard handling when disabled
+      if (disableKeyboardController)
+        return
+
       if (prevValue !== null && value !== prevValue) {
         const isKeyboardMovingUp = value > prevValue
         if (isKeyboardMovingUp !== trackingKeyboardMovement.value) {
@@ -420,6 +435,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       disableTyping,
       debounceEnableTyping,
       bottomOffset,
+      disableKeyboardController,
     ]
   )
 
@@ -433,7 +449,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
         >
           {isInitialized
             ? (
-              <Animated.View style={[stylesCommon.fill, isKeyboardInternallyHandled && contentStyleAnim]}>
+              <Animated.View style={[stylesCommon.fill, (isKeyboardInternallyHandled && !disableKeyboardController) && contentStyleAnim]}>
                 {renderMessages}
                 {inputToolbarFragment}
               </Animated.View>
@@ -448,6 +464,10 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
 }
 
 function GiftedChatWrapper<TMessage extends IMessage = IMessage> (props: GiftedChatProps<TMessage>) {
+  // Don't use KeyboardProvider when keyboard controller is disabled
+  if (props.disableKeyboardController)
+    return <GiftedChat<TMessage> {...props} />
+
   return (
     <KeyboardProvider>
       <GiftedChat<TMessage> {...props} />

package/src/GiftedChat/types.ts

@@ -75,6 +75,8 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   isLoadingEarlier?: boolean
   /* Determine whether to handle keyboard awareness inside the plugin. If you have your own keyboard handling outside the plugin set this to false; default is `true` */
   isKeyboardInternallyHandled?: boolean
+  /* Completely disable react-native-keyboard-controller. Useful when using react-native-navigation or other conflicting keyboard libraries; default is `false` */
+  disableKeyboardController?: 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 */
@@ -191,7 +193,7 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   /* 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) => { type?: string, pattern?: RegExp, style?: StyleProp<TextStyle> | object, onPress?: unknown, renderText?: unknown }[]
+  matchers?: MessageTextProps<TMessage>['matchers']
   onQuickReply?(replies: Reply[]): void
   renderQuickReplies?(
     quickReplies: QuickRepliesProps<TMessage>,

package/src/MessageContainer/index.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import {
   View,
-  TouchableOpacity,
+  Pressable,
   Text,
   Platform,
   LayoutChangeEvent,
@@ -23,11 +23,12 @@ import { ItemProps } from './components/Item/types'
 import { warning } from '../logging'
 import stylesCommon from '../styles'
 import styles from './styles'
-import { isSameDay } from '../utils'
+import { isSameDay, useCallbackThrottled } from '../utils'
 
 export * from './types'
 
-const AnimatedFlatList = Animated.createAnimatedComponent(FlatList)
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const AnimatedFlatList = Animated.createAnimatedComponent(FlatList) as React.ComponentType<any>
 
 function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageContainerProps<TMessage>) {
   const {
@@ -53,9 +54,12 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     forwardRef,
     handleOnScroll: handleOnScrollProp,
     scrollToBottomComponent: scrollToBottomComponentProp,
+    renderDay: renderDayProp,
   } = props
 
   const scrollToBottomOpacity = useSharedValue(0)
+  const isScrollingDown = useSharedValue(false)
+  const lastScrolledY = useSharedValue(0)
   const [isScrollToBottomVisible, setIsScrollToBottomVisible] = useState(false)
   const scrollToBottomStyleAnim = useAnimatedStyle(() => ({
     opacity: scrollToBottomOpacity.value,
@@ -74,9 +78,9 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
 
   const ListFooterComponent = useMemo(() => {
     if (renderFooterProp)
-      return <>{renderFooterProp(props)}</>
+      return renderFooterProp(props)
 
-    return <>{renderTypingIndicator()}</>
+    return renderTypingIndicator()
   }, [renderFooterProp, renderTypingIndicator, props])
 
   const renderLoadEarlier = useCallback(() => {
@@ -90,17 +94,33 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     return null
   }, [loadEarlier, renderLoadEarlierProp, props])
 
+  const changeScrollToBottomVisibility: (isVisible: boolean) => void = useCallbackThrottled((isVisible: boolean) => {
+    if (isScrollingDown.value && isVisible)
+      return
+
+    if (isVisible)
+      setIsScrollToBottomVisible(true)
+
+    scrollToBottomOpacity.value = withTiming(isVisible ? 1 : 0, { duration: 250 }, isFinished => {
+      if (isFinished && !isVisible)
+        runOnJS(setIsScrollToBottomVisible)(false)
+    })
+  }, [scrollToBottomOpacity, isScrollingDown], 50)
+
   const scrollTo = useCallback((options: { animated?: boolean, offset: number }) => {
-    if (forwardRef?.current && options)
-      forwardRef.current.scrollToOffset(options)
+    if (options)
+      forwardRef?.current?.scrollToOffset(options)
   }, [forwardRef])
 
   const doScrollToBottom = useCallback((animated: boolean = true) => {
+    isScrollingDown.value = true
+    changeScrollToBottomVisibility(false)
+
     if (inverted)
       scrollTo({ offset: 0, animated })
     else if (forwardRef?.current)
       forwardRef.current.scrollToEnd({ animated })
-  }, [forwardRef, inverted, scrollTo])
+  }, [forwardRef, inverted, scrollTo, isScrollingDown, changeScrollToBottomVisibility])
 
   const handleOnScroll = useCallback((event: ReanimatedScrollEvent) => {
     handleOnScrollProp?.(event)
@@ -111,33 +131,25 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
       layoutMeasurement: { height: layoutMeasurementHeight },
     } = event
 
-    const duration = 250
+    isScrollingDown.value =
+      (inverted && lastScrolledY.value > contentOffsetY) ||
+      (!inverted && lastScrolledY.value < contentOffsetY)
 
-    const makeScrollToBottomVisible = () => {
-      setIsScrollToBottomVisible(true)
-      scrollToBottomOpacity.value = withTiming(1, { duration })
-    }
-
-    const makeScrollToBottomHidden = () => {
-      scrollToBottomOpacity.value = withTiming(0, { duration }, isFinished => {
-        if (isFinished)
-          runOnJS(setIsScrollToBottomVisible)(false)
-      })
-    }
+    lastScrolledY.value = contentOffsetY
 
     if (inverted)
       if (contentOffsetY > scrollToBottomOffset!)
-        makeScrollToBottomVisible()
+        changeScrollToBottomVisibility(true)
       else
-        makeScrollToBottomHidden()
+        changeScrollToBottomVisibility(false)
     else if (
       contentOffsetY < scrollToBottomOffset! &&
       contentSizeHeight - layoutMeasurementHeight > scrollToBottomOffset!
     )
-      makeScrollToBottomVisible()
+      changeScrollToBottomVisibility(false)
     else
-      makeScrollToBottomHidden()
-  }, [handleOnScrollProp, inverted, scrollToBottomOffset, scrollToBottomOpacity])
+      changeScrollToBottomVisibility(false)
+  }, [handleOnScrollProp, inverted, scrollToBottomOffset, changeScrollToBottomVisibility, isScrollingDown, lastScrolledY])
 
   const renderItem = useCallback(({ item, index }: ListRenderItemInfo<unknown>): React.ReactElement | null => {
     const messageItem = item as TMessage
@@ -215,39 +227,46 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     return <Text>{'V'}</Text>
   }, [scrollToBottomComponentProp])
 
-  const renderScrollToBottomWrapper = useCallback(() => {
+  const ScrollToBottomWrapper = useCallback(() => {
+    if (!isScrollToBottomEnabled)
+      return null
+
     if (!isScrollToBottomVisible)
       return null
 
     return (
-      <TouchableOpacity onPress={() => doScrollToBottom()}>
+      <Pressable
+        style={styles.scrollToBottom}
+        onPress={() => doScrollToBottom()}
+      >
         <Animated.View
           style={[
             stylesCommon.centerItems,
-            styles.scrollToBottomStyle,
+            styles.scrollToBottomContent,
             scrollToBottomStyle,
             scrollToBottomStyleAnim,
           ]}
         >
           {renderScrollBottomComponent()}
         </Animated.View>
-      </TouchableOpacity>
+      </Pressable>
     )
-  }, [scrollToBottomStyle, renderScrollBottomComponent, doScrollToBottom, scrollToBottomStyleAnim, isScrollToBottomVisible])
+  }, [scrollToBottomStyle, renderScrollBottomComponent, doScrollToBottom, scrollToBottomStyleAnim, isScrollToBottomEnabled, isScrollToBottomVisible])
 
   const onLayoutList = useCallback((event: LayoutChangeEvent) => {
     listHeight.value = event.nativeEvent.layout.height
 
     if (
       !inverted &&
-      messages?.length
+      messages?.length &&
+      isScrollToBottomEnabled
     )
       setTimeout(() => {
         doScrollToBottom(false)
       }, 500)
 
     listViewProps?.onLayout?.(event)
-  }, [inverted, messages, doScrollToBottom, listHeight, listViewProps])
+  }, [inverted, messages, doScrollToBottom, listHeight, listViewProps, isScrollToBottomEnabled])
 
   const onEndReached = useCallback(() => {
     if (
@@ -263,15 +282,18 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
   const keyExtractor = useCallback((item: unknown) => (item as TMessage)._id.toString(), [])
 
   const renderCell = useCallback((props: CellRendererProps<unknown>) => {
+    const { item, onLayout: onLayoutProp, children } = props
+    const id = (item as IMessage)._id.toString()
+
     const handleOnLayout = (event: LayoutChangeEvent) => {
-      props.onLayout?.(event)
+      onLayoutProp?.(event)
 
       const { y, height } = event.nativeEvent.layout
 
       const newValue = {
         y,
         height,
-        createdAt: new Date((props.item as IMessage).createdAt).getTime(),
+        createdAt: new Date((item as IMessage).createdAt).getTime(),
       }
 
       daysPositions.modify(value => {
@@ -295,7 +317,7 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
           }
 
         // @ts-expect-error: https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue#remarks
-        value[props.item._id] = newValue
+        value[id] = newValue
         return value
       })
     }
@@ -305,7 +327,7 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
         {...props}
         onLayout={handleOnLayout}
       >
-        {props.children}
+        {children}
       </View>
     )
   }, [daysPositions, inverted])
@@ -349,7 +371,7 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     >
       <AnimatedFlatList
         extraData={extraData}
-        ref={forwardRef as React.Ref<FlatList<unknown>>}
+        ref={forwardRef}
         keyExtractor={keyExtractor}
         data={messages}
         renderItem={renderItem}
@@ -372,13 +394,12 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
         onLayout={onLayoutList}
         CellRendererComponent={renderCell}
       />
-      {isScrollToBottomEnabled
-        ? renderScrollToBottomWrapper()
-        : null}
+      <ScrollToBottomWrapper />
       <DayAnimated
         scrolledY={scrolledY}
         daysPositions={daysPositions}
         listHeight={listHeight}
+        renderDay={renderDayProp}
         messages={messages}
         isLoadingEarlier={isLoadingEarlier}
       />

package/src/MessageContainer/styles.ts

@@ -13,12 +13,13 @@ export default StyleSheet.create({
   emptyChatContainer: {
     transform: [{ scaleY: -1 }],
   },
-  scrollToBottomStyle: {
-    opacity: 0.8,
+  scrollToBottom: {
     position: 'absolute',
     right: 10,
     bottom: 30,
     zIndex: 999,
+  },
+  scrollToBottomContent: {
     height: 40,
     width: 40,
     borderRadius: 20,

package/src/MessageContainer/types.ts

@@ -1,23 +1,19 @@
-import React, { Component, RefObject } from 'react'
+import React, { RefObject } from 'react'
 import {
   FlatListProps,
-  LayoutChangeEvent,
   StyleProp,
   ViewStyle,
+  FlatList,
 } from 'react-native'
 
 import { LoadEarlierProps } from '../LoadEarlier'
 import { MessageProps } from '../Message'
-import { User, IMessage, Reply } from '../types'
+import { User, IMessage, Reply, DayProps } from '../types'
 import { ReanimatedScrollEvent } from 'react-native-reanimated/lib/typescript/hook/commonTypes'
-import { FlatList } from 'react-native-reanimated/lib/typescript/Animated'
-import { AnimateProps } from 'react-native-reanimated'
 
-export type ListViewProps = {
-  onLayout?: (event: LayoutChangeEvent) => void
-} & object
+export type ListViewProps<TMessage extends IMessage = IMessage> = Partial<FlatListProps<TMessage>>
 
-export type AnimatedList<TMessage> = Component<AnimateProps<FlatListProps<TMessage>>, unknown, unknown> & FlatList<FlatListProps<TMessage>>
+export type AnimatedList<TMessage> = FlatList<TMessage>
 
 export interface MessageContainerProps<TMessage extends IMessage = IMessage> {
   forwardRef?: RefObject<AnimatedList<TMessage>>
@@ -36,6 +32,7 @@ export interface MessageContainerProps<TMessage extends IMessage = IMessage> {
   renderChatEmpty?(): React.ReactNode
   renderFooter?(props: MessageContainerProps<TMessage>): React.ReactNode
   renderMessage?(props: MessageProps<TMessage>): React.ReactElement
+  renderDay?(props: DayProps): React.ReactNode
   renderLoadEarlier?(props: LoadEarlierProps): React.ReactNode
   renderTypingIndicator?(): React.ReactNode
   scrollToBottomComponent?(): React.ReactNode

package/src/MessageText.tsx

@@ -1,84 +1,46 @@
-import React from 'react'
+import React, { useMemo, useCallback } from 'react'
 import {
   Linking,
   StyleSheet,
-  View,
-  TextProps,
   StyleProp,
   ViewStyle,
   TextStyle,
 } from 'react-native'
 
-import ParsedText from 'react-native-parsed-text'
+import Autolink, { AutolinkProps } from 'react-native-autolink'
+import { Match } from 'autolinker/dist/es2015'
 import { LeftRightStyle, IMessage } from './types'
-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',
-    },
-  }),
+export interface MessageOption {
+  title: string
+  action: (phone: string) => void
 }
 
-const DEFAULT_OPTION_TITLES = ['Call', 'Text', 'Cancel']
-
-export interface MessageTextProps<TMessage extends IMessage> {
+export type 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) => []
-}
+  onPress?: (
+    message: TMessage,
+    url: string,
+    match: Match
+  ) => void
+} & Omit<AutolinkProps, 'text' | 'onPress'>
 
-export function MessageText<TMessage extends IMessage = IMessage> ({
-  currentMessage = {} as TMessage,
-  optionTitles = DEFAULT_OPTION_TITLES,
+export const MessageText: React.FC<MessageTextProps<IMessage>> = ({
+  currentMessage = {} as IMessage,
   position = 'left',
   containerStyle,
   textStyle,
   linkStyle: linkStyleProp,
   customTextStyle,
-  parsePatterns,
-  textProps,
-}: MessageTextProps<TMessage>) {
-  const { actionSheet } = useChatContext()
-
+  onPress: onPressProp,
+  ...rest
+}) => {
   // TODO: React.memo
   // const shouldComponentUpdate = (nextProps: MessageTextProps<TMessage>) => {
   //   return (
@@ -88,77 +50,80 @@ export function MessageText<TMessage extends IMessage = IMessage> ({
   //   )
   // }
 
-  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 onUrlPress = useCallback((url: string) => {
+    if (/^www\./i.test(url))
+      url = `https://${url}`
+
+    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 onPhonePress = useCallback((phone: string) => {
+    Linking.openURL(`tel:${phone}`).catch(e => {
+      error(e, 'No handler for telephone')
+    })
+  }, [])
 
-  const onEmailPress = (email: string) =>
+  const onEmailPress = useCallback((email: string) =>
     Linking.openURL(`mailto:${email}`).catch(e =>
       error(e, 'No handler for mailto')
-    )
+    ), [])
 
-  const linkStyle = [
-    styles[position].link,
+  const linkStyle = useMemo(() => StyleSheet.flatten([
+    styles.link,
     linkStyleProp?.[position],
-  ]
+  ]), [position, linkStyleProp])
+
+  const handlePress = useCallback((url: string, match: Match) => {
+    const type = match.getType()
+
+    if (onPressProp)
+      onPressProp(currentMessage, url, match)
+    else if (type === 'url')
+      onUrlPress(url)
+    else if (type === 'phone')
+      onPhonePress(url)
+    else if (type === 'email')
+      onEmailPress(url)
+  }, [onUrlPress, onPhonePress, onEmailPress, onPressProp, currentMessage])
+
+  const style = useMemo(() => [
+    containerStyle?.[position],
+    styles[`text_${position}`],
+    textStyle?.[position],
+    customTextStyle,
+  ], [containerStyle, position, textStyle, customTextStyle])
+
   return (
-    <View
-      style={[
-        styles[position].container,
-        containerStyle?.[position],
-      ]}
-    >
-      <ParsedText
-        style={[
-          styles[position].text,
-          textStyle?.[position],
-          customTextStyle,
-        ]}
-        parse={[
-          ...(parsePatterns ? parsePatterns(linkStyle as unknown 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>
+    <Autolink
+      style={style}
+      {...rest}
+      text={currentMessage!.text}
+      email
+      link
+      linkStyle={linkStyle}
+      onPress={handlePress}
+    />
   )
 }
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 16,
+    lineHeight: 20,
+    marginTop: 5,
+    marginBottom: 5,
+    marginLeft: 10,
+    marginRight: 10,
+  },
+  text_left: {
+    color: 'black',
+  },
+  text_right: {
+    color: 'white',
+  },
+  link: {
+    textDecorationLine: 'underline',
+  },
+})

package/src/SystemMessage.tsx

@@ -29,6 +29,7 @@ export interface SystemMessageProps<TMessage extends IMessage> {
   containerStyle?: StyleProp<ViewStyle>
   wrapperStyle?: StyleProp<ViewStyle>
   textStyle?: StyleProp<TextStyle>
+  children?: React.ReactNode
 }
 
 export function SystemMessage<TMessage extends IMessage = IMessage> ({
@@ -36,6 +37,7 @@ export function SystemMessage<TMessage extends IMessage = IMessage> ({
   containerStyle,
   wrapperStyle,
   textStyle,
+  children,
 }: SystemMessageProps<TMessage>) {
   if (currentMessage == null || currentMessage.system === false)
     return null
@@ -43,7 +45,8 @@ export function SystemMessage<TMessage extends IMessage = IMessage> ({
   return (
     <View style={[stylesCommon.fill, stylesCommon.centerItems, styles.container, containerStyle]}>
       <View style={wrapperStyle}>
-        <Text style={[styles.text, textStyle]}>{currentMessage.text}</Text>
+        {!!currentMessage.text && <Text style={[styles.text, textStyle]}>{currentMessage.text}</Text>}
+        {children}
       </View>
     </View>
   )