2 files changed, 104 insertions, 0 deletions
diff --git a/frontend/app/components/socialBar/index.js b/frontend/app/components/socialBar/index.js
new file mode 100644
index 0000000..5cf3fc2
--- /dev/null
+++ b/frontend/app/components/socialBar/index.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import { View } from 'react-native';
+import {
+  RkText,
+  RkButton,
+  RkComponent,
+} from 'react-native-ui-kitten';
+import { FontAwesome } from '../../assets/icons';
+
+export class SocialBar extends RkComponent {
+  componentName = 'SocialBar';
+  typeMapping = {
+    container: {},
+    section: {},
+    icon: {},
+    label: {},
+  };
+  static data = {
+    comments: '26',
+    is_solved: "Doesn't solved",
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      comments: this.props.comments,
+      is_solved: this.props.is_solved || SocialBar.data.is_solved,
+    };
+  }
+
+
+  onCommentButtonPressed = () => {
+  };
+
+
+  render() {
+    const {
+      container, section, icon, label,
+    } = this.defineStyles();
+
+    const comments = this.state.comments + (this.props.showLabel ? ' Comments' : '');
+    const is_solved = this.state.is_solved + (this.props.showLabel ? '' : '');
+
+    return (
+      <View style={container}>
+        <View style={section}>
+          <RkButton rkType='clear' onPress={this.onCommentButtonPressed}>
+            <RkText rkType='awesome hintColor' style={icon}>{FontAwesome.comment}</RkText>
+            <RkText rkType='primary4 hintColor' style={label}>{comments}</RkText>
+          </RkButton>
+        </View>
+        <View style={section}>
+          <RkButton rkType='clear' >
+            <RkText rkType='awesome hintColor' style={icon}>{FontAwesome.slashEye}</RkText>
+            <RkText rkType='primary4 hintColor' style={label}>{is_solved}</RkText>
+          </RkButton>
+        </View>
+      </View>
+    );
+  }
+}
diff --git a/frontend/app/components/socialBar/types.js b/frontend/app/components/socialBar/types.js
new file mode 100644
index 0000000..3aa638d
--- /dev/null
+++ b/frontend/app/components/socialBar/types.js
@@ -0,0 +1,43 @@
+export const SocialBarTypes = (theme) => ({
+  _base: {
+    container: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      flexDirection: 'row',
+      flex: 1,
+    },
+    section: {
+      justifyContent: 'center',
+      flexDirection: 'row',
+      flex: 1,
+    },
+    icon: {
+      fontSize: 20,
+    },
+    label: {
+      marginLeft: 8,
+      alignSelf: 'flex-end',
+    },
+  },
+  leftAligned: {
+    section: {
+      alignItems: 'flex-start',
+      justifyContent: 'flex-start',
+    },
+    label: {
+      color: theme.colors.text.inverse,
+    },
+    icon: {
+      color: theme.colors.text.inverse,
+    },
+  },
+  space: {
+    container: {
+      justifyContent: 'space-between',
+      paddingHorizontal: 10,
+    },
+    section: {
+      flex: -1,
+    },
+  },
+});