[TMA 301] Add follow/unfollow button to profile (#70)

* Follow Unfollow User

* Fixed an issue and moved api call to Content.tsx

* last

* Small changes

1 files changed, 40 insertions, 0 deletions

diff --git a/src/components/profile/FollowUnfollow.tsx b/src/components/profile/FollowUnfollow.tsx
new file mode 100644
index 00000000..bb1e9ef7
--- /dev/null
+++ b/src/components/profile/FollowUnfollow.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import {StyleSheet, Text} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+
+type FollowUnfollowProps = {
+  followed: boolean;
+  handleFollowUnfollow: Function;
+};
+
+const FollowUnfollow: React.FC<FollowUnfollowProps> = ({
+  followed,
+  handleFollowUnfollow,
+}) => {
+  return (
+    <TouchableOpacity
+      style={styles.button}
+      onPress={() => handleFollowUnfollow()}>
+      <Text style={styles.text}>{!followed ? `Follow` : `Unfollow`}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 110,
+    height: 40,
+    borderRadius: 8,
+    marginTop: '5%',
+    borderColor: '#698dd3',
+    backgroundColor: 'white',
+    borderWidth: 3,
+  },
+  text: {
+    fontWeight: 'bold',
+    color: '#698dd3',
+  },
+});
+export default FollowUnfollow;