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'; import {SCREEN_WIDTH} from '../../utils'; import {DateLabel, PostCarousel} from '../common'; interface TwitterTaggPostProps { ownerHandle: string; post: TwitterPostType; } const TwitterTaggPost: React.FC = ({ ownerHandle, post, }) => { const openTwitterProfileLink = (handle?: string) => { if (handle) { Linking.openURL(`https://twitter.com/${handle}`); } }; return ( {/* Retweeted? */} {post.type === 'retweet' ? ( @{ownerHandle} retweeted ) : ( )} {/* Post header (avatar and handle) */} openTwitterProfileLink(post.handle)}> @{post.handle} {/* Tweet/Reply/Retweet Content */} {/* First part of content is text or empty */} {post.text ? ( {post.text} ) : ( )} {/* Second part of content is an image or empty */} {post.media_url?.length !== 0 ? ( {post.media_url.length === 1 && post.media_url[0] !== null ? ( ) : ( )} ) : ( )} {/* Third part of content is the reply/retweet container or empty */} {(post.type === 'reply' || post.type === 'retweet') && post.in_reply_to && ( {post.in_reply_to.text !== 'This tweet is unavailable' && ( <> openTwitterProfileLink(post.in_reply_to?.handle) }> @{post.in_reply_to.handle} {/* We're not displaying any images here in the container */} ` • ${date}`} /> )} {post.in_reply_to.text} {post.in_reply_to.permalink && ( { if (post.in_reply_to?.permalink) { Linking.openURL(post.in_reply_to?.permalink || ''); } }}> Show this thread )} )} {/* Footer */} { if (post.permalink) { Linking.openURL(post.permalink); } }}> View on Twitter ); }; const styles = StyleSheet.create({ mainContainer: { marginHorizontal: 10, marginBottom: 50, }, retweetedText: { fontSize: 12, color: 'grey', marginBottom: 20, }, header: { alignItems: 'center', flexDirection: 'row', marginBottom: 30, }, avatar: { width: AVATAR_DIM, height: AVATAR_DIM, borderRadius: AVATAR_DIM / 2, }, headerText: { fontSize: 15, fontWeight: 'bold', color: 'white', paddingHorizontal: 12, }, linkColor: {color: '#2980b9'}, contentContainer: {}, contentText: { fontSize: 18, color: 'white', marginBottom: 30, }, // image media imageContainer: { marginBottom: 30, }, image: { width: SCREEN_WIDTH - 20, height: SCREEN_WIDTH - 20, backgroundColor: '#1d0034', borderRadius: 15, resizeMode: 'contain', }, // footer footer: { height: 50, flexDirection: 'column', justifyContent: 'space-between', marginBottom: 50, }, viewOnTwitterText: { fontSize: 12, color: '#6ee7e7', }, // reply post replyPostContainer: { flex: 1, marginVertical: 1, paddingHorizontal: 10, width: SCREEN_WIDTH - 22, justifyContent: 'space-between', paddingTop: 10, paddingBottom: 20, borderRadius: 15, backgroundColor: '#1d0034', }, replyGradient: { // height: 150, borderRadius: 15, justifyContent: 'center', alignItems: 'center', marginBottom: 30, }, replyHeader: { alignItems: 'center', flexDirection: 'row', }, replyAvatar: { height: AVATAR_DIM / 2, width: AVATAR_DIM / 2, borderRadius: AVATAR_DIM / 2 / 2, }, replyHandleText: { fontSize: 15, color: '#c4c4c4', paddingLeft: 7, }, replyText: { fontSize: 15, marginVertical: 20, color: 'white', }, replyShowThisThread: { fontSize: 15, color: '#698dd3', }, }); export default TwitterTaggPost;