iOS: Add Appearance TurboModule, useColorScheme hook [DO NOT MERGE]

Libraries/FBReactNativeSpec/FBReactNativeSpec/FBReactNativeSpec-generated.mm

@@ -448,6 +448,46 @@ + (RCTManagedPointer *)JS_NativeAppState_SpecGetCurrentAppStateSuccessAppState:(
 
 
 
+    }
+
+  } // namespace react
+} // namespace facebook
+@implementation RCTCxxConvert (NativeAppearance_AppearancePreferences)
++ (RCTManagedPointer *)JS_NativeAppearance_AppearancePreferences:(id)json
+{
+  return facebook::react::managedPointer<JS::NativeAppearance::AppearancePreferences>(json);
+}
+@end
+namespace facebook {
+  namespace react {
+
+
+    static facebook::jsi::Value __hostFunction_NativeAppearanceSpecJSI_getPreferences(facebook::jsi::Runtime& rt, TurboModule &turboModule, const facebook::jsi::Value* args, size_t count) {
+      return static_cast<ObjCTurboModule&>(turboModule).invokeObjCMethod(rt, ObjectKind, "getPreferences", @selector(getPreferences), args, count);
+    }
+
+    static facebook::jsi::Value __hostFunction_NativeAppearanceSpecJSI_addListener(facebook::jsi::Runtime& rt, TurboModule &turboModule, const facebook::jsi::Value* args, size_t count) {
+      return static_cast<ObjCTurboModule&>(turboModule).invokeObjCMethod(rt, VoidKind, "addListener", @selector(addListener:), args, count);
+    }
+
+    static facebook::jsi::Value __hostFunction_NativeAppearanceSpecJSI_removeListeners(facebook::jsi::Runtime& rt, TurboModule &turboModule, const facebook::jsi::Value* args, size_t count) {
+      return static_cast<ObjCTurboModule&>(turboModule).invokeObjCMethod(rt, VoidKind, "removeListeners", @selector(removeListeners:), args, count);
+    }
+
+
+    NativeAppearanceSpecJSI::NativeAppearanceSpecJSI(id<RCTTurboModule> instance, std::shared_ptr<JSCallInvoker> jsInvoker)
+      : ObjCTurboModule("Appearance", instance, jsInvoker) {
+
+        methodMap_["getPreferences"] = MethodMetadata {0, __hostFunction_NativeAppearanceSpecJSI_getPreferences};
+
+
+        methodMap_["addListener"] = MethodMetadata {1, __hostFunction_NativeAppearanceSpecJSI_addListener};
+
+
+        methodMap_["removeListeners"] = MethodMetadata {1, __hostFunction_NativeAppearanceSpecJSI_removeListeners};
+
+
+
     }
 
   } // namespace react

Libraries/FBReactNativeSpec/FBReactNativeSpec/FBReactNativeSpec.h

@@ -433,6 +433,42 @@ namespace facebook {
   } // namespace react
 } // namespace facebook
 
+namespace JS {
+  namespace NativeAppearance {
+    struct AppearancePreferences {
+      NSString *colorScheme() const;
+
+      AppearancePreferences(NSDictionary *const v) : _v(v) {}
+    private:
+      NSDictionary *_v;
+    };
+  }
+}
+
+@interface RCTCxxConvert (NativeAppearance_AppearancePreferences)
++ (RCTManagedPointer *)JS_NativeAppearance_AppearancePreferences:(id)json;
+@end
+@protocol NativeAppearanceSpec <RCTBridgeModule, RCTTurboModule>
+
+- (NSDictionary *)getPreferences;
+- (void)addListener:(NSString *)eventName;
+- (void)removeListeners:(double)count;
+
+@end
+namespace facebook {
+  namespace react {
+    /**
+     * ObjC++ class for module 'Appearance'
+     */
+
+    class JSI_EXPORT NativeAppearanceSpecJSI : public ObjCTurboModule {
+    public:
+      NativeAppearanceSpecJSI(id<RCTTurboModule> instance, std::shared_ptr<JSCallInvoker> jsInvoker);
+
+    };
+  } // namespace react
+} // namespace facebook
+
 namespace JS {
   namespace NativeAsyncStorage {
     struct SpecMultiGetCallbackErrorsElement {
@@ -2553,6 +2589,11 @@ inline JS::NativeAppState::Constants::Builder::Builder(const Input i) : _factory
 inline JS::NativeAppState::Constants::Builder::Builder(Constants i) : _factory(^{
   return i.unsafeRawValue();
 }) {}
+inline NSString *JS::NativeAppearance::AppearancePreferences::colorScheme() const
+{
+  id const p = _v[@"colorScheme"];
+  return RCTBridgingToString(p);
+}
 inline NSString *JS::NativeAsyncStorage::SpecMultiGetCallbackErrorsElement::message() const
 {
   id const p = _v[@"message"];

Libraries/Utilities/Appearance.js

@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+import EventEmitter from '../vendor/emitter/EventEmitter';
+import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
+import NativeAppearance, {type AppearancePreferences} from './NativeAppearance';
+import invariant from 'invariant';
+
+const COLOR_SCHEME_NAME = {
+  light: 'light',
+  dark: 'dark',
+  noPreference: 'no-preference',
+};
+type ColorSchemeName = $Keys<{
+  light: string,
+  dark: string,
+  noPreference: string,
+}>;
+type AppearanceListener = (preferences: AppearancePreferences) => void;
+
+const eventEmitter = new EventEmitter();
+
+let appearancePreferencesInitialized = false;
+let appearancePreferences: AppearancePreferences;
+
+class Appearance {
+  /**
+   * Note: Although appearance is available immediately, it may change (e.g
+   * Dark Mode) so any rendering logic or styles that depend on this should try
+   * to call this function on every render, rather than caching the value (for
+   * example, using inline styles rather than setting a value in a
+   * `StyleSheet`).
+   *
+   * Example: `const colorScheme = Appearance.get('colorScheme');`
+   *
+   * @param {string} preference Name of preference (e.g. 'colorScheme').
+   * @returns {ColorSchemeName} Value for the preference.
+   */
+  static get(preference: string): ColorSchemeName {
+    invariant(
+      appearancePreferences[preference],
+      'No preference set for key ' + preference,
+    );
+    return appearancePreferences[preference];
+  }
+
+  /**
+   * This should only be called from native code by sending the
+   * appearanceChanged event.
+   *
+   * @param {object} appearancePreferences Simple string-keyed object of
+   * appearance preferences to set.
+   */
+  static set(preferences: AppearancePreferences): void {
+    let {colorScheme} = preferences;
+    appearancePreferences = {colorScheme};
+
+    if (appearancePreferencesInitialized) {
+      // Don't fire 'change' the first time the dimensions are set.
+      eventEmitter.emit('change', preferences);
+    } else {
+      appearancePreferencesInitialized = true;
+    }
+  }
+
+  /**
+   * Add an event handler that is fired when appearance preferences change.
+   */
+  static addChangeListener(listener: AppearanceListener): void {
+    eventEmitter.addListener('change', listener);
+  }
+
+  /**
+   * Remove an event handler.
+   */
+  static removeChangeListener(listener: AppearanceListener): void {
+    eventEmitter.removeListener('change', listener);
+  }
+}
+
+if (NativeAppearance) {
+  const nativeEventEmitter = new NativeEventEmitter(NativeAppearance);
+  // Subscribe before calling to make sure we don't miss any updates in between.
+  nativeEventEmitter.addListener(
+    'appearanceChanged',
+    (newAppearance: AppearancePreferences) => {
+      Appearance.set(newAppearance);
+    },
+  );
+  Appearance.set(NativeAppearance.getPreferences());
+} else {
+  Appearance.set({colorScheme: 'no-preference'});
+}
+
+module.exports = Appearance;

Libraries/Utilities/NativeAppearance.js

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+'use strict';
+
+import type {TurboModule} from '../TurboModule/RCTExport';
+import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
+
+export type AppearancePreferences = {|
+  colorScheme?: string,
+|};
+
+export interface Spec extends TurboModule {
+  +getPreferences: () => AppearancePreferences;
+
+  // RCTEventEmitter
+  +addListener: (eventName: string) => void;
+  +removeListeners: (count: number) => void;
+}
+
+export default (TurboModuleRegistry.get<Spec>('Appearance'): ?Spec);

Libraries/Utilities/useColorScheme.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+import {useMemo} from 'react';
+import {useSubscription} from 'use-subscription';
+import Appearance from './Appearance';
+
+export default function useColorScheme() {
+  const subscription = useMemo(
+    () => ({
+      getCurrentValue: () => Appearance.get('colorScheme'),
+      subscribe: callback => {
+        Appearance.addChangeListener(callback);
+        return () => Appearance.removeChangeListener(callback);
+      },
+    }),
+    [],
+  );
+
+  return useSubscription(subscription);
+}

Libraries/react-native/react-native-implementation.js

@@ -165,6 +165,9 @@ module.exports = {
   get Animated() {
     return require('../Animated/src/Animated');
   },
+  get Appearance() {
+    return require('../Utilities/Appearance');
+  },
   get AppRegistry() {
     return require('../ReactNative/AppRegistry');
   },
@@ -299,6 +302,9 @@ module.exports = {
   get unstable_batchedUpdates() {
     return require('../Renderer/shims/ReactNative').unstable_batchedUpdates;
   },
+  get useColorScheme() {
+    return require('../Utilities/useColorScheme').default;
+  },
   get useWindowDimensions() {
     return require('../Utilities/useWindowDimensions').default;
   },