ts fixes

.eslintignore

@@ -0,0 +1 @@
+/lib

example/example-slack-message/src/SlackBubble.tsx

@@ -53,7 +53,7 @@ interface Props {
     left: StyleProp<ViewStyle>
     right: StyleProp<ViewStyle>
   }
-  imageStyle: StyleProp<ViewStyle>
+  imageStyle?: StyleProp<ViewStyle>
   textStyle: StyleProp<TextStyle>
   position: 'left' | 'right'
 }
@@ -142,6 +142,7 @@ const Bubble = (props: Props) => {
 
   const renderTicks = useCallback(() => {
     const { currentMessage } = props
+
     if (props.renderTicks)
       return props.renderTicks(currentMessage)
 

example/example-slack-message/src/SlackMessage.tsx

@@ -7,17 +7,18 @@ import {
 } from 'react-native'
 
 import { Avatar, Day, utils } from 'react-native-gifted-chat'
+import type { DayProps, BubbleProps, AvatarProps, IMessage } from 'react-native-gifted-chat'
 import Bubble from './SlackBubble'
 
 const { isSameUser, isSameDay } = utils
 
 interface Props {
-  renderAvatar: () => void,
-  renderBubble: () => void,
-  renderDay: () => void,
+  renderAvatar?: (props: AvatarProps<IMessage>) => void,
+  renderBubble?: (props: BubbleProps<IMessage>) => void,
+  renderDay?: (props: DayProps) => void,
   currentMessage: any,
-  nextMessage: any,
-  previousMessage: any,
+  nextMessage?: any,
+  previousMessage?: any,
   containerStyle?: {
     left: StyleProp<ViewStyle>,
     right: StyleProp<ViewStyle>,
@@ -38,22 +39,26 @@ const Message = (props: Props) => {
       position: 'left',
       isSameUser,
       isSameDay,
+      containerStyle: props.containerStyle?.left,
     }
   }, [props])
 
   const renderDay = useCallback(() => {
     if (currentMessage.createdAt) {
       const dayProps = getInnerComponentProps()
+
       if (props.renderDay)
         return props.renderDay(dayProps)
 
       return <Day {...dayProps} />
     }
+
     return null
   }, [])
 
   const renderBubble = useCallback(() => {
     const bubbleProps = getInnerComponentProps()
+
     if (props.renderBubble)
       return props.renderBubble(bubbleProps)
 

flow-typedefs/Avatar.js.flow

@@ -7,7 +7,7 @@ import type {
 } from 'react-native/Libraries/StyleSheet/StyleSheet'
 
 export type AvatarProps<TMessage: IMessage = IMessage> = $ReadOnly<{|
-  currentMessage?: TMessage,
+  currentMessage: TMessage,
   previousMessage?: TMessage,
   nextMessage?: TMessage,
   position: 'left' | 'right',

flow-typedefs/Bubble.js.flow

@@ -36,7 +36,7 @@ export type BubbleProps<TMessage: IMessage = IMessage> = $ReadOnly<{|
   isCustomViewBottom?: boolean,
   inverted?: boolean,
   position: 'left' | 'right',
-  currentMessage?: TMessage,
+  currentMessage: TMessage,
   nextMessage?: TMessage,
   previousMessage?: TMessage,
   optionTitles?: string,

flow-typedefs/Day.js.flow

@@ -8,7 +8,7 @@ import type {
 } from 'react-native/Libraries/StyleSheet/StyleSheet'
 
 export type DayProps<TMessage: IMessage = IMessage> = $ReadOnly<{|
-  currentMessage?: TMessage,
+  currentMessage: TMessage,
   nextMessage?: TMessage,
   previousMessage?: TMessage,
   containerStyle?: ViewStyleProp,

flow-typedefs/Message.js.flow

@@ -11,7 +11,7 @@ export type MessageProps<TMessage: IMessage = IMessage> = $ReadOnly<{|
   key: React$Key,
   showUserAvatar?: boolean,
   position: 'left' | 'right',
-  currentMessage?: TMessage,
+  currentMessage: TMessage,
   nextMessage?: TMessage,
   previousMessage?: TMessage,
   user: User,

flow-typedefs/MessageAudio.js.flow

@@ -4,7 +4,7 @@ import type { IMessage } from './types'
 import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet'
 
 export type MessageAudioProps<TMessage: IMessage = IMessage> = $ReadOnly<{|
-  currentMessage?: TMessage,
+  currentMessage: TMessage,
   containerStyle?: ViewStyleProp,
   audioStyle?: ViewStyleProp,
   audioProps?: Object,

flow-typedefs/MessageImage.js.flow

@@ -8,7 +8,7 @@ import type {
 } from 'react-native/Libraries/StyleSheet/StyleSheet'
 
 export type MessageImageProps<TMessage: IMessage = IMessage> = $ReadOnly<{|
-  currentMessage?: TMessage,
+  currentMessage: TMessage,
   containerStyle?: ViewStyleProp,
   imageStyle?: ImageStyleProp,
   imageProps?: $Shape<React.ElementProps<typeof Image>>,

flow-typedefs/MessageText.js.flow

@@ -9,7 +9,7 @@ import * as React from 'react'
 
 export type MessageTextProps<TMessage: IMessage = IMessage> = $ReadOnly<{|
   position: 'left' | 'right',
-  currentMessage?: TMessage,
+  currentMessage: TMessage,
   containerStyle: LeftRightStyle<ViewStyleProp>,
   textStyle?: LeftRightStyle<TextStyleProp>,
   linkStyle?: LeftRightStyle<TextStyleProp>,

flow-typedefs/MessageVideo.js.flow

@@ -4,7 +4,7 @@ import type { IMessage } from './types'
 import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet'
 
 export type MessageVideoProps<TMessage: IMessage = IMessage> = $ReadOnly<{|
-  currentMessage?: TMessage,
+  currentMessage: TMessage,
   containerStyle?: ViewStyleProp,
   videoStyle?: ViewStyleProp,
   videoProps?: Object,

flow-typedefs/QuickReplies.js.flow

@@ -5,7 +5,7 @@ import type { ViewStyleProp, TextStyleProp } from 'react-native/Libraries/StyleS
 
 export type QuickRepliesProps<TMessage: IMessage = IMessage> = $ReadOnly<{|
   nextMessage?: TMessage,
-  currentMessage?: TMessage,
+  currentMessage: TMessage,
   color?: string,
   sendText?: string,
   quickReplyStyle?: ViewStyleProp,

flow-typedefs/SystemMessage.js.flow

@@ -7,7 +7,7 @@ import type {
 } from 'react-native/Libraries/StyleSheet/StyleSheet'
 
 export type SystemMessageProps<TMessage: IMessage = IMessage> = $ReadOnly<{|
-  currentMessage?: TMessage,
+  currentMessage: TMessage,
   containerStyle?: ViewStyleProp,
   wrapperStyle?: ViewStyleProp,
   textStyle?: TextStyleProp,

flow-typedefs/Time.js.flow

@@ -8,7 +8,7 @@ import type {
 
 export type TimeProps<TMessage: IMessage = IMessage> = $ReadOnly<{|
   position: 'left' | 'right',
-  currentMessage?: TMessage,
+  currentMessage: TMessage,
   containerStyle?: LeftRightStyle<ViewStyleProp>,
   timeTextStyle?: LeftRightStyle<TextStyleProp>,
   timeFormat?: string,

package.json

@@ -52,6 +52,7 @@
   "dependencies": {
     "@expo/react-native-action-sheet": "4.1.0",
     "@react-native-clipboard/clipboard": "^1.14.1",
+    "@types/lodash.isequal": "^4.5.8",
     "dayjs": "1.11.12",
     "lodash.isequal": "^4.5.0",
     "prop-types": "15.8.1",
@@ -61,6 +62,7 @@
     "react-native-lightbox-v2": "0.9.0",
     "react-native-parsed-text": "0.0.22",
     "react-native-reanimated": "^3.15.0",
+    "react-native-safe-area-context": "^4.10.9",
     "react-native-typing-animation": "0.1.7",
     "use-memo-one": "1.1.3",
     "uuid": "9.0.1"
@@ -98,12 +100,12 @@
     "typescript": "5.5.4"
   },
   "peerDependencies": {
+    "lodash.isequal": "*",
     "react": "*",
     "react-native": "*",
     "react-native-get-random-values": "*",
     "react-native-reanimated": "*",
-    "react-native-safe-area-context": "*",
-    "lodash.isequal": "*"
+    "react-native-safe-area-context": "*"
   },
   "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
   "engines": {

src/Avatar.tsx

@@ -43,18 +43,18 @@ const styles: { [key: string]: any } = {
 }
 
 export interface AvatarProps<TMessage extends IMessage> {
-  currentMessage?: TMessage
+  currentMessage: TMessage
   previousMessage?: TMessage
   nextMessage?: TMessage
-  position: 'left' | 'right' | string // Allow string as a fallback value
+  position: 'left' | 'right'
   renderAvatarOnTop?: boolean
   showAvatarForEveryMessage?: boolean
   imageStyle?: LeftRightStyle<ImageStyle>
   containerStyle?: LeftRightStyle<ViewStyle>
   textStyle?: TextStyle
   renderAvatar?(props: Omit<AvatarProps<TMessage>, 'renderAvatar'>): ReactNode
-  onPressAvatar?(user: User): void
-  onLongPressAvatar?(user: User): void
+  onPressAvatar?: (user: User) => void
+  onLongPressAvatar?: (user: User) => void
 }
 
 export function Avatar<TMessage extends IMessage = IMessage> (
@@ -70,7 +70,10 @@ export function Avatar<TMessage extends IMessage = IMessage> (
     previousMessage,
     nextMessage,
     imageStyle,
+    onPressAvatar,
+    onLongPressAvatar,
   } = props
+
   const messageToCompare = renderAvatarOnTop ? previousMessage : nextMessage
   const computedStyle = renderAvatarOnTop ? 'onTop' : 'onBottom'
 
@@ -123,8 +126,8 @@ export function Avatar<TMessage extends IMessage = IMessage> (
             imageStyle && imageStyle[position],
           ]}
           user={currentMessage.user}
-          onPress={() => onPressAvatar(currentMessage.user)}
-          onLongPress={() => onLongPressAvatar(currentMessage.user)}
+          onPress={() => onPressAvatar?.(currentMessage.user)}
+          onLongPress={() => onLongPressAvatar?.(currentMessage.user)}
         />
       )
 

src/Bubble.tsx

@@ -137,7 +137,7 @@ export interface BubbleProps<TMessage extends IMessage> {
   isCustomViewBottom?: boolean
   inverted?: boolean
   position: 'left' | 'right'
-  currentMessage?: TMessage
+  currentMessage: TMessage
   nextMessage?: TMessage
   previousMessage?: TMessage
   optionTitles?: string[]
@@ -268,7 +268,7 @@ export default class Bubble<
           : DEFAULT_OPTION_TITLES
       const cancelButtonIndex = options.length - 1
 
-      this.context.actionSheet().showActionSheetWithOptions(
+      ;(this.context as any).actionSheet().showActionSheetWithOptions(
         {
           options,
           cancelButtonIndex,
@@ -404,39 +404,39 @@ export default class Bubble<
   }
 
   renderMessageVideo () {
-    if (this.props.currentMessage && this.props.currentMessage.video) {
-      const {
-        /* eslint-disable @typescript-eslint/no-unused-vars */
-        containerStyle,
-        wrapperStyle,
-        /* eslint-enable @typescript-eslint/no-unused-vars */
-        ...messageVideoProps
-      } = this.props
+    if (!this.props.currentMessage?.video)
+      return null
 
-      if (this.props.renderMessageVideo)
-        return this.props.renderMessageVideo(messageVideoProps)
+    const {
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      containerStyle,
+      wrapperStyle,
+      /* eslint-enable @typescript-eslint/no-unused-vars */
+      ...messageVideoProps
+    } = this.props
 
-      return <MessageVideo {...messageVideoProps} />
-    }
-    return null
+    if (this.props.renderMessageVideo)
+      return this.props.renderMessageVideo(messageVideoProps)
+
+    return <MessageVideo />
   }
 
   renderMessageAudio () {
-    if (this.props.currentMessage && this.props.currentMessage.audio) {
-      const {
-        /* eslint-disable @typescript-eslint/no-unused-vars */
-        containerStyle,
-        wrapperStyle,
-        /* eslint-enable @typescript-eslint/no-unused-vars */
-        ...messageAudioProps
-      } = this.props
+    if (!this.props.currentMessage?.audio)
+      return null
 
-      if (this.props.renderMessageAudio)
-        return this.props.renderMessageAudio(messageAudioProps)
+    const {
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      containerStyle,
+      wrapperStyle,
+      /* eslint-enable @typescript-eslint/no-unused-vars */
+      ...messageAudioProps
+    } = this.props
 
-      return <MessageAudio {...messageAudioProps} />
-    }
-    return null
+    if (this.props.renderMessageAudio)
+      return this.props.renderMessageAudio(messageAudioProps)
+
+    return <MessageAudio />
   }
 
   renderTicks () {

src/Day.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import PropTypes from 'prop-types'
 import {
   StyleSheet,
   Text,
@@ -12,7 +11,7 @@ import {
 import dayjs from 'dayjs'
 
 import Color from './Color'
-import { StylePropType, isSameDay } from './utils'
+import { isSameDay } from './utils'
 import { DATE_FORMAT } from './Constant'
 import { IMessage } from './Models'
 
@@ -34,7 +33,7 @@ const styles = StyleSheet.create({
 })
 
 export interface DayProps<TMessage extends IMessage = IMessage> {
-  currentMessage?: TMessage
+  currentMessage: TMessage
   nextMessage?: TMessage
   previousMessage?: TMessage
   containerStyle?: StyleProp<ViewStyle>
@@ -70,14 +69,3 @@ export function Day<TMessage extends IMessage = IMessage> ({
     </View>
   )
 }
-
-Day.propTypes = {
-  currentMessage: PropTypes.object,
-  previousMessage: PropTypes.object,
-  nextMessage: PropTypes.object,
-  inverted: PropTypes.bool,
-  containerStyle: StylePropType,
-  wrapperStyle: StylePropType,
-  textStyle: StylePropType,
-  dateFormat: PropTypes.string,
-}