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

* made links clickable

* made handles clickable

* made more links clickable

1 files changed, 20 insertions, 3 deletions

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,