diff --git a/native/components/avatar.react.js b/native/components/avatar.react.js new file mode 100644 index 000000000..6b50aa755 --- /dev/null +++ b/native/components/avatar.react.js @@ -0,0 +1,98 @@ +// @flow + +import * as React from 'react'; +import { View, Text, StyleSheet } from 'react-native'; + +import type { ClientAvatar } from 'lib/types/avatar-types.js'; + +type Props = { + +avatarInfo: ClientAvatar, + +size?: 'large' | 'small' | 'profile' | 'micro', +}; + +function Avatar(props: Props): React.Node { + const { avatarInfo, size } = props; + + const containerSizeStyle = React.useMemo(() => { + if (size === 'profile') { + return styles.profile; + } else if (size === 'small') { + return styles.small; + } else if (size === 'micro') { + return styles.micro; + } + return styles.large; + }, [size]); + + const emojiContainerStyle = React.useMemo(() => { + const containerStyles = [styles.emojiContainer, containerSizeStyle]; + if (avatarInfo.type === 'emoji') { + const backgroundColor = { backgroundColor: `#${avatarInfo.color}` }; + containerStyles.push(backgroundColor); + } + + return containerStyles; + }, [avatarInfo, containerSizeStyle]); + + const emojiSizeStyle = React.useMemo(() => { + if (size === 'profile') { + return styles.emojiProfile; + } else if (size === 'small') { + return styles.emojiSmall; + } else if (size === 'micro') { + return styles.emojiMicro; + } + return styles.emojiLarge; + }, [size]); + + return ( + + {avatarInfo.emoji} + + ); +} + +const styles = StyleSheet.create({ + emojiContainer: { + alignItems: 'center', + justifyContent: 'center', + }, + emojiLarge: { + fontSize: 28, + textAlign: 'center', + }, + emojiMicro: { + fontSize: 9, + textAlign: 'center', + }, + emojiProfile: { + fontSize: 80, + textAlign: 'center', + }, + emojiSmall: { + fontSize: 14, + textAlign: 'center', + }, + large: { + borderRadius: 20, + height: 40, + width: 40, + }, + micro: { + borderRadius: 8, + height: 16, + width: 16, + }, + profile: { + borderRadius: 56, + height: 112, + width: 112, + }, + small: { + borderRadius: 12, + height: 24, + width: 24, + }, +}); + +export default Avatar;