Open Casper321 opened 2 months ago
temporary solution
const error = console.error; console.error = (...args) => { if (/defaultProps/.test(args[0])) return; error(...args); };
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
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
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,
}),
};
Nice solution, @HasanGokce. Should we merge this into main so everyone has it?
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 :)
It needs PR here. It works but main repo has been updated.
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,
@FaridSafi Can you please take a look above PR, because this error boring whenever installing dependencies again.
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.