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

package/README.md

@@ -1,5 +1,5 @@
-<p align="center" >
-<p align="center" >
+<p align="center">
+<p align="center">
    <a href="https://reactnative.gallery/FaridSafi/gifted-chat">
     <img alt="react-native-gifted-chat" src="https://thumbs.gfycat.com/AbsoluteSadDobermanpinscher-size_restricted.gif" width="260" height="510" />
  </a>
@@ -382,44 +382,44 @@ interface QuickReplies {
   - `activityIndicatorStyle` - Custom style for the loading indicator
   - `activityIndicatorColor` - Color of the loading indicator (default: 'white')
   - `activityIndicatorSize` - Size of the loading indicator (default: 'small')
-- **`renderLoading`** _(Function)_ - Render a loading view when initializing
-- **`renderLoadEarlier`** _(Function)_ - Custom "Load earlier messages" button
-- **`renderAvatar`** _(Function)_ - Custom message avatar; set to `null` to not render any avatar for the message
+- **`renderLoading`** _(Component | Function)_ - Render a loading view when initializing
+- **`renderLoadEarlier`** _(Component | Function)_ - Custom "Load earlier messages" button
+- **`renderAvatar`** _(Component | Function)_ - Custom message avatar; set to `null` to not render any avatar for the message
 - **`showUserAvatar`** _(Bool)_ - Whether to render an avatar for the current user; default is `false`, only show avatars for other users
 - **`showAvatarForEveryMessage`** _(Bool)_ - When false, avatars will only be displayed when a consecutive message is from the same user on the same day; default is `false`
 - **`onPressAvatar`** _(Function(`user`))_ - Callback when a message avatar is tapped
 - **`onLongPressAvatar`** _(Function(`user`))_ - Callback when a message avatar is long-pressed
 - **`renderAvatarOnTop`** _(Bool)_ - Render the message avatar at the top of consecutive messages, rather than the bottom; default is `false`
-- **`renderBubble`** _(Function)_ - Custom message bubble
-- **`renderTicks`** _(Function(`message`))_ - Custom ticks indicator to display message status
-- **`renderSystemMessage`** _(Function)_ - Custom system message
+- **`renderBubble`** _(Component | Function)_ - Custom message bubble
+- **`renderTicks`** _(Component | Function(`message`))_ - Custom ticks indicator to display message status
+- **`renderSystemMessage`** _(Component | Function)_ - Custom system message
 - **`onPressMessage`** _(Function(`context`, `message`))_ - Callback when a message bubble is pressed
 - **`onLongPressMessage`** _(Function(`context`, `message`))_ - Callback when a message bubble is long-pressed (see [example using `showActionSheetWithOptions()`](https://github.com/FaridSafi/react-native-gifted-chat/blob/master@%7B2017-09-25%7D/src/Bubble.js#L96-L119))
 - **`inverted`** _(Bool)_ - Reverses display order of `messages`; default is `true`
 - **`renderUsernameOnMessage`** _(Bool)_ - Indicate whether to show the user's username inside the message bubble; default is `false`
-- **`renderUsername`** _(Function)_ - Custom Username container
-- **`renderMessage`** _(Function)_ - Custom message container
-- **`renderMessageText`** _(Function)_ - Custom message text
-- **`renderMessageImage`** _(Function)_ - Custom message image
-- **`renderMessageVideo`** _(Function)_ - Custom message video
-- **`renderMessageAudio`** _(Function)_ - Custom message audio
+- **`renderUsername`** _(Component | Function)_ - Custom Username container
+- **`renderMessage`** _(Component | Function)_ - Custom message container
+- **`renderMessageText`** _(Component | Function)_ - Custom message text
+- **`renderMessageImage`** _(Component | Function)_ - Custom message image
+- **`renderMessageVideo`** _(Component | Function)_ - Custom message video
+- **`renderMessageAudio`** _(Component | Function)_ - Custom message audio
 - **`imageProps`** _(Object)_ - Extra props to be passed to the [`<Image>`](https://reactnative.dev/docs/image.html) component created by the default `renderMessageImage`
 - **`imageStyle`** _(Object)_ - Custom style for message images
 - **`videoProps`** _(Object)_ - Extra props to be passed to the video component created by the required `renderMessageVideo`
 - **`isCustomViewBottom`** _(Bool)_ - Determine whether renderCustomView is displayed before or after the text, image and video views; default is `false`
-- **`renderCustomView`** _(Function)_ - Custom view inside the bubble
-- **`renderDay`** _(Function)_ - Custom day above a message
-- **`renderTime`** _(Function)_ - Custom time inside a message
+- **`renderCustomView`** _(Component | Function)_ - Custom view inside the bubble
+- **`renderDay`** _(Component | Function)_ - Custom day above a message
+- **`renderTime`** _(Component | Function)_ - Custom time inside a message
 - **`timeTextStyle`** _(Object)_ - Custom text style for time inside messages (supports left/right styles)
-- **`renderFooter`** _(Function)_ - Custom footer component on the ListView, e.g. `'User is typing...'`; see [App.tsx](/example/App.tsx) for an example. Overrides default typing indicator that triggers when `isTyping` is true.
-- **`renderTypingIndicator`** _(Function)_ - Custom typing indicator component
-- **`renderChatEmpty`** _(Function)_ - Custom component to render in the ListView when messages are empty
-- **`renderChatFooter`** _(Function)_ - Custom component to render below the MessageContainer (separate from the ListView)
-- **`renderInputToolbar`** _(Function)_ - Custom message composer container
-- **`renderComposer`** _(Function)_ - Custom text input message composer
-- **`renderActions`** _(Function)_ - Custom action button on the left of the message composer
-- **`renderSend`** _(Function)_ - Custom send button; you can pass children to the original `Send` component quite easily, for example, to use a custom icon ([example](https://github.com/FaridSafi/react-native-gifted-chat/pull/487))
-- **`renderAccessory`** _(Function)_ - Custom second line of actions below the message composer
+- **`renderFooter`** _(Component | Function)_ - Custom footer component on the ListView, e.g. `'User is typing...'`; see [App.tsx](/example/App.tsx) for an example. Overrides default typing indicator that triggers when `isTyping` is true.
+- **`renderTypingIndicator`** _(Component | Function)_ - Custom typing indicator component
+- **`renderChatEmpty`** _(Component | Function)_ - Custom component to render in the ListView when messages are empty
+- **`renderChatFooter`** _(Component | Function)_ - Custom component to render below the MessageContainer (separate from the ListView)
+- **`renderInputToolbar`** _(Component | Function)_ - Custom message composer container
+- **`renderComposer`** _(Component | Function)_ - Custom text input message composer
+- **`renderActions`** _(Component | Function)_ - Custom action button on the left of the message composer
+- **`renderSend`** _(Component | Function)_ - Custom send button; you can pass children to the original `Send` component quite easily, for example, to use a custom icon ([example](https://github.com/FaridSafi/react-native-gifted-chat/pull/487))
+- **`renderAccessory`** _(Component | Function)_ - Custom second line of actions below the message composer
 - **`onPressActionButton`** _(Function)_ - Callback when the Action button is pressed (if set, the default `actionSheet` will not be used)
 - **`actionSheet`** _(Function)_ - Custom action sheet interface for showing action options
 - **`actions`** _(Array)_ - Custom action options for the input toolbar action button; array of objects with `title` (string) and `action` (function) properties

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-chat",
-  "version": "2.8.2-alpha.6",
+  "version": "2.9.0-alpha.0",
   "description": "The most complete chat UI for React Native",
   "keywords": [
     "android",
@@ -80,6 +80,7 @@
     "@typescript-eslint/parser": "^8.46.4",
     "babel-jest": "^29.7.0",
     "eslint": "^9.18.0",
+    "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jest": "^28.11.0",
     "eslint-plugin-perfectionist": "^4.15.1",

package/src/Actions.tsx

@@ -7,7 +7,7 @@ import {
   ViewStyle,
   TextStyle,
 } from 'react-native'
-import Color from './Color'
+import { Color } from './Color'
 import { TouchableOpacity } from './components/TouchableOpacity'
 import { useChatContext } from './GiftedChatContext'
 

package/src/Bubble/index.tsx

@@ -15,14 +15,14 @@ import stylesCommon from '../styles'
 
 import { Time } from '../Time'
 import { IMessage } from '../types'
-import { isSameUser, isSameDay } from '../utils'
+import { isSameUser, isSameDay, renderComponentOrElement } from '../utils'
 
 import styles from './styles'
 import { BubbleProps, RenderMessageTextProps } from './types'
 
 export * from './types'
 
-const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessage>): JSX.Element => {
+export const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessage>): JSX.Element => {
   const {
     currentMessage,
     nextMessage,
@@ -109,7 +109,7 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
       } = props
 
       if (props.renderQuickReplies)
-        return props.renderQuickReplies(quickReplyProps)
+        return renderComponentOrElement(props.renderQuickReplies, quickReplyProps)
 
       return (
         <QuickReplies
@@ -150,9 +150,9 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
       const combinedProps = { ...messageTextPropsRest, ...messageTextProps } as RenderMessageTextProps<TMessage>
 
       if (props.renderMessageText)
-        return props.renderMessageText(combinedProps)
+        return renderComponentOrElement(props.renderMessageText, combinedProps)
 
-      return <MessageText {...combinedProps} />
+      return <MessageText {...combinedProps as any} />
     }
 
     return null
@@ -169,7 +169,7 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
       } = props
 
       if (props.renderMessageImage)
-        return props.renderMessageImage(messageImageProps)
+        return renderComponentOrElement(props.renderMessageImage, messageImageProps)
 
       return <MessageImage {...messageImageProps} />
     }
@@ -190,7 +190,7 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
     } = props
 
     if (props.renderMessageVideo)
-      return props.renderMessageVideo(messageVideoProps)
+      return renderComponentOrElement(props.renderMessageVideo, messageVideoProps)
 
     return <MessageVideo />
   }, [props, currentMessage])
@@ -208,7 +208,7 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
     } = props
 
     if (props.renderMessageAudio)
-      return props.renderMessageAudio(messageAudioProps)
+      return renderComponentOrElement(props.renderMessageAudio, messageAudioProps)
 
     return <MessageAudio />
   }, [props, currentMessage])
@@ -220,7 +220,7 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
     } = props
 
     if (renderTicks && currentMessage)
-      return renderTicks(currentMessage)
+      return renderComponentOrElement(renderTicks, currentMessage)
 
     if (
       user &&
@@ -271,7 +271,7 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
       } = props
 
       if (props.renderTime)
-        return props.renderTime(timeProps)
+        return renderComponentOrElement(props.renderTime, timeProps)
 
       return <Time {...timeProps} />
     }
@@ -289,7 +289,7 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
         return null
 
       if (renderUsername)
-        return renderUsername(currentMessage.user)
+        return renderComponentOrElement(renderUsername, currentMessage.user)
 
       return (
         <View style={styles.content.usernameView}>
@@ -313,7 +313,7 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
 
   const renderCustomView = useCallback(() => {
     if (props.renderCustomView)
-      return props.renderCustomView(props)
+      return renderComponentOrElement(props.renderCustomView, props)
 
     return null
   }, [props])
@@ -378,5 +378,3 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
     </View>
   )
 }
-
-export default Bubble

package/src/Bubble/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native'
-import Color from '../Color'
+import { Color } from '../Color'
 
 const styles = {
   left: StyleSheet.create({

package/src/Bubble/types.ts

@@ -5,7 +5,7 @@ import {
   TextStyle,
 } from 'react-native'
 import { MessageImageProps } from '../MessageImage'
-import { MessageTextProps, MessageOption } from '../MessageText'
+import { MessageTextProps } from '../MessageText'
 import { QuickRepliesProps } from '../QuickReplies'
 import { TimeProps } from '../Time'
 import {
@@ -18,7 +18,7 @@ import {
   MessageAudioProps,
 } from '../types'
 
- 
+
 export type RenderMessageImageProps<TMessage extends IMessage> = Omit<
   BubbleProps<TMessage>,
   'containerStyle' | 'wrapperStyle'
@@ -39,10 +39,10 @@ export type RenderMessageAudioProps<TMessage extends IMessage> = Omit<
 
 export type RenderMessageTextProps<TMessage extends IMessage> = Omit<
   BubbleProps<TMessage>,
-  'containerStyle' | 'wrapperStyle' | 'options'
+  'containerStyle' | 'wrapperStyle'
 > &
   MessageTextProps<TMessage>
- 
+
 
 export interface BubbleProps<TMessage extends IMessage> {
   user?: User
@@ -54,7 +54,6 @@ export interface BubbleProps<TMessage extends IMessage> {
   currentMessage: TMessage
   nextMessage?: TMessage
   previousMessage?: TMessage
-  options?: MessageOption[]
   containerStyle?: LeftRightStyle<ViewStyle>
   wrapperStyle?: LeftRightStyle<ViewStyle>
   textStyle?: LeftRightStyle<TextStyle>

package/src/Color.ts

@@ -1,4 +1,4 @@
-export default {
+export const Color = {
   defaultColor: '#b2b2b2',
   backgroundTransparent: 'transparent',
   defaultBlue: '#0084ff',

package/src/Composer.tsx

@@ -8,7 +8,7 @@ import {
   TextInputContentSizeChangeEventData,
   useColorScheme,
 } from 'react-native'
-import Color from './Color'
+import { Color } from './Color'
 import { MIN_COMPOSER_HEIGHT } from './Constant'
 import stylesCommon from './styles'
 

package/src/Day/styles.ts

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

package/src/GiftedAvatar.tsx

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

package/src/GiftedChat/index.tsx

@@ -28,29 +28,15 @@ import Animated, {
   runOnJS,
 } from 'react-native-reanimated'
 import { SafeAreaProvider } from 'react-native-safe-area-context'
-import { Actions } from '../Actions'
-import { Avatar } from '../Avatar'
-import Bubble from '../Bubble'
-import { Composer } from '../Composer'
 import { MAX_COMPOSER_HEIGHT, MIN_COMPOSER_HEIGHT, TEST_ID } from '../Constant'
-import { Day } from '../Day'
-import { GiftedAvatar } from '../GiftedAvatar'
 import { GiftedChatContext } from '../GiftedChatContext'
 import { InputToolbar } from '../InputToolbar'
-import { LoadEarlierMessages } from '../LoadEarlierMessages'
-import Message from '../Message'
-import MessageContainer, { AnimatedList } from '../MessageContainer'
-import { MessageImage } from '../MessageImage'
-import { MessageText } from '../MessageText'
-import { Send } from '../Send'
+import { MessageContainer, AnimatedList } from '../MessageContainer'
 import stylesCommon from '../styles'
-import { SystemMessage } from '../SystemMessage'
-import { Time } from '../Time'
-
 import {
   IMessage,
 } from '../types'
-import * as utils from '../utils'
+import { renderComponentOrElement } from '../utils'
 import styles from './styles'
 import { GiftedChatProps } from './types'
 
@@ -200,7 +186,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
           forwardRef={messageContainerRef}
           isTyping={isTyping}
         />
-        {renderChatFooter?.()}
+        {renderComponentOrElement(renderChatFooter, {})}
       </View>
     )
   }, [
@@ -315,7 +301,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     }
 
     if (renderInputToolbar)
-      return renderInputToolbar(inputToolbarProps)
+      return renderComponentOrElement(renderInputToolbar, inputToolbarProps)
 
     return <InputToolbar {...inputToolbarProps} />
   }, [
@@ -406,7 +392,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
               </Animated.View>
             )
             : (
-              renderLoading?.()
+              renderComponentOrElement(renderLoading, {})
             )}
         </View>
       </ActionSheetProvider>
@@ -452,24 +438,6 @@ GiftedChatWrapper.prepend = <TMessage extends IMessage>(
     : messages.concat(currentMessages)
 }
 
-export * from '../types'
-
 export {
-  GiftedChatWrapper as GiftedChat,
-  Actions,
-  Avatar,
-  Bubble,
-  SystemMessage,
-  MessageImage,
-  MessageText,
-  Composer,
-  Day,
-  InputToolbar,
-  LoadEarlierMessages,
-  Message,
-  MessageContainer,
-  Send,
-  Time,
-  GiftedAvatar,
-  utils
+  GiftedChatWrapper as GiftedChat
 }

package/src/GiftedChat/types.ts

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

package/src/InputToolbar.tsx

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

package/src/LoadEarlierMessages.tsx

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

package/src/MessageAudio.tsx

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

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

@@ -11,7 +11,7 @@ import { DayAnimatedProps } from './types'
 
 export * from './types'
 
-const DayAnimated = ({ scrolledY, daysPositions, listHeight, renderDay, messages, isLoading, ...rest }: DayAnimatedProps) => {
+export const DayAnimated = ({ scrolledY, daysPositions, listHeight, renderDay, messages, isLoading, ...rest }: DayAnimatedProps) => {
   const opacity = useSharedValue(0)
   const fadeOutOpacityTimeoutId = useSharedValue<ReturnType<typeof setTimeout> | undefined>(undefined)
   const containerHeight = useSharedValue(0)
@@ -145,5 +145,3 @@ const DayAnimated = ({ scrolledY, daysPositions, listHeight, renderDay, messages
     </Animated.View>
   )
 }
-
-export default DayAnimated

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

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

package/src/MessageContainer/index.tsx

@@ -15,11 +15,11 @@ import { ReanimatedScrollEvent } from '../reanimatedCompat'
 
 import stylesCommon from '../styles'
 import { IMessage } from '../types'
-import TypingIndicator from '../TypingIndicator'
+import { TypingIndicator } from '../TypingIndicator'
 import { isSameDay, useCallbackThrottled } from '../utils'
-import DayAnimated from './components/DayAnimated'
+import { DayAnimated } from './components/DayAnimated'
 
-import Item from './components/Item'
+import { Item } from './components/Item'
 import { ItemProps } from './components/Item/types'
 import styles from './styles'
 import { MessageContainerProps, DaysPositions } from './types'
@@ -29,7 +29,7 @@ export * from './types'
 
 const AnimatedFlatList = Animated.createAnimatedComponent(FlatList) as React.ComponentType<any>
 
-function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageContainerProps<TMessage>) {
+export const MessageContainer = <TMessage extends IMessage>(props: MessageContainerProps<TMessage>) => {
   const {
     messages = [],
     user,
@@ -420,5 +420,3 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     </View>
   )
 }
-
-export default MessageContainer

package/src/MessageContainer/styles.ts

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