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

Casper321 · 2024-05-08T12:20:23Z

Issue Description

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

Warning: Avatar: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
    in Avatar (created by Message)
    in RCTView (created by View)
    in View (created by Message)
    in RCTView (created by View)
    in View (created by Message)
    in Message (created by CellRenderer)
    in RCTView (created by View)
    in View (created by CellRenderer)
    in VirtualizedListCellContextProvider (created by CellRenderer)
    in CellRenderer (created by VirtualizedList)
    in RCTScrollContentView (created by ScrollView)
    in RCTScrollView (created by ScrollView)
    in ScrollView (created by ScrollView)
    in ScrollView (created by VirtualizedList)
    in VirtualizedListContextProvider (created by VirtualizedList)
    in VirtualizedList (created by FlatList)
    in FlatList (created by MessageContainer)
    in RCTView (created by View)
    in View (created by MessageContainer)
    in MessageContainer (created by GiftedChat)
    in RCTView (created by View)
    in View (created by GiftedChat)
    in RCTView (created by View)
    in View (created by KeyboardAvoidingView)
    in KeyboardAvoidingView (created by GiftedChat)
    in RCTView (created by View)
    in View (created by GiftedChat)
    in RCTView (created by View)
    in View (created by ActionSheet)
    in ActionSheet
    in ActionSheetProvider (created by GiftedChat)
    in RCTView (created by View)
    in View (created by GiftedChat)
    in GiftedChat (created by Chat)
    in RCTView (created by View)
    in View (created by emotion(View))
    in emotion(View) (created by Chat)
    in RCTView (created by View)
    in View (created by Chat)
    in Chat (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by BottomTabView)
    in RCTView (created by View)
    in View (created by Screen)
    in RCTView (created by View)
    in View (created by Background)
    in Background (created by Screen)
    in Screen (created by BottomTabView)
    in RNSScreen (created by Animated(Anonymous))
    in Animated(Anonymous) (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by MaybeScreen)
    in MaybeScreen (created by BottomTabView)
    in RNSScreenNavigationContainer (created by ScreenContainer)
    in ScreenContainer (created by MaybeScreenContainer)
    in MaybeScreenContainer (created by BottomTabView)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaProviderCompat)
    in SafeAreaProviderCompat (created by BottomTabView)
    in BottomTabView (created by BottomTabNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by BottomTabNavigator)
    in BottomTabNavigator (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in ConversationProvider (created by App)
    in QueryClientProvider (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)

Steps to Reproduce / Code Snippets

"dependencies": {
    "@emotion/native": "^11.11.0",
    "@emotion/react": "^11.11.4",
    "@expo/vector-icons": "^14.0.1",
    "expo": "^51.0.0",
    "expo-auth-session": "^5.5.2",
    "expo-status-bar": "^1.12.1",
    "react": "18.2.0",
    "react-native": "^0.74.1",
    "react-native-gesture-handler": "^2.16.2",
    "react-native-gifted-chat": "^2.4.0",
    "react-native-safe-area-context": "^4.10.1",
    "react-native-screens": "^3.31.1",
    "react-native-toast-message": "^2.2.0",
    "ts-node": "^10.9.2",
     ...
  },

Expected Results

No warning

Additional Information

Nodejs version: v20.10.0
React version: 18.2.0
React Native version: 0.74.1
react-native-gifted-chat version: 2.4.0
Platform(s) (iOS, Android, or both?): iOS (not sure about Android)
TypeScript version: 5.1.3

Happy to help implementing the fix if you agree and point me in the right direction.

The text was updated successfully, but these errors were encountered:

cool3rain · 2024-05-10T22:05:55Z

temporary solution

const error = console.error; console.error = (...args) => { if (/defaultProps/.test(args[0])) return; error(...args); };

jonathan200934 · 2024-05-12T06:51:51Z

Same error here after upgrading to expo sdk 51

jkronk · 2024-05-14T20:52:25Z

Also getting this one in expo sdk 51. @cool3rain fix works when put in the root _layout.tsx. Just keeping a log going of all the suppressed warnings

hellohejinyu · 2024-05-24T14:42:12Z

react-native-gifted-chat/src/Avatar.tsx

Lines 147 to 160 in ba06287

    
           Avatar.defaultProps = { 
        
             renderAvatarOnTop: false, 
        
             showAvatarForEveryMessage: false, 
        
             position: 'left', 
        
             currentMessage: { 
        
               user: null, 
        
             }, 
        
             previousMessage: {}, 
        
             nextMessage: {}, 
        
             containerStyle: {}, 
        
             imageStyle: {}, 
        
             onPressAvatar: () => {}, 
        
             onLongPressAvatar: () => {}, 
        
           }

The problem lies here, but I haven't seen this library for several months, so I suggest that it is better to fork it and maintain it locally.

HasanGokce · 2024-05-27T02:18:48Z

Temporary solution

node_modules/react-native-gifted-chat/lib/Avatar.js

import PropTypes from 'prop-types';
import React from 'react';
import { StyleSheet, View } from 'react-native';
import GiftedAvatar from './GiftedAvatar';
import { StylePropType, isSameUser, isSameDay } from './utils';

const styles = {
    left: StyleSheet.create({
        container: {
            marginRight: 8,
        },
        onTop: {
            alignSelf: 'flex-start',
        },
        onBottom: {},
        image: {
            height: 36,
            width: 36,
            borderRadius: 18,
        },
    }),
    right: StyleSheet.create({
        container: {
            marginLeft: 8,
        },
        onTop: {
            alignSelf: 'flex-start',
        },
        onBottom: {},
        image: {
            height: 36,
            width: 36,
            borderRadius: 18,
        },
    }),
};

export function Avatar({
    renderAvatarOnTop = false,
    showAvatarForEveryMessage = false,
    containerStyle = {},
    position = 'left',
    currentMessage = { user: null },
    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)) {
        return (
            <View style={[
                styles[position].container,
                containerStyle && containerStyle[position],
            ]}>
                <GiftedAvatar avatarStyle={[
                    styles[position].image,
                    imageStyle && imageStyle[position],
                ]}/>
            </View>
        );
    }

    const renderAvatarComponent = () => {
        if (renderAvatar) {
            return renderAvatar({
                renderAvatarOnTop,
                showAvatarForEveryMessage,
                containerStyle,
                position,
                currentMessage,
                previousMessage,
                nextMessage,
                imageStyle,
                onPressAvatar,
                onLongPressAvatar
            });
        }
        if (currentMessage) {
            return (
                <GiftedAvatar
                    avatarStyle={[
                        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()}
        </View>
    );
}

Avatar.propTypes = {
    renderAvatarOnTop: PropTypes.bool,
    showAvatarForEveryMessage: PropTypes.bool,
    position: PropTypes.oneOf(['left', 'right']),
    currentMessage: PropTypes.object,
    previousMessage: PropTypes.object,
    nextMessage: PropTypes.object,
    onPressAvatar: PropTypes.func,
    onLongPressAvatar: PropTypes.func,
    renderAvatar: PropTypes.func,
    containerStyle: PropTypes.shape({
        left: StylePropType,
        right: StylePropType,
    }),
    imageStyle: PropTypes.shape({
        left: StylePropType,
        right: StylePropType,
    }),
};

nizngulifa · 2024-06-11T16:35:35Z

Nice solution, @HasanGokce. Should we merge this into main so everyone has it?

casulit · 2024-06-14T04:23:20Z

Temporary solution

node_modules/react-native-gifted-chat/lib/Avatar.js

import PropTypes from 'prop-types';
import React from 'react';
import { StyleSheet, View } from 'react-native';
import GiftedAvatar from './GiftedAvatar';
import { StylePropType, isSameUser, isSameDay } from './utils';

const styles = {
    left: StyleSheet.create({
        container: {
            marginRight: 8,
        },
        onTop: {
            alignSelf: 'flex-start',
        },
        onBottom: {},
        image: {
            height: 36,
            width: 36,
            borderRadius: 18,
        },
    }),
    right: StyleSheet.create({
        container: {
            marginLeft: 8,
        },
        onTop: {
            alignSelf: 'flex-start',
        },
        onBottom: {},
        image: {
            height: 36,
            width: 36,
            borderRadius: 18,
        },
    }),
};

export function Avatar({
    renderAvatarOnTop = false,
    showAvatarForEveryMessage = false,
    containerStyle = {},
    position = 'left',
    currentMessage = { user: null },
    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)) {
        return (
            <View style={[
                styles[position].container,
                containerStyle && containerStyle[position],
            ]}>
                <GiftedAvatar avatarStyle={[
                    styles[position].image,
                    imageStyle && imageStyle[position],
                ]}/>
            </View>
        );
    }

    const renderAvatarComponent = () => {
        if (renderAvatar) {
            return renderAvatar({
                renderAvatarOnTop,
                showAvatarForEveryMessage,
                containerStyle,
                position,
                currentMessage,
                previousMessage,
                nextMessage,
                imageStyle,
                onPressAvatar,
                onLongPressAvatar
            });
        }
        if (currentMessage) {
            return (
                <GiftedAvatar
                    avatarStyle={[
                        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()}
        </View>
    );
}

Avatar.propTypes = {
    renderAvatarOnTop: PropTypes.bool,
    showAvatarForEveryMessage: PropTypes.bool,
    position: PropTypes.oneOf(['left', 'right']),
    currentMessage: PropTypes.object,
    previousMessage: PropTypes.object,
    nextMessage: PropTypes.object,
    onPressAvatar: PropTypes.func,
    onLongPressAvatar: PropTypes.func,
    renderAvatar: PropTypes.func,
    containerStyle: PropTypes.shape({
        left: StylePropType,
        right: StylePropType,
    }),
    imageStyle: PropTypes.shape({
        left: StylePropType,
        right: StylePropType,
    }),
};

Thanks :)

xuelink · 2024-07-05T16:25:38Z

It needs PR here. It works but main repo has been updated.

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

gor3a · 2024-07-10T15:18:23Z

I already open PR to fix it #2507
until it review and merge

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,

xuelink · 2024-07-12T17:05:53Z

@FaridSafi Can you please take a look above PR, because this error boring whenever installing dependencies again.

nusendra · 2024-07-19T06:53:53Z

got this problem too. Please help to merge PR above

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

featlast · 2024-07-21T14:48:46Z

Greetings community, any tentative date for the correction of this bug?🐛

React-native-gifted-chat v2.4.0の使用時にAvatarに関する警告が出るという既存のバグに対応した修正をPatch-packageを使用して適用しました isuue: FaridSafi/react-native-gifted-chat#2498 (comment)

itsmeshusha · 2024-08-13T06:35:46Z

Hello everyone! any updates for this bug?

PaitoAnderson · 2024-08-22T20:07:25Z

I noticed the avatars where it's just the letters from their name stopped working after the 2.4.1 update, anyone else?

2.4.1:

2.4.0:

Hatko · 2024-08-23T05:26:34Z

@PaitoAnderson It is the case for non-default Avatar as well

gor3a mentioned this issue Jul 10, 2024

fix: avatar defaultProps warning #2507

Merged

cindyawho mentioned this issue Jul 23, 2024

Temporary Bug Fix to Avatar Warning in Chat Snap-Engineering-Academy-2024/SnapChatStarter#3

Merged

samyung0 mentioned this issue Aug 13, 2024

fix: avatar defaultProps warning samyung0/react-native-gifted-chat#1

Merged

FaridSafi closed this as completed in #2507 Aug 19, 2024

FaridSafi closed this as completed in 4d1ca25 Aug 19, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Casper321 commented May 8, 2024

cool3rain commented May 10, 2024

jonathan200934 commented May 12, 2024

jkronk commented May 14, 2024

hellohejinyu commented May 24, 2024

HasanGokce commented May 27, 2024 •

edited

Loading

nizngulifa commented Jun 11, 2024 •

edited

Loading

casulit commented Jun 14, 2024

xuelink commented Jul 5, 2024

gor3a commented Jul 10, 2024

xuelink commented Jul 12, 2024

nusendra commented Jul 19, 2024

featlast commented Jul 21, 2024

itsmeshusha commented Aug 13, 2024

PaitoAnderson commented Aug 22, 2024

Hatko commented Aug 23, 2024

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

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

Comments

Casper321 commented May 8, 2024

Issue Description

Steps to Reproduce / Code Snippets

Expected Results

Additional Information

cool3rain commented May 10, 2024

jonathan200934 commented May 12, 2024

jkronk commented May 14, 2024

hellohejinyu commented May 24, 2024

HasanGokce commented May 27, 2024 • edited Loading

nizngulifa commented Jun 11, 2024 • edited Loading

casulit commented Jun 14, 2024

xuelink commented Jul 5, 2024

gor3a commented Jul 10, 2024

xuelink commented Jul 12, 2024

nusendra commented Jul 19, 2024

featlast commented Jul 21, 2024

itsmeshusha commented Aug 13, 2024

PaitoAnderson commented Aug 22, 2024

Hatko commented Aug 23, 2024

HasanGokce commented May 27, 2024 •

edited

Loading

nizngulifa commented Jun 11, 2024 •

edited

Loading