refactor(rn tester app): change appearence example to hooks (#35114)

Summary:
This pull request migrates the appearance example to using React Hooks.

## Changelog
[General] [Changed] - RNTester: Migrate Appearence to hooks

Pull Request resolved: https://github.com/facebook/react-native/pull/35114

Test Plan: The animation works exactly as it did as when it was a class component

Reviewed By: cortinico

Differential Revision: D41531005

Pulled By: cipolleschi

fbshipit-source-id: a864766a3bb58a7f0c2b9c4ed8f731ee84713b26

packages/rn-tester/js/examples/Appearance/AppearanceExample.js

@@ -9,47 +9,36 @@
  */
 
 import * as React from 'react';
+import {useState, useEffect} from 'react';
 import {Appearance, Text, useColorScheme, View} from 'react-native';
 import type {AppearancePreferences} from 'react-native/Libraries/Utilities/NativeAppearance';
-import type {EventSubscription} from 'react-native/Libraries/vendor/emitter/EventEmitter';
 import {RNTesterThemeContext, themes} from '../../components/RNTesterTheme';
 
-class ColorSchemeSubscription extends React.Component<
+function ColorSchemeSubscription() {
-  {...},
+  const [colorScheme, setScheme] = useState(Appearance.getColorScheme());
-  {colorScheme: ?string, ...},
-> {
-  _subscription: ?EventSubscription;
 
-  state: {colorScheme: ?string, ...} = {
+  useEffect(() => {
-    colorScheme: Appearance.getColorScheme(),
+    const subscription = Appearance.addChangeListener(
-  };
-
-  componentDidMount() {
-    this._subscription = Appearance.addChangeListener(
       (preferences: AppearancePreferences) => {
-        const {colorScheme} = preferences;
+        const {colorScheme: scheme} = preferences;
-        this.setState({colorScheme});
+        setScheme(scheme);
       },
     );
-  }
 
-  componentWillUnmount() {
+    return () => subscription?.remove();
-    this._subscription?.remove();
+  }, [setScheme]);
-  }
 
-  render(): React.Node {
+  return (
-    return (
+    <RNTesterThemeContext.Consumer>
-      <RNTesterThemeContext.Consumer>
+      {theme => {
-        {theme => {
+        return (
-          return (
+          <ThemedContainer>
-            <ThemedContainer>
+            <ThemedText>{colorScheme}</ThemedText>
-              <ThemedText>{this.state.colorScheme}</ThemedText>
+          </ThemedContainer>
-            </ThemedContainer>
+        );
-          );
+      }}
-        }}
+    </RNTesterThemeContext.Consumer>
-      </RNTesterThemeContext.Consumer>
+  );
-    );
-  }
 }
 
 const ThemedContainer = (props: {children: React.Node}) => (
@@ -69,7 +58,7 @@ const ThemedContainer = (props: {children: React.Node}) => (
   </RNTesterThemeContext.Consumer>
 );
 
-const ThemedText = (props: {children: React.Node}) => (
+const ThemedText = (props: {children: React.Node | string}) => (
   <RNTesterThemeContext.Consumer>
     {theme => {
       return <Text style={{color: theme.LabelColor}}>{props.children}</Text>;