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

[Casper321]

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.

[cool3rain]

temporary solution

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

[jonathan200934]

Same error here after upgrading to expo sdk 51

[jkronk]

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]

https://github.com/FaridSafi/react-native-gifted-chat/blob/ba06287912151dbfb71951893d0454db8aafd5a5/src/Avatar.tsx#L147-L160

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]

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]

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

[casulit]

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]

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

[gor3a]

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]

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

[nusendra]

got this problem too. Please help to merge PR above

[featlast]

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

[itsmeshusha]

Hello everyone! any updates for this bug?

[PaitoAnderson]

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]

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

[mohsenfl2022]

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 }, renderAvatar, previousMessage = {}, nextMessage = {}, 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[position]]}> <GiftedAvatar avatarStyle={[styles[position].image, imageStyle[position]]} /> </View> ); }

const renderAvatarComponent = () => { if (renderAvatar) { const { renderAvatar, ...avatarProps } = props; return renderAvatar(avatarProps); }

if (currentMessage) {
  return (
    <GiftedAvatar
      avatarStyle={[styles[position].image, 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[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, }), };