react-native-gifted-chat 2.9.0-alpha.0 → 3.0.0-alpha.0

package/src/Bubble/types.ts

@@ -6,8 +6,6 @@ import {
 } from 'react-native'
 import { MessageImageProps } from '../MessageImage'
 import { MessageTextProps } from '../MessageText'
-import { QuickRepliesProps } from '../QuickReplies'
-import { TimeProps } from '../Time'
 import {
   User,
   IMessage,
@@ -16,7 +14,9 @@ import {
   Omit,
   MessageVideoProps,
   MessageAudioProps,
-} from '../types'
+} from '../Models'
+import { QuickRepliesProps } from '../QuickReplies'
+import { TimeProps } from '../Time'
 
 
 export type RenderMessageImageProps<TMessage extends IMessage> = Omit<
@@ -47,9 +47,9 @@ export type RenderMessageTextProps<TMessage extends IMessage> = Omit<
 export interface BubbleProps<TMessage extends IMessage> {
   user?: User
   touchableProps?: object
-  renderUsernameOnMessage?: boolean
+  isUsernameVisible?: boolean
   isCustomViewBottom?: boolean
-  inverted?: boolean
+  isInverted?: boolean
   position: 'left' | 'right'
   currentMessage: TMessage
   nextMessage?: TMessage
@@ -66,25 +66,25 @@ export interface BubbleProps<TMessage extends IMessage> {
   quickReplyTextStyle?: StyleProp<TextStyle>
   quickReplyContainerStyle?: StyleProp<ViewStyle>
   messageTextProps?: Partial<MessageTextProps<TMessage>>
-  onPressMessage?(context?: unknown, message?: unknown): void
-  onLongPressMessage?(context?: unknown, message?: unknown): void
-  onQuickReply?(replies: Reply[]): void
-  renderMessageImage?(
+  onPressMessage?: (context?: unknown, message?: unknown) => void
+  onLongPressMessage?: (context?: unknown, message?: unknown) => void
+  onQuickReply?: (replies: Reply[]) => void
+  renderMessageImage?: (
     props: RenderMessageImageProps<TMessage>,
-  ): React.ReactNode
-  renderMessageVideo?(
+  ) => React.ReactNode
+  renderMessageVideo?: (
     props: RenderMessageVideoProps<TMessage>,
-  ): React.ReactNode
-  renderMessageAudio?(
+  ) => React.ReactNode
+  renderMessageAudio?: (
     props: RenderMessageAudioProps<TMessage>,
-  ): React.ReactNode
-  renderMessageText?(props: RenderMessageTextProps<TMessage>): React.ReactNode
-  renderCustomView?(bubbleProps: BubbleProps<TMessage>): React.ReactNode
-  renderTime?(timeProps: TimeProps<TMessage>): React.ReactNode
-  renderTicks?(currentMessage: TMessage): React.ReactNode
-  renderUsername?(user?: TMessage['user']): React.ReactNode
-  renderQuickReplySend?(): React.ReactNode
-  renderQuickReplies?(
+  ) => React.ReactNode
+  renderMessageText?: (props: RenderMessageTextProps<TMessage>) => React.ReactNode
+  renderCustomView?: (bubbleProps: BubbleProps<TMessage>) => React.ReactNode
+  renderTime?: (timeProps: TimeProps<TMessage>) => React.ReactNode
+  renderTicks?: (currentMessage: TMessage) => React.ReactNode
+  renderUsername?: (user?: TMessage['user']) => React.ReactNode
+  renderQuickReplySend?: () => React.ReactNode
+  renderQuickReplies?: (
     quickReplies: QuickRepliesProps<TMessage>,
-  ): React.ReactNode
+  ) => React.ReactNode
 }

package/src/Composer.tsx

@@ -16,14 +16,12 @@ export interface ComposerProps {
   composerHeight?: number
   text?: string
   textInputProps?: Partial<TextInputProps>
-  onTextChanged?(text: string): void
   onInputSizeChanged?(layout: { width: number, height: number }): void
 }
 
 export function Composer ({
   composerHeight = MIN_COMPOSER_HEIGHT,
   onInputSizeChanged,
-  onTextChanged,
   text = '',
   textInputProps,
 }: ComposerProps): React.ReactElement {
@@ -67,7 +65,6 @@ export function Composer ({
       accessibilityLabel={placeholder}
       placeholderTextColor={textInputProps?.placeholderTextColor ?? (isDark ? '#888' : Color.defaultColor)}
       onContentSizeChange={handleContentSizeChange}
-      onChangeText={onTextChanged}
       value={text}
       enablesReturnKeyAutomatically
       underlineColorAndroid='transparent'

package/src/GiftedAvatar.tsx

@@ -10,8 +10,8 @@ import {
 } from 'react-native'
 import { Color } from './Color'
 import { TouchableOpacity } from './components/TouchableOpacity'
+import { User } from './Models'
 import stylesCommon from './styles'
-import { User } from './types'
 
 const {
   carrot,

package/src/GiftedChat/index.tsx

@@ -32,10 +32,8 @@ import { MAX_COMPOSER_HEIGHT, MIN_COMPOSER_HEIGHT, TEST_ID } from '../Constant'
 import { GiftedChatContext } from '../GiftedChatContext'
 import { InputToolbar } from '../InputToolbar'
 import { MessageContainer, AnimatedList } from '../MessageContainer'
+import { IMessage } from '../Models'
 import stylesCommon from '../styles'
-import {
-  IMessage,
-} from '../types'
 import { renderComponentOrElement } from '../utils'
 import styles from './styles'
 import { GiftedChatProps } from './types'
@@ -64,9 +62,8 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     renderChatFooter,
     renderInputToolbar,
     keyboardBottomOffset = 0,
-    focusOnInputWhenOpeningKeyboard = true,
-    onInputTextChanged,
-    inverted = true,
+    shouldFocusInputOnKeyboardOpen = true,
+    isInverted = true,
     minComposerHeight = MIN_COMPOSER_HEIGHT,
     maxComposerHeight = MAX_COMPOSER_HEIGHT,
     isKeyboardInternallyHandled = true,
@@ -158,7 +155,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       if (!messageContainerRef?.current)
         return
 
-      if (inverted) {
+      if (isInverted) {
         messageContainerRef.current.scrollToOffset({
           offset: 0,
           animated: isAnimated,
@@ -168,7 +165,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
 
       messageContainerRef.current.scrollToEnd({ animated: isAnimated })
     },
-    [inverted, messageContainerRef]
+    [isInverted, messageContainerRef]
   )
 
   const renderMessages = useMemo(() => {
@@ -181,7 +178,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       <View style={[stylesCommon.fill, messagesContainerStyle]}>
         <MessageContainer<TMessage>
           {...messagesContainerProps}
-          inverted={inverted}
+          isInverted={isInverted}
           messages={messages}
           forwardRef={messageContainerRef}
           isTyping={isTyping}
@@ -194,14 +191,14 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     isTyping,
     messages,
     props,
-    inverted,
+    isInverted,
     messageContainerRef,
     renderChatFooter,
   ])
 
   const notifyInputTextReset = useCallback(() => {
-    onInputTextChanged?.('')
-  }, [onInputTextChanged])
+    props.textInputProps?.onChangeText?.('')
+  }, [props.textInputProps])
 
   const resetInputToolbar = useCallback(() => {
     textInputRef.current?.clear()
@@ -253,15 +250,15 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     [maxComposerHeight, minComposerHeight]
   )
 
-  const _onInputTextChanged = useCallback(
+  const _onChangeText = useCallback(
     (text: string) => {
-      onInputTextChanged?.(text)
+      props.textInputProps?.onChangeText?.(text)
 
       // Only set state if it's not being overridden by a prop.
       if (props.text === undefined)
         setText(text)
     },
-    [onInputTextChanged, props.text]
+    [props.text, props.textInputProps]
   )
 
   const onInitialLayoutViewLayout = useCallback(
@@ -293,9 +290,9 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       composerHeight: Math.max(minComposerHeight!, composerHeight),
       onSend: _onSend,
       onInputSizeChanged,
-      onTextChanged: _onInputTextChanged,
       textInputProps: {
         ...textInputProps,
+        onChangeText: _onChangeText,
         ref: textInputRef,
       },
     }
@@ -316,7 +313,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     composerHeight,
     textInputRef,
     textInputProps,
-    _onInputTextChanged,
+    _onChangeText,
   ])
 
   const contextValues = useMemo(
@@ -357,7 +354,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
             }
           )
 
-          if (focusOnInputWhenOpeningKeyboard)
+          if (shouldFocusInputOnKeyboardOpen)
             if (isKeyboardMovingUp)
               runOnJS(handleTextInputFocusWhenKeyboardShow)()
             else
@@ -368,7 +365,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     [
       keyboard,
       trackingKeyboardMovement,
-      focusOnInputWhenOpeningKeyboard,
+      shouldFocusInputOnKeyboardOpen,
       handleTextInputFocusWhenKeyboardHide,
       handleTextInputFocusWhenKeyboardShow,
       keyboardBottomOffset,
@@ -415,12 +412,12 @@ function GiftedChatWrapper<TMessage extends IMessage = IMessage> (props: GiftedC
 GiftedChatWrapper.append = <TMessage extends IMessage>(
   currentMessages: TMessage[] = [],
   messages: TMessage[],
-  inverted = true
+  isInverted = true
 ) => {
   if (!Array.isArray(messages))
     messages = [messages]
 
-  return inverted
+  return isInverted
     ? messages.concat(currentMessages)
     : currentMessages.concat(messages)
 }
@@ -428,12 +425,12 @@ GiftedChatWrapper.append = <TMessage extends IMessage>(
 GiftedChatWrapper.prepend = <TMessage extends IMessage>(
   currentMessages: TMessage[] = [],
   messages: TMessage[],
-  inverted = true
+  isInverted = true
 ) => {
   if (!Array.isArray(messages))
     messages = [messages]
 
-  return inverted
+  return isInverted
     ? currentMessages.concat(messages)
     : messages.concat(currentMessages)
 }

package/src/GiftedChat/types.ts

@@ -13,21 +13,20 @@ import { AvatarProps } from '../Avatar'
 import { BubbleProps } from '../Bubble'
 import { ComposerProps } from '../Composer'
 import { InputToolbarProps } from '../InputToolbar'
-import { MessageProps } from '../Message'
 import { AnimatedList, MessageContainerProps } from '../MessageContainer'
 import { MessageImageProps } from '../MessageImage'
 import { MessageTextProps } from '../MessageText'
-import { QuickRepliesProps } from '../QuickReplies'
-import { SendProps } from '../Send'
-import { SystemMessageProps } from '../SystemMessage'
-import { TimeProps } from '../Time'
 import {
   IMessage,
   LeftRightStyle,
   MessageAudioProps,
   MessageVideoProps,
   User,
-} from '../types'
+} from '../Models'
+import { QuickRepliesProps } from '../QuickReplies'
+import { SendProps } from '../Send'
+import { SystemMessageProps } from '../SystemMessage'
+import { TimeProps } from '../Time'
 
 export interface GiftedChatProps<TMessage extends IMessage> extends Partial<MessageContainerProps<TMessage>> {
   /* Message container ref */
@@ -35,7 +34,7 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   /* text input ref */
   textInputRef?: RefObject<TextInput>
   /* Controls whether or not to show user.name property in the message bubble */
-  renderUsernameOnMessage?: boolean
+  isUsernameVisible?: boolean
   /* Messages container style */
   messagesContainerStyle?: StyleProp<ViewStyle>
   /* Input text; default is undefined, but if specified, it will override GiftedChat's internal state */
@@ -54,23 +53,23 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   /* 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
   /* Whether to render an avatar for the current user; default is false, only show avatars for other users */
-  showUserAvatar?: boolean
+  isUserAvatarVisible?: 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
+  isAvatarVisibleForEveryMessage?: boolean
   /* Render the message avatar at the top of consecutive messages, rather than the bottom; default is false */
-  renderAvatarOnTop?: boolean
+  isAvatarOnTop?: boolean
   /* Extra props to be passed to the <Image> component created by the default renderMessageImage */
   imageProps?: MessageImageProps<TMessage>
   /* Distance of the chat from the bottom of the screen (e.g. useful if you display a tab bar); default is 0 */
   keyboardBottomOffset?: number
   /* Focus on <TextInput> automatically when opening the keyboard; default is true */
-  focusOnInputWhenOpeningKeyboard?: boolean
+  shouldFocusInputOnKeyboardOpen?: boolean
   /* Minimum height of the input toolbar; default is 44 */
   minInputToolbarHeight?: number
   /*  Extra props to be passed to the <TextInput>. See https://reactnative.dev/docs/textinput */
   textInputProps?: Partial<React.ComponentProps<typeof TextInput>>
   /* Force send button */
-  alwaysShowSend?: boolean
+  isSendButtonAlwaysVisible?: boolean
   /* Image style */
   imageStyle?: StyleProp<ViewStyle>
   /* composer min Height */
@@ -86,73 +85,65 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   isCustomViewBottom?: boolean
   timeTextStyle?: LeftRightStyle<TextStyle>
   /* Custom action sheet */
-  actionSheet?(): {
+  actionSheet?: () => {
     showActionSheetWithOptions: (
       options: ActionSheetOptions,
       callback: (buttonIndex: number) => void | Promise<void>,
     ) => void
   }
   /* Callback when a message avatar is tapped */
-  onPressAvatar?(user: User): void
+  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
+  onLongPressAvatar?: (user: User) => void
+  /* Generate an id for new messages. Defaults to a simple random string generator */
+  messageIdGenerator?: (message?: TMessage) => string
   /* Callback when sending a message */
-  onSend?(messages: TMessage[]): void
+  onSend?: (messages: TMessage[]) => void
   /*  Render a loading view when initializing */
-  renderLoading?(): React.ReactNode
+  renderLoading?: () => 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: BubbleProps<TMessage>): React.ReactNode
+  renderBubble?: (props: BubbleProps<TMessage>) => React.ReactNode
   /* Custom system message */
-  renderSystemMessage?(props: SystemMessageProps<TMessage>): React.ReactNode
+  renderSystemMessage?: (props: SystemMessageProps<TMessage>) => React.ReactNode
   /* Callback when a message bubble is pressed; default is to do nothing */
-  onPressMessage?(context: unknown, message: TMessage): void
+  onPressMessage?: (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()) */
-  onLongPressMessage?(context: unknown, message: TMessage): void
+  onLongPressMessage?: (context: unknown, message: TMessage) => void
   /* Custom Username container */
-  renderUsername?(user: User): React.ReactNode
+  renderUsername?: (user: User) => React.ReactNode
   /* Reverses display order of messages; default is true */
   /* Custom message text */
-  renderMessageText?(messageText: MessageTextProps<TMessage>): React.ReactNode
+  renderMessageText?: (messageText: MessageTextProps<TMessage>) => React.ReactNode
   /* Custom message image */
-  renderMessageImage?(props: MessageImageProps<TMessage>): React.ReactNode
+  renderMessageImage?: (props: MessageImageProps<TMessage>) => React.ReactNode
   /* Custom message video */
-  renderMessageVideo?(props: MessageVideoProps<TMessage>): React.ReactNode
+  renderMessageVideo?: (props: MessageVideoProps<TMessage>) => React.ReactNode
   /* Custom message video */
-  renderMessageAudio?(props: MessageAudioProps<TMessage>): React.ReactNode
+  renderMessageAudio?: (props: MessageAudioProps<TMessage>) => React.ReactNode
   /* Custom view inside the bubble */
-  renderCustomView?(props: BubbleProps<TMessage>): React.ReactNode
+  renderCustomView?: (props: BubbleProps<TMessage>) => React.ReactNode
   /* Custom time inside a message */
-  renderTime?(props: TimeProps<TMessage>): React.ReactNode
+  renderTime?: (props: TimeProps<TMessage>) => React.ReactNode
   /* Custom component to render below the MessageContainer (separate from the ListView) */
-  renderChatFooter?(): React.ReactNode
+  renderChatFooter?: () => 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
+  renderComposer?: (props: ComposerProps) => React.ReactNode
   /* Custom action button on the left of the message composer */
-  renderActions?(props: ActionsProps): React.ReactNode
+  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
+  renderSend?: (props: SendProps<TMessage>) => React.ReactNode
   /* Custom second line of actions below the message composer */
-  renderAccessory?(props: InputToolbarProps<TMessage>): React.ReactNode
+  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
+  onPressActionButton?: () => void
   /* Extra props to be passed to the MessageText component */
   messageTextProps?: Partial<MessageTextProps<TMessage>>
-  /* Custom parse patterns for react-native-autolink used to linking message content (like URLs and phone numbers) */
-  matchers?: MessageTextProps<TMessage>['matchers']
-  renderQuickReplies?(
+  renderQuickReplies?: (
     quickReplies: QuickRepliesProps<TMessage>,
-  ): React.ReactNode
-  renderQuickReplySend?(): React.ReactNode
-  shouldUpdateMessage?(
-    props: MessageProps<TMessage>,
-    nextProps: MessageProps<TMessage>,
-  ): boolean
+  ) => React.ReactNode
+  renderQuickReplySend?: () => React.ReactNode
 }

package/src/InputToolbar.tsx

@@ -4,8 +4,8 @@ import { StyleSheet, View, StyleProp, ViewStyle, useColorScheme } from 'react-na
 import { Actions, ActionsProps } from './Actions'
 import { Color } from './Color'
 import { Composer, ComposerProps } from './Composer'
+import { IMessage } from './Models'
 import { Send, SendProps } from './Send'
-import { IMessage } from './types'
 import { renderComponentOrElement } from './utils'
 
 export interface InputToolbarProps<TMessage extends IMessage> {
@@ -14,11 +14,11 @@ export interface InputToolbarProps<TMessage extends IMessage> {
   containerStyle?: StyleProp<ViewStyle>
   primaryStyle?: StyleProp<ViewStyle>
   accessoryStyle?: StyleProp<ViewStyle>
-  renderAccessory?(props: InputToolbarProps<TMessage>): React.ReactNode
-  renderActions?(props: ActionsProps): React.ReactNode
-  renderSend?(props: SendProps<TMessage>): React.ReactNode
-  renderComposer?(props: ComposerProps): React.ReactNode
-  onPressActionButton?(): void
+  renderAccessory?: (props: InputToolbarProps<TMessage>) => React.ReactNode
+  renderActions?: (props: ActionsProps) => React.ReactNode
+  renderSend?: (props: SendProps<TMessage>) => React.ReactNode
+  renderComposer?: (props: ComposerProps) => React.ReactNode
+  onPressActionButton?: () => void
   icon?: () => React.ReactNode
   wrapperStyle?: StyleProp<ViewStyle>
 }

package/src/Message/index.tsx

@@ -3,9 +3,8 @@ import { View } from 'react-native'
 
 import { Avatar } from '../Avatar'
 import { Bubble } from '../Bubble'
+import { IMessage } from '../Models'
 import { SystemMessage } from '../SystemMessage'
-
-import { IMessage } from '../types'
 import { isSameUser, renderComponentOrElement } from '../utils'
 import styles from './styles'
 import { MessageProps } from './types'
@@ -22,7 +21,7 @@ export const Message = <TMessage extends IMessage = IMessage>(props: MessageProp
     position,
     containerStyle,
     user,
-    showUserAvatar,
+    isUserAvatarVisible,
   } = props
 
   const renderBubble = useCallback(() => {
@@ -60,7 +59,7 @@ export const Message = <TMessage extends IMessage = IMessage>(props: MessageProp
       user?._id &&
       currentMessage?.user &&
       user._id === currentMessage.user._id &&
-      !showUserAvatar
+      !isUserAvatarVisible
     )
       return null
 
@@ -80,7 +79,7 @@ export const Message = <TMessage extends IMessage = IMessage>(props: MessageProp
     props,
     user,
     currentMessage,
-    showUserAvatar,
+    isUserAvatarVisible,
   ])
 
   if (!currentMessage)
@@ -99,7 +98,7 @@ export const Message = <TMessage extends IMessage = IMessage>(props: MessageProp
             style={[
               styles[position].container,
               { marginBottom: sameUser ? 2 : 10 },
-              !props.inverted && { marginBottom: 2 },
+              !props.isInverted && { marginBottom: 2 },
               containerStyle?.[position],
             ]}
           >

package/src/Message/types.ts

@@ -2,25 +2,21 @@ import { ViewStyle, LayoutChangeEvent } from 'react-native'
 import { AvatarProps } from '../Avatar'
 import { BubbleProps } from '../Bubble'
 import { DayProps } from '../Day'
+import { IMessage, User, LeftRightStyle } from '../Models'
 import { SystemMessageProps } from '../SystemMessage'
-import { IMessage, User, LeftRightStyle } from '../types'
 
 export interface MessageProps<TMessage extends IMessage> {
-  showUserAvatar?: boolean
+  isUserAvatarVisible?: boolean
   position: 'left' | 'right'
   currentMessage: TMessage
   nextMessage?: TMessage
   previousMessage?: TMessage
   user: User
-  inverted?: boolean
+  isInverted?: boolean
   containerStyle?: LeftRightStyle<ViewStyle>
-  renderBubble?(props: BubbleProps<TMessage>): React.ReactNode
-  renderDay?(props: DayProps): React.ReactNode
-  renderSystemMessage?(props: SystemMessageProps<TMessage>): React.ReactNode
-  renderAvatar?(props: AvatarProps<TMessage>): React.ReactNode
-  shouldUpdateMessage?(
-    props: MessageProps<IMessage>,
-    nextProps: MessageProps<IMessage>,
-  ): boolean
-  onMessageLayout?(event: LayoutChangeEvent): void
+  renderBubble?: (props: BubbleProps<TMessage>) => React.ReactNode
+  renderDay?: (props: DayProps) => React.ReactNode
+  renderSystemMessage?: (props: SystemMessageProps<TMessage>) => React.ReactNode
+  renderAvatar?: (props: AvatarProps<TMessage>) => React.ReactNode
+  onMessageLayout?: (event: LayoutChangeEvent) => void
 }

package/src/MessageContainer/components/DayAnimated/types.ts

@@ -1,5 +1,5 @@
 import { DayProps } from '../../../Day'
-import { IMessage } from '../../../types'
+import { IMessage } from '../../../Models'
 import { DaysPositions } from '../../types'
 
 export interface DayAnimatedProps extends Omit<DayProps, 'createdAt'> {

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

@@ -2,8 +2,8 @@ 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 { IMessage } from '../../../types'
+import { Message, MessageProps } from '../../../Message'
+import { IMessage } from '../../../Models'
 import { isSameDay } from '../../../utils'
 import { DaysPositions } from '../../types'
 import { ItemProps } from './types'

package/src/MessageContainer/components/Item/types.ts

@@ -1,4 +1,4 @@
-import { IMessage } from '../../../types'
+import { IMessage } from '../../../Models'
 import { MessageContainerProps, DaysPositions } from '../../types'
 
 export interface ItemProps<TMessage extends IMessage> extends MessageContainerProps<TMessage> {