|
@@ -1,7 +1,8 @@
|
1
|
1
|
const React = require('react');
|
2
|
2
|
const { Component } = require('react');
|
3
|
|
-const { View, Text } = require('react-native');
|
|
3
|
+const { View, Text, TouchableOpacity } = require('react-native');
|
4
|
4
|
const { Navigation } = require('react-native-navigation');
|
|
5
|
+const testIDs = require('../testIDs');
|
5
|
6
|
|
6
|
7
|
class StaticLifecycleOverlay extends Component {
|
7
|
8
|
constructor(props) {
|
|
@@ -10,26 +11,33 @@ class StaticLifecycleOverlay extends Component {
|
10
|
11
|
text: 'nothing yet',
|
11
|
12
|
events: []
|
12
|
13
|
};
|
13
|
|
- Navigation.events().registerComponentDidAppearListener((componentId, componentName) => {
|
|
14
|
+ this.listeners = [];
|
|
15
|
+ this.listeners.push(Navigation.events().registerComponentDidAppearListener((componentId, componentName) => {
|
14
|
16
|
this.setState({
|
15
|
17
|
events: [...this.state.events, { event: 'componentDidAppear', componentId, componentName }]
|
16
|
18
|
});
|
17
|
|
- });
|
18
|
|
- Navigation.events().registerComponentDidDisappearListener((componentId, componentName) => {
|
|
19
|
+ }));
|
|
20
|
+ this.listeners.push(Navigation.events().registerComponentDidDisappearListener((componentId, componentName) => {
|
19
|
21
|
this.setState({
|
20
|
22
|
events: [...this.state.events, { event: 'componentDidDisappear', componentId, componentName }]
|
21
|
23
|
});
|
22
|
|
- });
|
23
|
|
- Navigation.events().registerCommandListener((name, params) => {
|
|
24
|
+ }));
|
|
25
|
+ this.listeners.push(Navigation.events().registerCommandListener((name, params) => {
|
24
|
26
|
// console.log('RNN', `name: ${JSON.stringify(name)}`);
|
25
|
27
|
// console.log('RNN', `params: ${JSON.stringify(params)}`);
|
26
|
|
- });
|
|
28
|
+ }));
|
|
29
|
+ }
|
|
30
|
+
|
|
31
|
+ componentWillUnmount() {
|
|
32
|
+ this.listeners.forEach(listener => listener.remove());
|
|
33
|
+ this.listeners = [];
|
|
34
|
+ alert('Overlay Unmounted');
|
27
|
35
|
}
|
28
|
36
|
|
29
|
37
|
render() {
|
30
|
|
- const events = this.state.events.map((event) =>
|
|
38
|
+ const events = this.state.events.map((event, idx) =>
|
31
|
39
|
(
|
32
|
|
- <View key={event.componentId}>
|
|
40
|
+ <View key={`${event.componentId}${idx}`}>
|
33
|
41
|
<Text style={styles.h2}>{`${event.event} | ${event.componentName}`}</Text>
|
34
|
42
|
</View>
|
35
|
43
|
));
|
|
@@ -39,9 +47,22 @@ class StaticLifecycleOverlay extends Component {
|
39
|
47
|
<View style={styles.events}>
|
40
|
48
|
{events}
|
41
|
49
|
</View>
|
|
50
|
+ {this.renderDismissButton()}
|
42
|
51
|
</View>
|
43
|
52
|
);
|
44
|
53
|
}
|
|
54
|
+
|
|
55
|
+ renderDismissButton = () => {
|
|
56
|
+ return (
|
|
57
|
+ <TouchableOpacity
|
|
58
|
+ style={styles.dismissBtn}
|
|
59
|
+ testID={testIDs.DISMISS_BUTTON}
|
|
60
|
+ onPress={() => Navigation.dismissOverlay(this.props.componentId)}
|
|
61
|
+ >
|
|
62
|
+ <Text style={{ color: 'red', alignSelf: 'center' }}>X</Text>
|
|
63
|
+ </TouchableOpacity>
|
|
64
|
+ )
|
|
65
|
+}
|
45
|
66
|
}
|
46
|
67
|
module.exports = StaticLifecycleOverlay;
|
47
|
68
|
|
|
@@ -55,6 +76,13 @@ const styles = {
|
55
|
76
|
backgroundColor: '#c1d5e0ae',
|
56
|
77
|
flexDirection: 'column'
|
57
|
78
|
},
|
|
79
|
+ dismissBtn: {
|
|
80
|
+ position: 'absolute',
|
|
81
|
+ width: 25,
|
|
82
|
+ height: 25,
|
|
83
|
+ backgroundColor: 'white',
|
|
84
|
+ justifyContent: 'center'
|
|
85
|
+ },
|
58
|
86
|
events: {
|
59
|
87
|
flexDirection: 'column',
|
60
|
88
|
marginHorizontal: 2
|