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
|
import React from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
import {SimplePostType} from '../../types';
import {SCREEN_WIDTH} from '../../utils';
import {DateLabel} from '../common';
import TaggPostFooter from './TaggPostFooter';
interface TaggPostProps {
post: SimplePostType;
}
const TaggPost: React.FC<TaggPostProps> = ({post}) => {
if (post.media_type === 'photo') {
// Post with image and footer that shows caption
return (
<View style={styles.photoContainer}>
<View style={styles.image}>
{post && (
<Image style={styles.image} source={{uri: post.media_url}} />
)}
</View>
<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}
/>
</View>
);
} else {
// Post with large text
return (
<View style={styles.textContianer}>
<Text style={styles.text}>{post.caption}</Text>
<DateLabel timestamp={post.timestamp} type={'default'} />
</View>
);
}
};
const styles = StyleSheet.create({
photoContainer: {
marginBottom: 50,
},
image: {
width: SCREEN_WIDTH,
height: SCREEN_WIDTH,
backgroundColor: '#eee',
marginBottom: 30,
},
textContianer: {marginBottom: 50, paddingHorizontal: 10},
text: {
marginBottom: 30,
fontSize: 18,
color: 'white',
flexWrap: 'wrap',
},
});
export default TaggPost;
|
