react-native-preload/App.js at master · trimitrtech/react-native-preload · 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
import React, { Component } from "react";
import { View, Dimensions } from "react-native";
import { Skeleton } from "react-native-preload";

const SCREEN_HEIGHT = Dimensions.get('window').height;
const SCREEN_WIDTH = Dimensions.get('window').width;

export default class App extends Component {

    constructor(props) {
        super(props);
        console.log(props)
        this.state = {
        }
    }


    render() {

        return (
            <View style={{ height: SCREEN_HEIGHT / 1.2 }}>
                <View style={{ flexDirection: 'row' }}>
                    <View style={{ width: SCREEN_WIDTH / 3, height: SCREEN_HEIGHT / 4, borderRadius: 15, marginVertical: 15, justifyContent: 'space-around', alignItems: 'center', marginHorizontal: 5, borderColor: '#d8d8d8', borderWidth: 0.4 }}>
                        <View style={{ width: SCREEN_WIDTH / 5, height: SCREEN_HEIGHT / 5.8, backgroundColor: '#d8d8d8', borderRadius: 8, }} >
                            <Skeleton Width={70} Height={SCREEN_HEIGHT / 5.8} BorderRadius={8} />
                        </View>
                        <View>
                            <View style={{ width: SCREEN_WIDTH / 7, height: 15, backgroundColor: '#d8d8d8', borderRadius: 2 }}>
                                <Skeleton Width={Math.ceil(SCREEN_WIDTH / 7)} Height={15} BorderRadius={2} />
                            </View>
                            <View style={{ width: SCREEN_WIDTH / 7, height: 15, marginTop: 2, backgroundColor: '#d8d8d8', borderRadius: 2 }}>
                                <Skeleton Width={Math.ceil(SCREEN_WIDTH / 7)} Height={15} BorderRadius={2} />
                            </View>
                        </View>
                    </View>
                    <View style={{ width: SCREEN_WIDTH / 3, height: SCREEN_HEIGHT / 4, borderRadius: 15, marginVertical: 15, justifyContent: 'space-around', alignItems: 'center', marginHorizontal: 5, borderColor: '#d8d8d8', borderWidth: 0.4 }}>
                        <View style={{ width: SCREEN_WIDTH / 5, height: SCREEN_HEIGHT / 5.8, backgroundColor: '#d8d8d8', borderRadius: 8, }} >
                            <Skeleton Width={70} Height={SCREEN_HEIGHT / 5.8} BorderRadius={8} />
                        </View>
                        <View>
                            <View style={{ width: SCREEN_WIDTH / 7, height: 15, backgroundColor: '#d8d8d8', borderRadius: 2 }}>
                                <Skeleton Width={Math.ceil(SCREEN_WIDTH / 7)} Height={15} BorderRadius={2} />
                            </View>
                            <View style={{ width: SCREEN_WIDTH / 7, height: 15, marginTop: 2, backgroundColor: '#d8d8d8', borderRadius: 2 }}>
                                <Skeleton Width={Math.ceil(SCREEN_WIDTH / 7)} Height={15} BorderRadius={2} />
                            </View>
                        </View>
                    </View>
                    <View style={{ width: SCREEN_WIDTH / 3, height: SCREEN_HEIGHT / 4, borderRadius: 15, marginVertical: 15, justifyContent: 'space-around', alignItems: 'center', marginHorizontal: 5, borderColor: '#d8d8d8', borderWidth: 0.4 }}>
                        <View style={{ width: SCREEN_WIDTH / 5, height: SCREEN_HEIGHT / 5.8, backgroundColor: '#d8d8d8', borderRadius: 8, }} >
                            <Skeleton Width={70} Height={SCREEN_HEIGHT / 5.8} BorderRadius={8} />
                        </View>
                        <View>
                            <View style={{ width: SCREEN_WIDTH / 7, height: 15, backgroundColor: '#d8d8d8', borderRadius: 2 }}>
                                <Skeleton Width={Math.ceil(SCREEN_WIDTH / 7)} Height={15} BorderRadius={2} />
                            </View>
                            <View style={{ width: SCREEN_WIDTH / 7, height: 15, marginTop: 2, backgroundColor: '#d8d8d8', borderRadius: 2 }}>
                                <Skeleton Width={Math.ceil(SCREEN_WIDTH / 7)} Height={15} BorderRadius={2} />
                            </View>
                        </View>
                    </View>
                </View>
            </View>
        )
    }
}