Migrate rn-tester/js/examples/OrientationChange/OrientationChangeExam…

…ple.js to function components (facebook#48643)

Summary:

As per title.

Changelog: [Internal]

Reviewed By: christophpurrer

Differential Revision: D68095232

packages/rn-tester/js/examples/OrientationChange/OrientationChangeExample.js

@@ -10,51 +10,41 @@
 
 import RNTesterText from '../../components/RNTesterText';
 import React from 'react';
+import {useEffect, useState} from 'react';
 import {DeviceEventEmitter, View} from 'react-native';
-import {type EventSubscription} from 'react-native/Libraries/vendor/emitter/EventEmitter';
 
-class OrientationChangeExample extends React.Component<{...}, $FlowFixMeState> {
-  _orientationSubscription: EventSubscription;
-
-  state:
-    | any
-    | {
-        currentOrientation: string,
-        isLandscape: boolean,
-        orientationDegrees: number,
-      } = {
+const OrientationChangeExample = (): React.Node => {
+  const [state, setState] = useState({
     currentOrientation: '',
     orientationDegrees: 0,
     isLandscape: false,
-  };
-
-  componentDidMount() {
-    this._orientationSubscription = DeviceEventEmitter.addListener(
+  });
+
+  useEffect(() => {
+    const onOrientationChange = (orientation: Object) => {
+      setState({
+        currentOrientation: orientation.name,
+        orientationDegrees: orientation.rotationDegrees,
+        isLandscape: orientation.isLandscape,
+      });
+    };
+
+    const orientationSubscription = DeviceEventEmitter.addListener(
       'namedOrientationDidChange',
-      this._onOrientationChange,
+      onOrientationChange,
     );
-  }
-
-  componentWillUnmount() {
-    this._orientationSubscription.remove();
-  }
 
-  _onOrientationChange = (orientation: Object) => {
-    this.setState({
-      currentOrientation: orientation.name,
-      orientationDegrees: orientation.rotationDegrees,
-      isLandscape: orientation.isLandscape,
-    });
-  };
-
-  render(): React.Node {
-    return (
-      <View>
-        <RNTesterText>{JSON.stringify(this.state)}</RNTesterText>
-      </View>
-    );
-  }
-}
+    return () => {
+      orientationSubscription.remove();
+    };
+  }, []);
+
+  return (
+    <View>
+      <RNTesterText>{JSON.stringify(state)}</RNTesterText>
+    </View>
+  );
+};
 
 exports.title = 'OrientationChangeExample';
 exports.category = 'Basic';