[TMA-305] Made things clickable (#67)

* made links clickable

* made handles clickable

* made more links clickable

2 files changed, 25 insertions, 4 deletions

diff --git a/src/components/taggs/TaggPost.tsx b/src/components/taggs/TaggPost.tsx
index 0d3aee50..07efd797 100644
--- a/src/components/taggs/TaggPost.tsx
+++ b/src/components/taggs/TaggPost.tsx
@@ -4,6 +4,7 @@ import {SimplePostType} from '../../types';
 import {SCREEN_WIDTH} from '../../utils';
 import {DateLabel} from '../common';
 import TaggPostFooter from './TaggPostFooter';
+import Hyperlink from 'react-native-hyperlink';
 
 interface TaggPostProps {
   post: SimplePostType;
@@ -31,7 +32,9 @@ const TaggPost: React.FC<TaggPostProps> = ({post}) => {
     // Post with large text
     return (
       <View style={styles.textContianer}>
-        <Text style={styles.text}>{post.caption}</Text>
+        <Hyperlink linkDefault={true} linkStyle={styles.linkColor}>
+          <Text style={styles.text}>{post.caption}</Text>
+        </Hyperlink>
         <DateLabel timestamp={post.timestamp} type={'default'} />
       </View>
     );
@@ -55,6 +58,7 @@ const styles = StyleSheet.create({
     color: 'white',
     flexWrap: 'wrap',
   },
+  linkColor: {color: '#2980b9'},
 });
 
 export default TaggPost;
diff --git a/src/components/taggs/TwitterTaggPost.tsx b/src/components/taggs/TwitterTaggPost.tsx
index 2cc23bcf..c72b4fa8 100644
--- a/src/components/taggs/TwitterTaggPost.tsx
+++ b/src/components/taggs/TwitterTaggPost.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {Image, Linking, StyleSheet, View} from 'react-native';
 import {Text} from 'react-native-animatable';
+import Hyperlink from 'react-native-hyperlink';
 import LinearGradient from 'react-native-linear-gradient';
 import {AVATAR_DIM, TAGGS_GRADIENT} from '../../constants';
 import {TwitterPostType} from '../../types';
@@ -15,6 +16,11 @@ const TwitterTaggPost: React.FC<TwitterTaggPostProps> = ({
   ownerHandle,
   post,
 }) => {
+  const openTwitterProfileLink = (handle?: string) => {
+    if (handle) {
+      Linking.openURL(`https://twitter.com/${handle}`);
+    }
+  };
   return (
     <View style={styles.mainContainer}>
       {/* Retweeted? */}
@@ -33,13 +39,19 @@ const TwitterTaggPost: React.FC<TwitterTaggPostProps> = ({
               : require('../../assets/images/avatar-placeholder.png')
           }
         />
-        <Text style={styles.headerText}>@{post.handle}</Text>
+        <Text
+          style={styles.headerText}
+          onPress={() => openTwitterProfileLink(post.handle)}>
+          @{post.handle}
+        </Text>
       </View>
       {/* Tweet/Reply/Retweet Content */}
       <View style={styles.contentContainer}>
         {/* First part of content is text or empty */}
         {post.text ? (
-          <Text style={styles.contentText}>{post.text}</Text>
+          <Hyperlink linkDefault={true} linkStyle={styles.linkColor}>
+            <Text style={styles.contentText}>{post.text}</Text>
+          </Hyperlink>
         ) : (
           <React.Fragment />
         )}
@@ -70,7 +82,11 @@ const TwitterTaggPost: React.FC<TwitterTaggPostProps> = ({
                       : require('../../assets/images/avatar-placeholder.png')
                   }
                 />
-                <Text style={styles.replyHandleText}>
+                <Text
+                  style={styles.replyHandleText}
+                  onPress={() =>
+                    openTwitterProfileLink(post.in_reply_to?.handle)
+                  }>
                   @{post.in_reply_to.handle}
                 </Text>
                 <DateLabel
@@ -140,6 +156,7 @@ const styles = StyleSheet.create({
     color: 'white',
     paddingHorizontal: 12,
   },
+  linkColor: {color: '#2980b9'},
   contentContainer: {},
   contentText: {
     fontSize: 18,