[fix] Appearance API update

Match react-native >=0.65

Fix #2329

packages/react-native-web-docs/src/pages/docs/apis/appearance.md

@@ -10,7 +10,7 @@ eleventyNavigation:
 {% import "fragments/macros.html" as macro with context %}
 
 :::lead
-The Appearance module exposes information about the user's appearance preferences, such as their preferred color scheme (light or dark). 
+The Appearance module exposes information about the user's appearance preferences, such as their preferred color scheme (light or dark).
 :::
 
 ```js
@@ -23,6 +23,10 @@ import { Appearance } from 'react-native';
 
 ### Static methods
 
+{% call macro.prop('addChangeListener', '(listener) => { remove: () => void }') %}
+Add an event handler that is called with `{colorScheme: "dark" | "light"}` when appearance preferences change. Returns a `remove` method used to remove the change listener.
+{% endcall %}
+
 {% call macro.prop('getColorScheme', '() => ("dark" | "light")') %}
 You can use the Appearance module to determine if the user prefers a dark color scheme. Although the color scheme is available immediately, this may change (e.g. scheduled color scheme change at sunrise or sunset). Any rendering logic or styles that depend on the user preferred color scheme should try to call this function on every render, rather than caching the value.
 {% endcall %}

packages/react-native-web/src/exports/Appearance/index.js

@@ -37,7 +37,7 @@ const Appearance = {
     return query && query.matches ? 'dark' : 'light';
   },
 
-  addChangeListener(listener: AppearanceListener): void {
+  addChangeListener(listener: AppearanceListener): { remove: () => void } {
     let mappedListener = listenerMapping.get(listener);
     if (!mappedListener) {
       mappedListener = ({ matches }: MediaQueryListEvent) => {
@@ -48,16 +48,16 @@ const Appearance = {
     if (query) {
       query.addListener(mappedListener);
     }
-  },
 
-  removeChangeListener(listener: AppearanceListener): void {
+    function remove(): void {
-    const mappedListener = listenerMapping.get(listener);
+      const mappedListener = listenerMapping.get(listener);
-    if (mappedListener) {
+      if (query && mappedListener) {
-      if (query) {
         query.removeListener(mappedListener);
       }
       listenerMapping.delete(listener);
     }
+
+    return { remove };
   }
 };
 

packages/react-native-web/src/exports/useColorScheme/index.js

@@ -21,8 +21,8 @@ export default function useColorScheme(): ColorSchemeName {
     function listener(appearance) {
       setColorScheme(appearance.colorScheme);
     }
-    Appearance.addChangeListener(listener);
+    const { remove } = Appearance.addChangeListener(listener);
-    return () => Appearance.removeChangeListener(listener);
+    return remove;
   });
 
   return colorScheme;