react-native-gifted-chat 2.8.2-alpha.6 → 3.0.0-alpha.0

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 { IMessage } from './Models'
 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 }>
@@ -13,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>
 }
@@ -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

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

package/src/Message/index.tsx

@@ -1,18 +1,17 @@
-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 { IMessage } from '../Models'
 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,
@@ -22,7 +21,7 @@ const Message: React.FC<MessageProps<IMessage>> = (props: MessageProps<IMessage>
     position,
     containerStyle,
     user,
-    showUserAvatar,
+    isUserAvatarVisible,
   } = props
 
   const renderBubble = useCallback(() => {
@@ -35,7 +34,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 +49,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])
@@ -60,7 +59,7 @@ const Message: React.FC<MessageProps<IMessage>> = (props: MessageProps<IMessage>
       user?._id &&
       currentMessage?.user &&
       user._id === currentMessage.user._id &&
-      !showUserAvatar
+      !isUserAvatarVisible
     )
       return null
 
@@ -80,7 +79,7 @@ const Message: React.FC<MessageProps<IMessage>> = (props: MessageProps<IMessage>
     props,
     user,
     currentMessage,
-    showUserAvatar,
+    isUserAvatarVisible,
   ])
 
   if (!currentMessage)
@@ -99,7 +98,7 @@ const Message: React.FC<MessageProps<IMessage>> = (props: MessageProps<IMessage>
             style={[
               styles[position].container,
               { marginBottom: sameUser ? 2 : 10 },
-              !props.inverted && { marginBottom: 2 },
+              !props.isInverted && { marginBottom: 2 },
               containerStyle?.[position],
             ]}
           >
@@ -111,5 +110,3 @@ const Message: React.FC<MessageProps<IMessage>> = (props: MessageProps<IMessage>
     </View>
   )
 }
-
-export default memo(Message)

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/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)
@@ -145,5 +145,3 @@ const DayAnimated = ({ scrolledY, daysPositions, listHeight, renderDay, messages
     </Animated.View>
   )
 }
-
-export default DayAnimated

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

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

package/src/MessageContainer/index.tsx

@@ -11,15 +11,14 @@ import { FlatList } from 'react-native-gesture-handler'
 import Animated, { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
 import { LoadEarlierMessages } from '../LoadEarlierMessages'
 import { warning } from '../logging'
+import { IMessage } from '../Models'
 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,29 +28,29 @@ 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,
     isTyping = false,
     renderChatEmpty: renderChatEmptyProp,
-    inverted = true,
+    isInverted = true,
     listProps,
-    extraData,
     isScrollToBottomEnabled = false,
     scrollToBottomOffset = 200,
-    alignTop = false,
+    isAlignedTop = false,
     scrollToBottomStyle,
     loadEarlierMessagesProps,
     renderTypingIndicator: renderTypingIndicatorProp,
     renderFooter: renderFooterProp,
     renderLoadEarlier: renderLoadEarlierProp,
     forwardRef,
-    handleOnScroll: handleOnScrollProp,
     scrollToBottomComponent: scrollToBottomComponentProp,
     renderDay: renderDayProp,
   } = props
 
+  const listPropsOnScrollProp = listProps?.onScroll
+
   const scrollToBottomOpacity = useSharedValue(0)
   const isScrollingDown = useSharedValue(false)
   const lastScrolledY = useSharedValue(0)
@@ -111,14 +110,14 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     isScrollingDown.value = true
     changeScrollToBottomVisibility(false)
 
-    if (inverted)
+    if (isInverted)
       scrollTo({ offset: 0, animated })
     else if (forwardRef?.current)
       forwardRef.current.scrollToEnd({ animated })
-  }, [forwardRef, inverted, scrollTo, isScrollingDown, changeScrollToBottomVisibility])
+  }, [forwardRef, isInverted, scrollTo, isScrollingDown, changeScrollToBottomVisibility])
 
   const handleOnScroll = useCallback((event: ReanimatedScrollEvent) => {
-    handleOnScrollProp?.(event)
+    listPropsOnScrollProp?.(event as any)
 
     const {
       contentOffset: { y: contentOffsetY },
@@ -127,12 +126,12 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     } = event
 
     isScrollingDown.value =
-      (inverted && lastScrolledY.value > contentOffsetY) ||
-      (!inverted && lastScrolledY.value < contentOffsetY)
+      (isInverted && lastScrolledY.value > contentOffsetY) ||
+      (!isInverted && lastScrolledY.value < contentOffsetY)
 
     lastScrolledY.value = contentOffsetY
 
-    if (inverted)
+    if (isInverted)
       if (contentOffsetY > scrollToBottomOffset!)
         changeScrollToBottomVisibility(true)
       else
@@ -144,7 +143,7 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
       changeScrollToBottomVisibility(false)
     else
       changeScrollToBottomVisibility(false)
-  }, [handleOnScrollProp, inverted, scrollToBottomOffset, changeScrollToBottomVisibility, isScrollingDown, lastScrolledY])
+  }, [isInverted, scrollToBottomOffset, changeScrollToBottomVisibility, isScrollingDown, lastScrolledY, listPropsOnScrollProp])
 
   const restProps = useMemo(() => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -170,9 +169,9 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
 
     if (messages && user) {
       const previousMessage =
-        (inverted ? messages[index + 1] : messages[index - 1]) || {}
+        (isInverted ? messages[index + 1] : messages[index - 1]) || {}
       const nextMessage =
-        (inverted ? messages[index - 1] : messages[index + 1]) || {}
+        (isInverted ? messages[index - 1] : messages[index + 1]) || {}
 
       const messageProps: ItemProps<TMessage> = {
         ...restProps,
@@ -191,7 +190,7 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     }
 
     return null
-  }, [messages, restProps, inverted, scrolledY, daysPositions, listHeight, user])
+  }, [messages, restProps, isInverted, scrolledY, daysPositions, listHeight, user])
 
   const emptyContent = useMemo(() => {
     if (!renderChatEmptyProp)
@@ -202,7 +201,7 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
 
   const renderChatEmpty = useCallback(() => {
     if (renderChatEmptyProp)
-      return inverted
+      return isInverted
         ? (
           emptyContent
         )
@@ -213,7 +212,7 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
         )
 
     return <View style={stylesCommon.fill} />
-  }, [inverted, renderChatEmptyProp, emptyContent])
+  }, [isInverted, renderChatEmptyProp, emptyContent])
 
   const ListHeaderComponent = useMemo(() => {
     const content = renderLoadEarlier()
@@ -273,7 +272,7 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     listHeight.value = event.nativeEvent.layout.height
 
     if (
-      !inverted &&
+      !isInverted &&
       messages?.length &&
       isScrollToBottomEnabled
     )
@@ -282,7 +281,7 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
       }, 500)
 
     listProps?.onLayout?.(event)
-  }, [inverted, messages, doScrollToBottom, listHeight, listProps, isScrollToBottomEnabled])
+  }, [isInverted, messages, doScrollToBottom, listHeight, listProps, isScrollToBottomEnabled])
 
   const onEndReached = useCallback(() => {
     if (
@@ -326,7 +325,7 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
         }
 
         for (const [key, item] of Object.entries(value))
-          if (isSameDay(newValue.createdAt, item.createdAt) && (inverted ? item.y <= newValue.y : item.y >= newValue.y)) {
+          if (isSameDay(newValue.createdAt, item.createdAt) && (isInverted ? item.y <= newValue.y : item.y >= newValue.y)) {
             delete value[key]
             break
           }
@@ -345,7 +344,7 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
         {children}
       </View>
     )
-  }, [daysPositions, inverted])
+  }, [daysPositions, isInverted])
 
   const scrollHandler = useAnimatedScrollHandler({
     onScroll: event => {
@@ -362,7 +361,7 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
       let shouldRemove = messageIndex === -1
 
       if (!shouldRemove) {
-        const prevMessage = messages[messageIndex + (inverted ? 1 : -1)]
+        const prevMessage = messages[messageIndex + (isInverted ? 1 : -1)]
         const message = messages[messageIndex]
         shouldRemove = !!prevMessage && isSameDay(message, prevMessage)
       }
@@ -375,36 +374,35 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
           return value
         })
     })
-  }, [messages, daysPositions, inverted])
+  }, [messages, daysPositions, isInverted])
 
   return (
     <View
       style={[
         styles.contentContainerStyle,
-        alignTop ? styles.containerAlignTop : stylesCommon.fill,
+        isAlignedTop ? styles.containerAlignTop : stylesCommon.fill,
       ]}
     >
       <AnimatedFlatList
-        extraData={extraData}
         ref={forwardRef}
         keyExtractor={keyExtractor}
         data={messages}
         renderItem={renderItem}
-        inverted={inverted}
+        inverted={isInverted}
         automaticallyAdjustContentInsets={false}
         style={stylesCommon.fill}
         ListEmptyComponent={renderChatEmpty}
         ListFooterComponent={
-          inverted ? ListHeaderComponent : ListFooterComponent
+          isInverted ? ListHeaderComponent : ListFooterComponent
         }
         ListHeaderComponent={
-          inverted ? ListFooterComponent : ListHeaderComponent
+          isInverted ? ListFooterComponent : ListHeaderComponent
         }
-        onScroll={scrollHandler}
         scrollEventThrottle={1}
         onEndReached={onEndReached}
         onEndReachedThreshold={0.1}
         {...listProps}
+        onScroll={scrollHandler}
         onLayout={onLayoutList}
         CellRendererComponent={renderCell}
       />
@@ -420,5 +418,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/MessageContainer/types.ts

@@ -6,10 +6,10 @@ import {
 } from 'react-native'
 import { FlatList } from 'react-native-gesture-handler'
 
+import { DayProps } from '../Day'
 import { LoadEarlierMessagesProps } from '../LoadEarlierMessages'
 import { MessageProps } from '../Message'
-import { ReanimatedScrollEvent } from '../reanimatedCompat'
-import { User, IMessage, Reply, DayProps } from '../types'
+import { User, IMessage, Reply } from '../Models'
 import { TypingIndicatorProps } from '../TypingIndicator/types'
 
 export type ListProps<TMessage extends IMessage = IMessage> = Partial<FlatListProps<TMessage>>
@@ -27,37 +27,33 @@ export interface MessageContainerProps<TMessage extends IMessage = IMessage>
   /** Additional props for FlatList */
   listProps?: ListProps<TMessage>
   /** Reverses display order of messages; default is true */
-  inverted?: boolean
+  isInverted?: boolean
   /** Controls whether or not the message bubbles appear at the top of the chat */
-  alignTop?: boolean
+  isAlignedTop?: boolean
   /** Enables the isScrollToBottomEnabled Component */
   isScrollToBottomEnabled?: boolean
   /** Scroll to bottom wrapper style */
   scrollToBottomStyle?: StyleProp<ViewStyle>
-  /** This can be used to pass unknown data which needs to be re-rendered */
-  extraData?: object
   /** Distance from bottom before showing scroll to bottom button */
   scrollToBottomOffset?: number
   /** Custom component to render when messages are empty */
-  renderChatEmpty?(): React.ReactNode
+  renderChatEmpty?: () => React.ReactNode
   /** Custom footer component on the ListView, e.g. 'User is typing...' */
-  renderFooter?(props: MessageContainerProps<TMessage>): React.ReactNode
+  renderFooter?: (props: MessageContainerProps<TMessage>) => React.ReactNode
   /** Custom message container */
-  renderMessage?(props: MessageProps<TMessage>): React.ReactElement
+  renderMessage?: (props: MessageProps<TMessage>) => React.ReactElement
   /** Custom day above a message */
-  renderDay?(props: DayProps): React.ReactNode
+  renderDay?: (props: DayProps) => React.ReactNode
   /** Custom "Load earlier messages" button */
-  renderLoadEarlier?(props: LoadEarlierMessagesProps): React.ReactNode
+  renderLoadEarlier?: (props: LoadEarlierMessagesProps) => React.ReactNode
   /** Custom typing indicator */
-  renderTypingIndicator?(): React.ReactNode
+  renderTypingIndicator?: () => React.ReactNode
   /** Scroll to bottom custom component */
-  scrollToBottomComponent?(): React.ReactNode
+  scrollToBottomComponent?: () => React.ReactNode
   /** Callback when quick reply is sent */
-  onQuickReply?(replies: Reply[]): void
+  onQuickReply?: (replies: Reply[]) => void
   /** Props to pass to the LoadEarlierMessages component. The LoadEarlierMessages button is only visible when isAvailable is true. Includes isAvailable (controls button visibility), isInfiniteScrollEnabled (infinite scroll up when reach the top of messages container, automatically call onPress function if it exists - not yet supported for web), onPress (callback when button is pressed), isLoading (display loading indicator), label (override default "Load earlier messages" text), and styling props (containerStyle, wrapperStyle, textStyle, activityIndicatorStyle, activityIndicatorColor, activityIndicatorSize). */
   loadEarlierMessagesProps?: LoadEarlierMessagesProps
-  /** Custom scroll event handler */
-  handleOnScroll?(event: ReanimatedScrollEvent): void
   /** Style for TypingIndicator component */
   typingIndicatorStyle?: StyleProp<ViewStyle>
 }

package/src/MessageImage.tsx

@@ -16,8 +16,8 @@ import {
 import { BaseButton, GestureHandlerRootView, Text } from 'react-native-gesture-handler'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import Zoom from 'react-native-zoom-reanimated'
+import { IMessage } from './Models'
 import commonStyles from './styles'
-import { IMessage } from './types'
 
 const styles = StyleSheet.create({
   image: {

package/src/MessageText.tsx

@@ -9,7 +9,7 @@ import {
 
 import { Match } from 'autolinker/dist/es2015'
 import Autolink, { AutolinkProps } from 'react-native-autolink'
-import { LeftRightStyle, IMessage } from './types'
+import { LeftRightStyle, IMessage } from './Models'
 
 export type MessageTextProps<TMessage extends IMessage> = {
   position?: 'left' | 'right'

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: {