-
Notifications
You must be signed in to change notification settings - Fork 0
/
notifier.js
110 lines (95 loc) · 4.22 KB
/
notifier.js
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
/*
* Network Status Component
*
* States
* - notificationPosition: specify the position of the toast component, defaults to top
* - showOnline: if network status changes from offline to online, should a toast being shown? defaults to true
* - onlineTimeoutSeconds: timeout seconds for online component because we can't keep showing the online component when network
* status changes from offline to online
* - isConnected: is the user connected or not
* - previousOffline: if the user launches the app and is connected initially, we don't need to notify the user about the network
* status, only notify the user when the status was initially offline
* - onlineVisibility: this sets to false after the timeout seconds to avoid showing the online status to the user
* Props
* - position: toast position, enum : ['top', 'bottom']
* - showOnline: boolean, defaults to true
* - offlineText: string, defaults to 'No Connection'
* - offlineComponent: Custom React Component
* - onlineText: string, defaults to 'Back Online'
* - onlineComponent: Custom React Component
* - onlineTimeoutSeconds: number, defaults to 3000
*/
import React from 'react';
import { View, Text, NetInfo } from 'react-native';
import styles from './styles';
import { DEFAULT_ONLINE_TEXT, DEFAULT_OFFLINE_TEXT, TOP_POSITION, DEFAULT_TIMEOUT_SECONDS } from './config';
export default class OfflineNotice extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
notificationPosition: props.position || TOP_POSITION,
showOnline: props.showOnline || true,
onlineTimeoutSeconds: props.onlineTimeoutSeconds || DEFAULT_TIMEOUT_SECONDS,
isConnected: true,
previouslyOffline: false,
onlineVisibility: true
};
}
componentDidMount() {
NetInfo.isConnected.addEventListener('connectionChange', this.handleNetworkChange);
}
componentWillUnmount() {
NetInfo.isConnected.removeEventListener('connectionChange', this.handleNetworkChange);
}
componentDidUpdate() {
const { isConnected, onlineTimeoutSeconds } = this.state;
if (isConnected) {
setTimeout(() => {
this.setState({ onlineVisibility: false });
}, onlineTimeoutSeconds);
} else {
this.setState({ onlineVisibility: true });
}
this.setState({ previouslyOffline: true });
}
handleNetworkChange = (isConnected) => {
this.setState({ isConnected });
};
renderOfflineMessage = (position) => {
const { offlineComponent, offlineText } = this.props;
let component = offlineComponent;
const toastText = offlineText ? offlineText : DEFAULT_OFFLINE_TEXT;
if (!offlineComponent) {
component = (
<View style={[styles.networkContainer, styles.offlineContainer, position]}>
<Text style={styles.networkText}>{toastText}</Text>
</View>
);
}
return component;
}
renderOnlineMessage = (position) => {
const { onlineComponent, onlineText } = this.props;
const { showOnline, previouslyOffline, onlineVisibility } = this.state;
let component = onlineComponent;
const toastText = onlineText ? onlineText : DEFAULT_ONLINE_TEXT;
if (!onlineComponent) {
component = (
<View style={[styles.networkContainer, styles.onlineContainer, position]}>
<Text style={styles.networkText}>{toastText}</Text>
</View>
)
}
const showOnlineComponent = showOnline ? component : null;
return previouslyOffline && onlineVisibility ? showOnlineComponent : null;
}
renderComponent = () => {
const { isConnected, notificationPosition } = this.state;
const position = notificationPosition === TOP_POSITION ? styles.topPosition : styles.bottomPosition;
let content = isConnected ? this.renderOnlineMessage(position) : this.renderOfflineMessage(position);
return content;
}
render() {
return this.renderComponent();
}
}