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

package/src/GiftedChat/types.ts

@@ -8,26 +8,26 @@ import {
 import {
   ActionSheetOptions,
 } from '@expo/react-native-action-sheet'
+import { KeyboardProvider, KeyboardAvoidingViewProps } from 'react-native-keyboard-controller'
 import { ActionsProps } from '../Actions'
 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 +35,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 */
@@ -51,26 +51,20 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   dateFormat?: string
   /* Format to use for rendering relative times; Today - for now. See more: https://day.js.org/docs/en/plugin/calendar */
   dateFormatCalendar?: object
-  /* 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
   /* 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 +80,67 @@ 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
+  keyboardProviderProps?: React.ComponentProps<typeof KeyboardProvider>
+  keyboardAvoidingViewProps?: KeyboardAvoidingViewProps
 }

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

package/src/MessageContainer/index.tsx

@@ -11,10 +11,9 @@ 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 { isSameDay, useCallbackThrottled } from '../utils'
 import { DayAnimated } from './components/DayAnimated'
@@ -35,23 +34,23 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
     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 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
     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 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
     } = 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 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
       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 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
 
     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 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
     }
 
     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 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
 
   const renderChatEmpty = useCallback(() => {
     if (renderChatEmptyProp)
-      return inverted
+      return isInverted
         ? (
           emptyContent
         )
@@ -213,7 +212,7 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
         )
 
     return <View style={stylesCommon.fill} />
-  }, [inverted, renderChatEmptyProp, emptyContent])
+  }, [isInverted, renderChatEmptyProp, emptyContent])
 
   const ListHeaderComponent = useMemo(() => {
     const content = renderLoadEarlier()
@@ -273,7 +272,7 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
     listHeight.value = event.nativeEvent.layout.height
 
     if (
-      !inverted &&
+      !isInverted &&
       messages?.length &&
       isScrollToBottomEnabled
     )
@@ -282,7 +281,7 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
       }, 500)
 
     listProps?.onLayout?.(event)
-  }, [inverted, messages, doScrollToBottom, listHeight, listProps, isScrollToBottomEnabled])
+  }, [isInverted, messages, doScrollToBottom, listHeight, listProps, isScrollToBottomEnabled])
 
   const onEndReached = useCallback(() => {
     if (
@@ -326,7 +325,7 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
         }
 
         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 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
         {children}
       </View>
     )
-  }, [daysPositions, inverted])
+  }, [daysPositions, isInverted])
 
   const scrollHandler = useAnimatedScrollHandler({
     onScroll: event => {
@@ -362,7 +361,7 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
       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,37 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
           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}
+        keyboardDismissMode='interactive'
+        keyboardShouldPersistTaps='handled'
         {...listProps}
+        onScroll={scrollHandler}
         onLayout={onLayoutList}
         CellRendererComponent={renderCell}
       />

package/src/MessageContainer/styles.ts

@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native'
+import { Platform, StyleSheet } from 'react-native'
 import { Color } from '../Color'
 
 export default StyleSheet.create({
@@ -24,9 +24,16 @@ export default StyleSheet.create({
     width: 40,
     borderRadius: 20,
     backgroundColor: Color.white,
-    shadowColor: Color.black,
-    shadowOpacity: 0.5,
-    shadowOffset: { width: 0, height: 0 },
-    shadowRadius: 1,
+    ...Platform.select({
+      ios: {
+        shadowColor: Color.black,
+        shadowOpacity: 0.5,
+        shadowOffset: { width: 0, height: 0 },
+        shadowRadius: 1,
+      },
+      android: {
+        elevation: 5,
+      },
+    }),
   },
 })

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>
 }