react-native-gifted-chat 2.6.5 → 2.7.0

package/src/GiftedChat/types.ts

@@ -0,0 +1,206 @@
+import React, { RefObject } from 'react'
+import {
+  ActionSheetOptions,
+} from '@expo/react-native-action-sheet'
+import {
+  TextInput,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native'
+import { LightboxProps } from 'react-native-lightbox-v2'
+import { ActionsProps } from '../Actions'
+import { AvatarProps } from '../Avatar'
+import { ComposerProps } from '../Composer'
+import { DayProps } from '../Day'
+import { InputToolbarProps } from '../InputToolbar'
+import { LoadEarlierProps } from '../LoadEarlier'
+import { MessageProps } from '../Message'
+import { MessageImageProps } from '../MessageImage'
+import { MessageTextProps } from '../MessageText'
+import {
+  IMessage,
+  LeftRightStyle,
+  MessageAudioProps,
+  MessageVideoProps,
+  Reply,
+  User,
+} from '../types'
+import { QuickRepliesProps } from '../QuickReplies'
+import { SendProps } from '../Send'
+import { SystemMessageProps } from '../SystemMessage'
+import { TimeProps } from '../Time'
+import MessageContainer, { AnimatedList, ListViewProps } from '../MessageContainer'
+import Bubble from '../Bubble'
+
+export interface GiftedChatProps<TMessage extends IMessage = IMessage> extends Partial<Omit<typeof MessageContainer<TMessage>, 'scrollToBottom'>> {
+  /* Message container ref */
+  messageContainerRef?: RefObject<AnimatedList>
+  /* text input ref */
+  textInputRef?: RefObject<TextInput>
+  /* Messages to display */
+  messages?: TMessage[]
+  /* Typing Indicator state */
+  isTyping?: boolean
+  /* Controls whether or not to show user.name property in the message bubble */
+  renderUsernameOnMessage?: 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
+  /* Format to use for rendering relative times; Today - for now. See more: https://day.js.org/docs/en/plugin/calendar */
+  dateFormatCalendar?: object
+  /* Enables the "Load earlier messages" button */
+  loadEarlier?: boolean
+  /* Display an ActivityIndicator when loading earlier messages */
+  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
+  /* 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?: MessageImageProps<TMessage>
+  /* Extra props to be passed to the MessageImage's Lightbox */
+  lightboxProps?: LightboxProps
+  /* Distance of the chat from the bottom of the screen (e.g. useful if you display a tab bar); default is 0 */
+  bottomOffset?: number
+  /* Focus on <TextInput> automatically when opening the keyboard; default is true */
+  focusOnInputWhenOpeningKeyboard?: boolean
+  /* 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?: ListViewProps
+  /*  Extra props to be passed to the <TextInput> */
+  textInputProps?: object
+  /* Determines whether the keyboard should stay visible after a tap; see <ScrollView> docs */
+  keyboardShouldPersistTaps?: 'always' | 'never' | 'handled'
+  /* 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: MessageProps<TMessage>): 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): 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) => { type?: string, pattern?: RegExp, style?: StyleProp<TextStyle> | object, onPress?: unknown, renderText?: unknown }[]
+  onQuickReply?(replies: Reply[]): void
+  renderQuickReplies?(
+    quickReplies: QuickRepliesProps<TMessage>,
+  ): React.ReactNode
+  renderQuickReplySend?(): React.ReactNode
+  /* Scroll to bottom custom component */
+  scrollToBottomComponent?(): React.ReactNode
+  shouldUpdateMessage?(
+    props: MessageProps<TMessage>,
+    nextProps: MessageProps<TMessage>,
+  ): boolean
+}

package/src/InputToolbar.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
 import React, { useMemo } from 'react'
 import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native'
 
@@ -6,8 +5,7 @@ import { Composer, ComposerProps } from './Composer'
 import { Send, SendProps } from './Send'
 import { Actions, ActionsProps } from './Actions'
 import Color from './Color'
-import { StylePropType } from './utils'
-import { IMessage } from './Models'
+import { IMessage } from './types'
 
 export interface InputToolbarProps<TMessage extends IMessage> {
   options?: { [key: string]: () => void }
@@ -86,17 +84,6 @@ export function InputToolbar<TMessage extends IMessage = IMessage> (
   )
 }
 
-InputToolbar.propTypes = {
-  renderAccessory: PropTypes.func,
-  renderActions: PropTypes.func,
-  renderSend: PropTypes.func,
-  renderComposer: PropTypes.func,
-  onPressActionButton: PropTypes.func,
-  containerStyle: StylePropType,
-  primaryStyle: StylePropType,
-  accessoryStyle: StylePropType,
-}
-
 const styles = StyleSheet.create({
   container: {
     borderTopWidth: StyleSheet.hairlineWidth,

package/src/LoadEarlier.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
 import React from 'react'
 import {
   ActivityIndicator,
@@ -12,7 +11,7 @@ import {
   TextStyle,
 } from 'react-native'
 import Color from './Color'
-import { StylePropType } from './utils'
+import stylesCommon from './styles'
 
 const styles = StyleSheet.create({
   container: {
@@ -21,8 +20,6 @@ const styles = StyleSheet.create({
     marginBottom: 10,
   },
   wrapper: {
-    alignItems: 'center',
-    justifyContent: 'center',
     backgroundColor: Color.defaultColor,
     borderRadius: 15,
     height: 30,
@@ -73,7 +70,7 @@ export function LoadEarlier ({
       disabled={isLoadingEarlier}
       accessibilityRole='button'
     >
-      <View style={[styles.wrapper, wrapperStyle]}>
+      <View style={[stylesCommon.centerItems, styles.wrapper, wrapperStyle]}>
         {isLoadingEarlier
           ? (
             <View>
@@ -94,15 +91,3 @@ export function LoadEarlier ({
     </TouchableOpacity>
   )
 }
-
-LoadEarlier.propTypes = {
-  onLoadEarlier: PropTypes.func,
-  isLoadingEarlier: PropTypes.bool,
-  label: PropTypes.string,
-  containerStyle: StylePropType,
-  wrapperStyle: StylePropType,
-  textStyle: StylePropType,
-  activityIndicatorStyle: StylePropType,
-  activityIndicatorColor: PropTypes.string,
-  activityIndicatorSize: PropTypes.string,
-}

package/src/Message/index.tsx

@@ -0,0 +1,135 @@
+import React, { memo, useCallback } from 'react'
+import { View } from 'react-native'
+import isEqual from 'lodash.isequal'
+
+import { Avatar } from '../Avatar'
+import Bubble from '../Bubble'
+import { SystemMessage } from '../SystemMessage'
+
+import { isSameUser } from '../utils'
+import { IMessage } from '../types'
+import { MessageProps } from './types'
+import styles from './styles'
+
+export * from './types'
+
+let Message: React.FC<MessageProps<IMessage>> = (props: MessageProps<IMessage>) => {
+  const {
+    currentMessage,
+    renderBubble: renderBubbleProp,
+    renderSystemMessage: renderSystemMessageProp,
+    onMessageLayout,
+    nextMessage,
+    position,
+    containerStyle,
+    user,
+    showUserAvatar,
+  } = props
+
+  const renderBubble = useCallback(() => {
+    const {
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      containerStyle,
+      onMessageLayout,
+      /* eslint-enable @typescript-eslint/no-unused-vars */
+      ...rest
+    } = props
+
+    if (renderBubbleProp)
+      return renderBubbleProp(rest)
+
+    return <Bubble {...rest} />
+  }, [props, renderBubbleProp])
+
+  const renderSystemMessage = useCallback(() => {
+    const {
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      containerStyle,
+      onMessageLayout,
+      /* eslint-enable @typescript-eslint/no-unused-vars */
+      ...rest
+    } = props
+
+    if (renderSystemMessageProp)
+      return renderSystemMessageProp(rest)
+
+    return <SystemMessage {...rest} />
+  }, [props, renderSystemMessageProp])
+
+  const renderAvatar = useCallback(() => {
+    if (
+      user?._id &&
+      currentMessage?.user &&
+      user._id === currentMessage.user._id &&
+      !showUserAvatar
+    )
+      return null
+
+    if (currentMessage?.user?.avatar === null)
+      return null
+
+    const {
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      containerStyle,
+      onMessageLayout,
+      /* eslint-enable @typescript-eslint/no-unused-vars */
+      ...rest
+    } = props
+
+    return <Avatar {...rest} />
+  }, [
+    props,
+    user,
+    currentMessage,
+    showUserAvatar,
+  ])
+
+  if (!currentMessage)
+    return null
+
+  const sameUser = isSameUser(currentMessage, nextMessage!)
+
+  return (
+    <View onLayout={onMessageLayout}>
+      {currentMessage.system
+        ? (
+          renderSystemMessage()
+        )
+        : (
+          <View
+            style={[
+              styles[position].container,
+              { marginBottom: sameUser ? 2 : 10 },
+              !props.inverted && { marginBottom: 2 },
+              containerStyle?.[position],
+            ]}
+          >
+            {position === 'left' ? renderAvatar() : null}
+            {renderBubble()}
+            {position === 'right' ? renderAvatar() : null}
+          </View>
+        )}
+    </View>
+  )
+}
+
+Message = memo(Message, (props, nextProps) => {
+  const next = nextProps.currentMessage!
+  const current = props.currentMessage!
+  const { previousMessage, nextMessage } = props
+  const nextPropsMessage = nextProps.nextMessage
+  const nextPropsPreviousMessage = nextProps.previousMessage
+
+  let shouldUpdate =
+    props.shouldUpdateMessage?.(props, nextProps) || false
+
+  shouldUpdate =
+    shouldUpdate ||
+    !isEqual(current, next) ||
+    !isEqual(previousMessage, nextPropsPreviousMessage) ||
+    !isEqual(nextMessage, nextPropsMessage)
+
+  return shouldUpdate
+})
+
+export default Message

package/src/Message/styles.ts

@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native'
+
+export default {
+  left: StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      justifyContent: 'flex-start',
+      marginLeft: 8,
+      marginRight: 0,
+    },
+  }),
+  right: StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      justifyContent: 'flex-end',
+      marginLeft: 0,
+      marginRight: 8,
+    },
+  }),
+}

package/src/Message/types.ts

@@ -0,0 +1,26 @@
+import { ViewStyle, LayoutChangeEvent } from 'react-native'
+import { AvatarProps } from '../Avatar'
+import { SystemMessageProps } from '../SystemMessage'
+import { DayProps } from '../Day'
+import { IMessage, User, LeftRightStyle } from '../types'
+import Bubble from '../Bubble'
+
+export interface MessageProps<TMessage extends IMessage> {
+  showUserAvatar?: boolean
+  position: 'left' | 'right'
+  currentMessage: TMessage
+  nextMessage?: TMessage
+  previousMessage?: TMessage
+  user: User
+  inverted?: boolean
+  containerStyle?: LeftRightStyle<ViewStyle>
+  renderBubble?(props: Bubble['props']): 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
+}

package/src/MessageAudio.tsx

@@ -9,10 +9,7 @@ export function MessageAudio () {
         {'Audio is not implemented by GiftedChat.'}
       </Text>
       <Text style={{ color: Color.alizarin, fontWeight: '600' }}>
-        {
-          'You need to provide your own implementation by using renderMessageAudio'
-        }
-        {'prop.'}
+        {'\nYou need to provide your own implementation by using renderMessageAudio prop.'}
       </Text>
     </View>
   )

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

@@ -0,0 +1,143 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { LayoutChangeEvent } from 'react-native'
+import Animated, { interpolate, useAnimatedStyle, useDerivedValue, useSharedValue, useAnimatedReaction, withTiming, runOnJS } from 'react-native-reanimated'
+import { Day } from '../../../Day'
+import { isSameDay } from '../../../utils'
+import { useScrolledPosition, useTopOffset } from '../Item'
+import { DayAnimatedProps } from './types'
+
+import stylesCommon from '../../../styles'
+import styles from './styles'
+
+export * from './types'
+
+const DayAnimated = ({ scrolledY, daysPositions, listHeight, renderDay, messages, isLoadingEarlier, ...rest }: DayAnimatedProps) => {
+  const opacity = useSharedValue(0)
+  const fadeOutOpacityTimeoutId = useSharedValue<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const containerHeight = useSharedValue(0)
+
+  const isScrolledOnMount = useSharedValue(false)
+  const isLoadingEarlierAnim = useSharedValue(isLoadingEarlier)
+
+  const daysPositionsArray = useDerivedValue(() => Object.values(daysPositions.value).sort((a, b) => a.y - b.y))
+
+  const [createdAt, setCreatedAt] = useState<number | undefined>()
+
+  const dayTopOffset = useMemo(() => 10, [])
+  const dayBottomMargin = useMemo(() => 10, [])
+  const scrolledPosition = useScrolledPosition(listHeight, scrolledY, containerHeight, dayBottomMargin, dayTopOffset)
+  const topOffset = useTopOffset(listHeight, scrolledY, daysPositions, containerHeight, dayBottomMargin, dayTopOffset)
+
+  const messagesDates = useMemo(() => {
+    const messagesDates: number[] = []
+
+    for (let i = 1; i < messages.length; i++) {
+      const previousMessage = messages[i - 1]
+      const message = messages[i]
+
+      if (!isSameDay(previousMessage, message) || !messagesDates.includes(new Date(message.createdAt).getTime()))
+        messagesDates.push(new Date(message.createdAt).getTime())
+    }
+
+    return messagesDates
+  }, [messages])
+
+  const createdAtDate = useDerivedValue(() => {
+    for (let i = 0; i < daysPositionsArray.value.length; i++) {
+      const day = daysPositionsArray.value[i]
+      const dayPosition = day.y + day.height - containerHeight.value - dayBottomMargin
+
+      if (scrolledPosition.value < dayPosition)
+        return day.createdAt
+    }
+
+    return messagesDates[messagesDates.length - 1]
+  }, [daysPositionsArray, scrolledPosition, messagesDates, containerHeight, dayBottomMargin])
+
+  const style = useAnimatedStyle(() => ({
+    top: interpolate(
+      topOffset.value,
+      [-dayTopOffset, -0.0001, 0, isLoadingEarlierAnim.value ? 0 : containerHeight.value + dayTopOffset],
+      [dayTopOffset, dayTopOffset, -containerHeight.value, isLoadingEarlierAnim.value ? -containerHeight.value : dayTopOffset],
+      'clamp'
+    ),
+  }), [topOffset, containerHeight, dayTopOffset, isLoadingEarlierAnim])
+
+  const contentStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }), [opacity])
+
+  const fadeOut = useCallback(() => {
+    'worklet'
+
+    opacity.value = withTiming(0, { duration: 500 })
+  }, [opacity])
+
+  const scheduleFadeOut = useCallback(() => {
+    clearTimeout(fadeOutOpacityTimeoutId.value)
+
+    fadeOutOpacityTimeoutId.value = setTimeout(fadeOut, 500)
+  }, [fadeOut, fadeOutOpacityTimeoutId])
+
+  const handleLayout = useCallback(({ nativeEvent }: LayoutChangeEvent) => {
+    containerHeight.value = nativeEvent.layout.height
+  }, [containerHeight])
+
+  useAnimatedReaction(
+    () => [scrolledY.value, daysPositionsArray],
+    (value, prevValue) => {
+      if (!isScrolledOnMount.value) {
+        isScrolledOnMount.value = true
+        return
+      }
+
+      if (value[0] === prevValue?.[0])
+        return
+
+      opacity.value = withTiming(1, { duration: 500 })
+
+      runOnJS(scheduleFadeOut)()
+    },
+    [scrolledY, scheduleFadeOut, daysPositionsArray]
+  )
+
+  useAnimatedReaction(
+    () => createdAtDate.value,
+    (value, prevValue) => {
+      if (value && value !== prevValue)
+        runOnJS(setCreatedAt)(value)
+    },
+    [createdAtDate]
+  )
+
+  useEffect(() => {
+    isLoadingEarlierAnim.value = isLoadingEarlier
+  }, [isLoadingEarlierAnim, isLoadingEarlier])
+
+  if (!createdAt)
+    return null
+
+  return (
+    <Animated.View
+      style={[stylesCommon.centerItems, styles.dayAnimated, style]}
+      onLayout={handleLayout}
+    >
+      <Animated.View
+        style={contentStyle}
+        pointerEvents='none'
+      >
+        {
+          renderDay
+            ? renderDay({ ...rest, createdAt })
+            : <Day
+              {...rest}
+              containerStyle={[styles.dayAnimatedDayContainerStyle, rest.containerStyle]}
+              createdAt={createdAt}
+            />
+        }
+      </Animated.View>
+    </Animated.View>
+  )
+}
+
+export default DayAnimated

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

@@ -0,0 +1,12 @@
+import { StyleSheet } from 'react-native'
+
+export default StyleSheet.create({
+  dayAnimated: {
+    position: 'absolute',
+    width: '100%',
+  },
+  dayAnimatedDayContainerStyle: {
+    marginTop: 0,
+    marginBottom: 0,
+  },
+})

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

@@ -0,0 +1,12 @@
+import { DayProps } from '../../../Day'
+import { IMessage } from '../../../types'
+import { DaysPositions } from '../../types'
+
+export interface DayAnimatedProps extends Omit<DayProps, 'createdAt'> {
+  scrolledY: { value: number }
+  daysPositions: { value: DaysPositions }
+  listHeight: { value: number }
+  renderDay?: (props: DayProps) => React.ReactNode
+  messages: IMessage[]
+  isLoadingEarlier: boolean
+}