diff --git a/lib/types/avatar-types.js b/lib/types/avatar-types.js --- a/lib/types/avatar-types.js +++ b/lib/types/avatar-types.js @@ -78,4 +78,4 @@ ... }; -export type AvatarSize = 'XS' | 'S' | 'M' | 'L' | 'XL'; +export type AvatarSize = 'XS' | 'S' | 'M' | 'L' | 'XL' | 'XXL'; diff --git a/native/avatars/avatar.react.js b/native/avatars/avatar.react.js --- a/native/avatars/avatar.react.js +++ b/native/avatars/avatar.react.js @@ -27,8 +27,10 @@ return styles.medium; } else if (size === 'L') { return styles.large; + } else if (size === 'XL') { + return styles.xLarge; } - return styles.xLarge; + return styles.xxLarge; }, [size]); const emojiContainerStyle = React.useMemo(() => { @@ -50,8 +52,10 @@ return styles.emojiMedium; } else if (size === 'L') { return styles.emojiLarge; + } else if (size === 'XL') { + return styles.emojiXLarge; } - return styles.emojiXLarge; + return styles.emojiXXLarge; }, [size]); const avatar = React.useMemo(() => { @@ -110,6 +114,10 @@ fontSize: 9, textAlign: 'center', }, + emojiXXLarge: { + fontSize: 176, + textAlign: 'center', + }, imageContainer: { overflow: 'hidden', }, @@ -138,6 +146,11 @@ height: 16, width: 16, }, + xxLarge: { + borderRadius: 112, + height: 224, + width: 224, + }, }); export default Avatar;