burst-tutorial-start/Post.js at master · UXEngineerLab/burst-tutorial-start · GitHub

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import React from 'react';
import {
    Animated,
    Dimensions,
    Image,
    ScrollView,
    StyleSheet,
    Text,
    View
} from 'react-native';


const DEVICE_WIDTH = Dimensions.get('window').width;
const CARD_GUTTER_VERTICAL = 16;
const CARD_GUTTER_HORIZONTAL = 8;
const CARD_WIDTH = DEVICE_WIDTH - 32;
const SCROLL_INTERVAL = CARD_WIDTH + CARD_GUTTER_HORIZONTAL;

export default class Post extends React.Component {
    render() {
        return (
            <View style={[styles.container, {height: this.props.height}]}>
                <ScrollView
                  horizontal
                  style={styles.scrollContainer}
                  contentContainerStyle={styles.contentContainer}
                  showsHorizontalScrollIndicator={false}
                  snapToInterval={SCROLL_INTERVAL}
                  decelerationRate="fast">

                    {/* This is our main title card */}
                    <View style={styles.card}>
                        <Image
                          style={styles.image}
                          width={CARD_WIDTH}
                          height={this.props.height-52}
                          source={{uri: 'https://picsum.photos/'+ CARD_WIDTH*2 +'/'+ this.props.height*1.5 +'/?gravity=center&image='+ Math.round(Math.random()*999)}}
                        />
                        <Text style={styles.text}>{this.props.title}</Text>
                    </View>

                    {/* And this is our one and only comment */}
                    <View style={styles.card}>
                        <Text style={styles.text}>{this.props.comment}</Text>
                    </View>

                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        marginVertical: CARD_GUTTER_VERTICAL/2,
    },

    scrollContainer: {
        overflow: 'visible'
    },

    contentContainer: {
        paddingHorizontal: 12,
    },

    overlay: {
        opacity: 0,
        backgroundColor: '#fff',
        position: 'absolute',
        width: DEVICE_WIDTH,
        height: 99999,
        top: -99999/2,
        left: 0,
    },

    card: {
        marginHorizontal: CARD_GUTTER_HORIZONTAL/2,
        borderRadius: 16,
        width: CARD_WIDTH,
        backgroundColor: '#eee',
        overflow: 'hidden'
    },

    image: {
        resizeMode: 'cover',
        backgroundColor: '#ddd'
    },

    text: {
        marginVertical: 12,
        marginHorizontal: 16,
        fontSize: 16,
        lineHeight: 24,
        fontWeight: '600'
    }
});