-
-
Notifications
You must be signed in to change notification settings - Fork 3.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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
temporary solution
|
Same error here after upgrading to expo sdk 51 |
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 |
react-native-gifted-chat/src/Avatar.tsx Lines 147 to 160 in ba06287
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. |
Temporary solution
|
Nice solution, @HasanGokce. Should we merge this into main so everyone has it? |
Thanks :) |
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
Warning: Avatar: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead closes FaridSafi#2498
I already open PR to fix it #2507 Create 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, |
@FaridSafi Can you please take a look above PR, because this error boring whenever installing dependencies again. |
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
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)
Hello everyone! any updates for this bug? |
@PaitoAnderson It is the case for non-default Avatar as well |
import PropTypes from 'prop-types'; const styles = { export function Avatar({ if (renderAvatar === null) { if (!showAvatarForEveryMessage && const renderAvatarComponent = () => {
}; return ( Avatar.propTypes = { |
Issue Description
Warning: Avatar: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
Steps to Reproduce / Code Snippets
Expected Results
No warning
Additional Information
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: