From 5c1b5cfad2682dd05253fd1f511e07776cb200f4 Mon Sep 17 00:00:00 2001
From: Grant Sander <gksander93@gmail.com>
Date: Wed, 6 Jul 2022 14:24:23 -0400
Subject: [PATCH] [fix] Appearance API update

Match react-native >=0.65

Fix #2329
---
 .../src/pages/docs/apis/appearance.md                |  6 +++++-
 .../react-native-web/src/exports/Appearance/index.js | 12 ++++++------
 .../src/exports/useColorScheme/index.js              |  4 ++--
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/react-native-web-docs/src/pages/docs/apis/appearance.md b/packages/react-native-web-docs/src/pages/docs/apis/appearance.md
index efffaa86..4afb93cf 100644
--- a/packages/react-native-web-docs/src/pages/docs/apis/appearance.md
+++ b/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 %}
diff --git a/packages/react-native-web/src/exports/Appearance/index.js b/packages/react-native-web/src/exports/Appearance/index.js
index c6f14248..67a8c61c 100644
--- a/packages/react-native-web/src/exports/Appearance/index.js
+++ b/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 {
-    const mappedListener = listenerMapping.get(listener);
-    if (mappedListener) {
-      if (query) {
+    function remove(): void {
+      const mappedListener = listenerMapping.get(listener);
+      if (query && mappedListener) {
         query.removeListener(mappedListener);
       }
       listenerMapping.delete(listener);
     }
+
+    return { remove };
   }
 };
 
diff --git a/packages/react-native-web/src/exports/useColorScheme/index.js b/packages/react-native-web/src/exports/useColorScheme/index.js
index 6e55736b..2e70d030 100644
--- a/packages/react-native-web/src/exports/useColorScheme/index.js
+++ b/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);
-    return () => Appearance.removeChangeListener(listener);
+    const { remove } = Appearance.addChangeListener(listener);
+    return remove;
   });
 
   return colorScheme;