Change SideMenuLeftScreen to functional component (#5834)

Motivation: Try to reproduce #5833

playground/src/screens/SideMenuLeftScreen.js

@@ -1,4 +1,5 @@
 const React = require('react');
+const { useEffect } = require('react');
 const Root = require('../components/Root');
 const Button = require('../components/Button')
 const Navigation = require('../services/Navigation');
@@ -9,27 +10,23 @@ const {
   LEFT_SIDE_MENU_PUSH_AND_CLOSE_BTN
 } = require('../testIDs');
 
-class SideMenuLeftScreen extends React.Component {
-  static options() {
-    return {
-      layout: {
-        orientation: ['portrait', 'landscape']
-      }
-    };
-  }
-  render() {
-    return (
-      <Root componentId={this.props.componentId} style={{ marginTop: this.props.marginTop || 0 }}>
-        <Button label='Push' testID={LEFT_SIDE_MENU_PUSH_BTN} onPress={this.push} />
-        <Button label='Push and Close' testID={LEFT_SIDE_MENU_PUSH_AND_CLOSE_BTN} onPress={this.pushAndClose} />
-        <Button label='Close' testID={CLOSE_LEFT_SIDE_MENU_BTN} onPress={this.close} />
-      </Root>
+function SideMenuLeftScreen(props) {
+  useEffect(() => {
+    const componentDisappearListener = Navigation.events().registerComponentDidDisappearListener(
+      ({ componentId }) => {
+        if (componentId === props.componentId) {
+          console.log('RNN', `componentDisappearListener ${componentId}/${JSON.stringify(props)}`);
+        }
+      },
     );
-  }
+    return () => {
+      componentDisappearListener.remove();
+    };
+  }, []);
 
-  push = () => Navigation.push('SideMenuCenter', Screens.Pushed);
+  const push = () => Navigation.push('SideMenuCenter', Screens.Pushed);
 
-  pushAndClose = () => Navigation.push('SideMenuCenter', {
+  const pushAndClose = () => Navigation.push('SideMenuCenter', {
     component: {
       name: Screens.Pushed,
       options: {
@@ -42,11 +39,19 @@ class SideMenuLeftScreen extends React.Component {
     }
   });
 
-  close = () => Navigation.mergeOptions(this, {
+  const close = () => Navigation.mergeOptions(props.componentId, {
     sideMenu: {
       left: { visible: false }
     }
   });
+
+    return (
+      <Root componentId={props.componentId} style={{ marginTop: props.marginTop || 0 }}>
+        <Button label='Push' testID={LEFT_SIDE_MENU_PUSH_BTN} onPress={push} />
+        <Button label='Push and Close' testID={LEFT_SIDE_MENU_PUSH_AND_CLOSE_BTN} onPress={pushAndClose} />
+        <Button label='Close' testID={CLOSE_LEFT_SIDE_MENU_BTN} onPress={close} />
+      </Root>
+    );
 }
 
 module.exports = SideMenuLeftScreen;