2 files changed, 115 insertions, 0 deletions
diff --git a/frontend/app/components/avatar/index.js b/frontend/app/components/avatar/index.js
new file mode 100644
index 0000000..b01800a
--- /dev/null
+++ b/frontend/app/components/avatar/index.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import {
+  Image,
+  View,
+} from 'react-native';
+import {
+  RkComponent,
+  RkText,
+  RkTheme,
+} from 'react-native-ui-kitten';
+import { FontAwesome } from '../../assets/icons';
+
+export class Avatar extends RkComponent {
+  componentName = 'Avatar';
+  typeMapping = {
+    container: {},
+    image: {},
+    badge: {},
+    badgeText: {},
+  };
+
+  getBadgeStyle = (badgeProps) => {
+    switch (badgeProps) {
+      case 'like':
+        return {
+          symbol: FontAwesome.heart,
+          backgroundColor: RkTheme.current.colors.badge.likeBackground,
+          color: RkTheme.current.colors.badge.likeForeground,
+        };
+      case 'follow':
+        return {
+          symbol: FontAwesome.plus,
+          backgroundColor: RkTheme.current.colors.badge.plusBackground,
+          color: RkTheme.current.colors.badge.plusForeground,
+        };
+      default: return {};
+    }
+  };
+
+  renderImg = (styles) => (
+    <View>
+      <Image style={styles.image} source={this.props.img} />
+      { this.props.badge && this.renderBadge(styles.badge)}
+    </View>
+  );
+
+  renderBadge = (style, textStyle) => {
+    const badgeStyle = this.getBadgeStyle(this.props.badge);
+    return (
+      <View style={[style, { backgroundColor: badgeStyle.backgroundColor }]}>
+        <RkText rkType='awesome' style={[textStyle, { color: badgeStyle.color }]}>
+          {badgeStyle.symbol}
+        </RkText>
+      </View>
+    );
+  };
+
+  render() {
+    const { container, ...other } = this.defineStyles();
+    return (
+      <View style={[container, this.props.style]}>
+        {this.renderImg(other)}
+      </View>
+    );
+  }
+}
diff --git a/frontend/app/components/avatar/types.js b/frontend/app/components/avatar/types.js
new file mode 100644
index 0000000..2d732d8
--- /dev/null
+++ b/frontend/app/components/avatar/types.js
@@ -0,0 +1,49 @@
+export const AvatarTypes = () => ({
+  _base: {
+    container: {
+      alignItems: 'center',
+      flexDirection: 'row',
+    },
+    image: {
+      width: 40,
+      height: 40,
+    },
+    badge: {
+      width: 15,
+      height: 15,
+      borderRadius: 7.5,
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'absolute',
+      bottom: -2,
+      right: -2,
+    },
+    badgeText: {
+      backgroundColor: 'transparent',
+      fontSize: 9,
+    },
+  },
+  big: {
+    image: {
+      width: 110,
+      height: 110,
+      borderRadius: 55,
+      marginBottom: 19,
+    },
+    container: {
+      flexDirection: 'column',
+    },
+  },
+  small: {
+    image: {
+      width: 32,
+      height: 32,
+      borderRadius: 16,
+    },
+  },
+  circle: {
+    image: {
+      borderRadius: 20,
+    },
+  },
+});