1 files changed, 64 insertions, 0 deletions
diff --git a/frontend/app/components/findFriends.js b/frontend/app/components/findFriends.js
new file mode 100644
index 0000000..0e54034
--- /dev/null
+++ b/frontend/app/components/findFriends.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import {
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  ViewPropTypes,
+} from 'react-native';
+import {
+  RkText,
+  RkTheme,
+} from 'react-native-ui-kitten';
+import PropTypes from 'prop-types';
+import { FontAwesome } from '../assets/icons';
+
+export class FindFriends extends React.Component {
+  static propTypes = {
+    selected: PropTypes.bool,
+    color: PropTypes.string,
+    icon: PropTypes.node.isRequired,
+    text: PropTypes.string.isRequired,
+    onPress: PropTypes.func,
+    style: ViewPropTypes.style,
+  };
+  static defaultProps = {
+    selected: false,
+    color: RkTheme.current.colors.text.base,
+    onPress: (() => null),
+    style: {},
+  };
+
+  render = () => {
+    const color = this.props.selected ? this.props.color : RkTheme.current.colors.disabled;
+    return (
+      <TouchableOpacity style={[styles.wrapper, this.props.style]} onPress={this.props.onPress}>
+        <View style={styles.container}>
+          <View style={styles.text}>
+            <RkText rkType='awesome' style={[styles.icon, { color }]}>{this.props.icon}</RkText>
+            <RkText rkType='header6' style={{ color }}>{`Find Friends With ${this.props.text}`}</RkText>
+          </View>
+          <RkText rkType='awesome small' style={{ color }}>{FontAwesome.chevronRight}</RkText>
+        </View>
+      </TouchableOpacity>
+    );
+  };
+}
+
+let styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 18,
+  },
+  text: {
+    flexDirection: 'row',
+  },
+  icon: {
+    width: 35,
+  },
+});