Browse Source

Change SideMenuLeftScreen to functional component (#5834)

Motivation: Try to reproduce #5833
Guy Carmeli 4 years ago
parent
commit
608bb67edd
No account linked to committer's email address
1 changed files with 24 additions and 19 deletions
  1. 24
    19
      playground/src/screens/SideMenuLeftScreen.js

+ 24
- 19
playground/src/screens/SideMenuLeftScreen.js View File

1
 const React = require('react');
1
 const React = require('react');
2
+const { useEffect } = require('react');
2
 const Root = require('../components/Root');
3
 const Root = require('../components/Root');
3
 const Button = require('../components/Button')
4
 const Button = require('../components/Button')
4
 const Navigation = require('../services/Navigation');
5
 const Navigation = require('../services/Navigation');
9
   LEFT_SIDE_MENU_PUSH_AND_CLOSE_BTN
10
   LEFT_SIDE_MENU_PUSH_AND_CLOSE_BTN
10
 } = require('../testIDs');
11
 } = require('../testIDs');
11
 
12
 
12
-class SideMenuLeftScreen extends React.Component {
13
-  static options() {
14
-    return {
15
-      layout: {
16
-        orientation: ['portrait', 'landscape']
17
-      }
18
-    };
19
-  }
20
-  render() {
21
-    return (
22
-      <Root componentId={this.props.componentId} style={{ marginTop: this.props.marginTop || 0 }}>
23
-        <Button label='Push' testID={LEFT_SIDE_MENU_PUSH_BTN} onPress={this.push} />
24
-        <Button label='Push and Close' testID={LEFT_SIDE_MENU_PUSH_AND_CLOSE_BTN} onPress={this.pushAndClose} />
25
-        <Button label='Close' testID={CLOSE_LEFT_SIDE_MENU_BTN} onPress={this.close} />
26
-      </Root>
13
+function SideMenuLeftScreen(props) {
14
+  useEffect(() => {
15
+    const componentDisappearListener = Navigation.events().registerComponentDidDisappearListener(
16
+      ({ componentId }) => {
17
+        if (componentId === props.componentId) {
18
+          console.log('RNN', `componentDisappearListener ${componentId}/${JSON.stringify(props)}`);
19
+        }
20
+      },
27
     );
21
     );
28
-  }
22
+    return () => {
23
+      componentDisappearListener.remove();
24
+    };
25
+  }, []);
29
 
26
 
30
-  push = () => Navigation.push('SideMenuCenter', Screens.Pushed);
27
+  const push = () => Navigation.push('SideMenuCenter', Screens.Pushed);
31
 
28
 
32
-  pushAndClose = () => Navigation.push('SideMenuCenter', {
29
+  const pushAndClose = () => Navigation.push('SideMenuCenter', {
33
     component: {
30
     component: {
34
       name: Screens.Pushed,
31
       name: Screens.Pushed,
35
       options: {
32
       options: {
42
     }
39
     }
43
   });
40
   });
44
 
41
 
45
-  close = () => Navigation.mergeOptions(this, {
42
+  const close = () => Navigation.mergeOptions(props.componentId, {
46
     sideMenu: {
43
     sideMenu: {
47
       left: { visible: false }
44
       left: { visible: false }
48
     }
45
     }
49
   });
46
   });
47
+
48
+    return (
49
+      <Root componentId={props.componentId} style={{ marginTop: props.marginTop || 0 }}>
50
+        <Button label='Push' testID={LEFT_SIDE_MENU_PUSH_BTN} onPress={push} />
51
+        <Button label='Push and Close' testID={LEFT_SIDE_MENU_PUSH_AND_CLOSE_BTN} onPress={pushAndClose} />
52
+        <Button label='Close' testID={CLOSE_LEFT_SIDE_MENU_BTN} onPress={close} />
53
+      </Root>
54
+    );
50
 }
55
 }
51
 
56
 
52
 module.exports = SideMenuLeftScreen;
57
 module.exports = SideMenuLeftScreen;