react-native-fetch-api-JSON/ApiJSON.js at master · salauatamet/react-native-fetch-api-JSON · 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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import React, { Component } from 'react';

import {
    StyleSheet,
    ActivityIndicator,
    FlatList,
    Text,
    View,
    Alert,
    RefreshControl,
} from 'react-native';

export default class Project extends Component {
    constructor(props) {
        super(props);
        this.state = { refreshing: true };
        this.GetData();
    }

    GetData = () => {
        return fetch('https://clicklink.in/users.json', {
            headers: {
                'Cache-Control': 'no-cache, no-store, must-revalidate',
                'Pragma': 'no-cache',
                'Expires': 0
            }
        })
            .then(response => response.json())
            .then(responseJson => {
                this.setState({
                    refreshing: false,
                    dataSource: responseJson
                });
            })
            .catch(error => {
                console.error(error);
            });
    };
    ListViewItemSeparator = () => {
        return (
            <View
                style={{
                    height: 0.2,
                    width: '90%',
                    backgroundColor: '#808080',
                }}
            />
        );
    };
    onRefresh() {
        this.setState({ dataSource: [] });
        this.GetData();
    }
    render() {
        if (this.state.refreshing) {
            return (
                <View style={{ flex: 1, paddingTop: 20 }}>
                    <ActivityIndicator />
                </View>
            );
        }
        return (
            <View style={styles.MainContainer}>
                <FlatList
                    data={this.state.dataSource}
                    ItemSeparatorComponent={this.ListViewItemSeparator}
                    enableEmptySections={true}
                    renderItem={({ item }) => (
                        <View>
                            <Text style={styles.rowViewContainer}
                                onPress={() => alert(item.id)}>
                                {item.name}
                            </Text>
                            <Text style={styles.rowViewContainer}
                                onPress={() => alert(item.id)}>
                                {item.username}
                            </Text>
                            <Text style={styles.rowViewContainer}
                                onPress={() => alert(item.id)}>
                                {item.email}
                            </Text>
                            <Text style={styles.rowViewContainer}
                                onPress={() => alert(item.id)}>
                                {item.phone}
                            </Text>
                        </View>
                    )}
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={this.onRefresh.bind(this)}
                        />
                    }
                    keyExtractor={(item, index) => index.toString()}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    MainContainer: {
        justifyContent: 'center',
        flex: 1,
        marginTop: 10,
    },
    rowViewContainer: {
        fontSize: 20,
        paddingVertical: 10,
        paddingHorizontal: 30,
        fontSize: 18,
        color: '#000000'
    },
});