1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
import React from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
import {SimplePostType} from '../../types';
import {SCREEN_WIDTH} from '../../utils';
import {DateLabel, PostCarousel} from '../common';
import TaggPostFooter from './TaggPostFooter';
import Hyperlink from 'react-native-hyperlink';
interface TaggPostProps {
post: SimplePostType;
social: string;
}
const TaggPost: React.FC<TaggPostProps> = ({post, social}) => {
if (post.media_type === 'photo') {
// Post with image and footer that shows caption
return (
<View style={styles.photoContainer}>
{post.media_url?.length === 1 && post.media_url[0] !== null ? (
<Image
style={styles.imageWithMargin}
source={{uri: post.media_url[0]}}
/>
) : (
<PostCarousel
data={post.media_url}
imageStyles={styles.image}
marginBottom={30}
/>
)}
<TaggPostFooter
// we currently don't have a way to retreive num of likes information
likes={undefined}
handle={post.username}
caption={post.caption || ''}
timestamp={post.timestamp}
social={social}
/>
</View>
);
} else {
// Post with large text
return (
<View style={styles.textContianer}>
<Hyperlink linkDefault={true} linkStyle={styles.linkColor}>
<Text style={styles.text}>{post.caption}</Text>
</Hyperlink>
<DateLabel timestamp={post.timestamp} type={'default'} />
</View>
);
}
};
const styles = StyleSheet.create({
photoContainer: {
marginBottom: 50,
},
image: {
width: SCREEN_WIDTH,
height: SCREEN_WIDTH,
backgroundColor: '#eee',
},
imageWithMargin: {
width: SCREEN_WIDTH,
height: SCREEN_WIDTH,
backgroundColor: '#1d0034',
marginBottom: 30,
resizeMode: 'contain',
},
textContianer: {marginBottom: 50, paddingHorizontal: 10},
text: {
marginBottom: 30,
fontSize: 18,
color: 'white',
flexWrap: 'wrap',
},
linkColor: {color: '#2980b9'},
});
export default TaggPost;
|
