diff options
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/components/taggs/TaggPost.tsx | 6 | ||||
| -rw-r--r-- | src/components/taggs/TwitterTaggPost.tsx | 23 |
3 files changed, 26 insertions, 4 deletions
diff --git a/package.json b/package.json index e21b52c7..bbcf6b1f 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "react-native-datepicker": "^1.7.2", "react-native-elements": "^2.3.2", "react-native-gesture-handler": "^1.6.1", + "react-native-hyperlink": "^0.0.19", "react-native-image-crop-picker": "^0.32.2", "react-native-inappbrowser-reborn": "^3.4.0", "react-native-linear-gradient": "^2.5.6", 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, |