-
Notifications
You must be signed in to change notification settings - Fork 2
/
App.tsx
103 lines (93 loc) · 2.46 KB
/
App.tsx
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
import {autobind} from "core-decorators";
import React, {Component} from "react";
import {SafeAreaView, ScrollView, StyleSheet, Text, View} from "react-native";
import {PullToRefreshView} from "react-native-smooth-pull-to-refresh";
import {RefreshView} from "./RefreshView";
interface AppProps {
}
interface AppState {
title: string;
isRefreshing: boolean;
}
export class App extends Component<AppProps, AppState> {
public state: AppState = {
title: "Pull down to refresh",
isRefreshing: false,
};
public render() {
return (
<SafeAreaView style={styles.container}>
<View style={{height: 64, backgroundColor: "#24bdd8"}}>
<Text style={{top: 35, fontWeight: "bold", fontSize: 18, color: "white", textAlign: "center"}}>Header</Text>
</View>
<PullToRefreshView
minPullDistance={70}
pullAnimHeight={70}
pullAnimYValues={{from: -50, to: 10}}
isRefreshing={this.state.isRefreshing}
onRefresh={this.onInnerRefresh}
onTriggerToRefresh={this.onTriggerToRefresh}
contentComponent={
<ScrollView>
<Text style={styles.block1}>BLOCK 1</Text>
<Text style={styles.block2}>BLOCK 2</Text>
<Text style={styles.block3}>BLOCK 3</Text>
</ScrollView>
}
>
<RefreshView title={this.state.title}/>
</PullToRefreshView>
</SafeAreaView>
);
}
@autobind
private onInnerRefresh() {
this.setState({title: "Loading..."});
this.startRefreshing();
}
@autobind
private onTriggerToRefresh(triggered: boolean) {
this.setState({title: triggered ? "Release to refresh" : "Pull down to refresh"});
}
private startRefreshing() {
this.setState({
isRefreshing: true,
});
setTimeout(() => {
this.setState({isRefreshing: false});
}, 1500);
}
private stopRefreshing() {
this.setState({isRefreshing: false});
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "white",
},
block1: {
margin: 2,
fontSize: 20,
textAlign: "center",
lineHeight: 230,
height: 230,
backgroundColor: "#9b9287",
},
block2: {
margin: 2,
fontSize: 20,
textAlign: "center",
lineHeight: 230,
height: 230,
backgroundColor: "#9b9287",
},
block3: {
margin: 2,
fontSize: 20,
textAlign: "center",
lineHeight: 230,
height: 230,
backgroundColor: "#9b9287",
},
});