fix: avatar defaultProps warning

[gor3a]

Warning: Avatar: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead

closes #2498

[xuelink]

Hope it will be merged as soon as possible.

[richardhensman123]

I would be great if this could be merged 👍

[gor3a]

Until @FaridSafi merge this PR
Anyone can resolve this issue by patches

Create react-native-gifted-chat+2.4.0.patch in patches folder

diff --git a/node_modules/react-native-gifted-chat/lib/Avatar.d.ts b/node_modules/react-native-gifted-chat/lib/Avatar.d.ts
index b23f94a..d7b4b8b 100644
--- a/node_modules/react-native-gifted-chat/lib/Avatar.d.ts
+++ b/node_modules/react-native-gifted-chat/lib/Avatar.d.ts
@@ -1,12 +1,12 @@
 import PropTypes from 'prop-types';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { ImageStyle, TextStyle, ViewStyle } from 'react-native';
-import { Omit, IMessage, User, LeftRightStyle } from './Models';
+import { IMessage, LeftRightStyle, User } from './Models';
 export interface AvatarProps<TMessage extends IMessage> {
     currentMessage?: TMessage;
     previousMessage?: TMessage;
     nextMessage?: TMessage;
-    position: 'left' | 'right';
+    position: 'left' | 'right' | string;
     renderAvatarOnTop?: boolean;
     showAvatarForEveryMessage?: boolean;
     imageStyle?: LeftRightStyle<ImageStyle>;
@@ -16,22 +16,24 @@ export interface AvatarProps<TMessage extends IMessage> {
     onPressAvatar?(user: User): void;
     onLongPressAvatar?(user: User): void;
 }
-export declare function Avatar<TMessage extends IMessage = IMessage>(props: AvatarProps<TMessage>): JSX.Element | null;
+export declare function Avatar({ renderAvatarOnTop, showAvatarForEveryMessage, containerStyle, position, currentMessage, previousMessage, nextMessage, renderAvatar, imageStyle, onPressAvatar, onLongPressAvatar, }: {
+    renderAvatarOnTop?: boolean | undefined;
+    showAvatarForEveryMessage?: boolean | undefined;
+    containerStyle?: {
+        [key: string]: any;
+    } | undefined;
+    position?: string | undefined;
+    currentMessage?: IMessage | undefined;
+    previousMessage?: IMessage | undefined;
+    nextMessage?: IMessage | undefined;
+    renderAvatar?: ((props: Omit<AvatarProps<IMessage>, "renderAvatar">) => React.ReactNode) | undefined;
+    imageStyle?: {
+        [key: string]: any;
+    } | undefined;
+    onPressAvatar?: (({}: {}) => void) | undefined;
+    onLongPressAvatar?: (({}: {}) => void) | undefined;
+}): JSX.Element | null;
 export declare namespace Avatar {
-    var defaultProps: {
-        renderAvatarOnTop: boolean;
-        showAvatarForEveryMessage: boolean;
-        position: string;
-        currentMessage: {
-            user: null;
-        };
-        previousMessage: {};
-        nextMessage: {};
-        containerStyle: {};
-        imageStyle: {};
-        onPressAvatar: () => void;
-        onLongPressAvatar: () => void;
-    };
     var propTypes: {
         renderAvatarOnTop: PropTypes.Requireable<boolean>;
         showAvatarForEveryMessage: PropTypes.Requireable<boolean>;
diff --git a/node_modules/react-native-gifted-chat/lib/Avatar.js b/node_modules/react-native-gifted-chat/lib/Avatar.js
index 70ce1d7..974f232 100644
--- a/node_modules/react-native-gifted-chat/lib/Avatar.js
+++ b/node_modules/react-native-gifted-chat/lib/Avatar.js
@@ -33,63 +33,58 @@ const styles = {
         },
     }),
 };
-export function Avatar(props) {
-    const { renderAvatarOnTop, showAvatarForEveryMessage, containerStyle, position, currentMessage, renderAvatar, previousMessage, nextMessage, imageStyle, } = props;
+export function Avatar({ renderAvatarOnTop = false, showAvatarForEveryMessage = false, containerStyle = {}, position = 'left', currentMessage = {}, previousMessage = {}, nextMessage = {}, renderAvatar = (({}) => null), imageStyle = {}, onPressAvatar = ({}) => { }, onLongPressAvatar = ({}) => { }, }) {
     const messageToCompare = renderAvatarOnTop ? previousMessage : nextMessage;
     const computedStyle = renderAvatarOnTop ? 'onTop' : 'onBottom';
     if (renderAvatar === null) {
         return null;
     }
     if (!showAvatarForEveryMessage &&
-        currentMessage &&
-        messageToCompare &&
-        isSameUser(currentMessage, messageToCompare) &&
-        isSameDay(currentMessage, messageToCompare)) {
+      currentMessage &&
+      messageToCompare &&
+      isSameUser(currentMessage, messageToCompare) &&
+      isSameDay(currentMessage, messageToCompare)) {
         return (<View style={[
-                styles[position].container,
-                containerStyle && containerStyle[position],
-            ]}>
-        <GiftedAvatar avatarStyle={[
+            styles[position].container,
+            containerStyle && containerStyle[position],
+        ]}>
+            <GiftedAvatar avatarStyle={[
                 styles[position].image,
                 imageStyle && imageStyle[position],
             ]}/>
-      </View>);
+        </View>);
     }
     const renderAvatarComponent = () => {
-        if (props.renderAvatar) {
-            const { renderAvatar, ...avatarProps } = props;
-            return props.renderAvatar(avatarProps);
+        if (renderAvatar) {
+            return renderAvatar({
+                renderAvatarOnTop,
+                showAvatarForEveryMessage,
+                containerStyle,
+                position,
+                currentMessage,
+                previousMessage,
+                nextMessage,
+                imageStyle,
+                onPressAvatar,
+                onLongPressAvatar,
+            });
         }
-        if (props.currentMessage) {
+        if (currentMessage) {
             return (<GiftedAvatar avatarStyle={[
-                    styles[props.position].image,
-                    props.imageStyle && props.imageStyle[props.position],
-                ]} user={props.currentMessage.user} onPress={() => { var _a; return (_a = props.onPressAvatar) === null || _a === void 0 ? void 0 : _a.call(props, props.currentMessage.user); }} onLongPress={() => { var _a; return (_a = props.onLongPressAvatar) === null || _a === void 0 ? void 0 : _a.call(props, props.currentMessage.user); }}/>);
+                styles[position].image,
+                imageStyle && imageStyle[position],
+            ]} user={currentMessage.user} onPress={() => onPressAvatar(currentMessage.user)} onLongPress={() => onLongPressAvatar(currentMessage.user)}/>);
         }
         return null;
     };
     return (<View style={[
-            styles[position].container,
-            styles[position][computedStyle],
-            containerStyle && containerStyle[position],
-        ]}>
-      {renderAvatarComponent()}
+        styles[position].container,
+        styles[position][computedStyle],
+        containerStyle && containerStyle[position],
+    ]}>
+        {renderAvatarComponent()}
     </View>);
 }
-Avatar.defaultProps = {
-    renderAvatarOnTop: false,
-    showAvatarForEveryMessage: false,
-    position: 'left',
-    currentMessage: {
-        user: null,
-    },
-    previousMessage: {},
-    nextMessage: {},
-    containerStyle: {},
-    imageStyle: {},
-    onPressAvatar: () => { },
-    onLongPressAvatar: () => { },
-};
 Avatar.propTypes = {
     renderAvatarOnTop: PropTypes.bool,
     showAvatarForEveryMessage: PropTypes.bool,

[Hatko]

@FaridSafi Could we get this PR in?

[jameswagoner]

@FaridSafi bump

[kesha-antonov]

Hi everyone
I think we should move from proptypes, defaultprops, flow to typescript only