Skip to content

Instantly share code, notes, and snippets.

@mmazzarolo
Created February 4, 2023 13:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mmazzarolo/95568cf90bf4c78f409e8131bc1d34b0 to your computer and use it in GitHub Desktop.
Save mmazzarolo/95568cf90bf4c78f409e8131bc1d34b0 to your computer and use it in GitHub Desktop.
Fix Nativewind 2.0.11 stale `colorScheme`
diff --git a/node_modules/nativewind/dist/style-sheet/color-scheme.js b/node_modules/nativewind/dist/style-sheet/color-scheme.js
index c08e40b..0505525 100644
--- a/node_modules/nativewind/dist/style-sheet/color-scheme.js
+++ b/node_modules/nativewind/dist/style-sheet/color-scheme.js
@@ -7,6 +7,16 @@ class ColorSchemeStore {
this.colorSchemeListeners = new Set();
this.colorScheme = react_native_1.Appearance.getColorScheme() || "light";
this.colorSchemeSystem = "system";
+ react_native_1.Appearance.addChangeListener(({ colorScheme }) => {
+ if (this.colorSchemeSystem === "system") {
+ const oldColorScheme = this.colorScheme;
+ this.colorScheme = colorScheme || "light";
+ if (oldColorScheme !== this.colorScheme) {
+ this.notifyMedia(["colorScheme"]);
+ this.notifyColorScheme();
+ }
+ }
+ });
this.subscribeColorScheme = (listener) => {
this.colorSchemeListeners.add(listener);
return () => this.colorSchemeListeners.delete(listener);
diff --git a/node_modules/nativewind/dist/style-sheet/index.d.ts b/node_modules/nativewind/dist/style-sheet/index.d.ts
index 72d8ec9..18cedac 100644
--- a/node_modules/nativewind/dist/style-sheet/index.d.ts
+++ b/node_modules/nativewind/dist/style-sheet/index.d.ts
@@ -17,6 +17,7 @@ export declare const NativeWindStyleSheet: {
default?: "native" | "css" | undefined;
}) => void;
setColorScheme: (colorSchemeSystem: import("./color-scheme").ColorSchemeSystem) => void;
+ getColorScheme: () => import("./color-scheme").ColorSchemeName;
platformSelect: {
<T>(specifics: ({
ios?: T | undefined;
diff --git a/node_modules/nativewind/dist/style-sheet/index.js b/node_modules/nativewind/dist/style-sheet/index.js
index 1990a7a..b34b233 100644
--- a/node_modules/nativewind/dist/style-sheet/index.js
+++ b/node_modules/nativewind/dist/style-sheet/index.js
@@ -13,6 +13,7 @@ exports.NativeWindStyleSheet = {
setPlatform: runtime.setPlatform.bind(runtime),
setOutput: runtime.setOutput.bind(runtime),
setColorScheme: runtime.setColorScheme.bind(runtime),
+ getColorScheme: runtime.getColorScheme.bind(runtime),
platformSelect: runtime.platformSelect.bind(runtime),
platformColor: runtime.platformColor.bind(runtime),
hairlineWidth: runtime.hairlineWidth.bind(runtime),
diff --git a/node_modules/nativewind/dist/use-color-scheme.d.ts b/node_modules/nativewind/dist/use-color-scheme.d.ts
index d7f7cab..19f7eba 100644
--- a/node_modules/nativewind/dist/use-color-scheme.d.ts
+++ b/node_modules/nativewind/dist/use-color-scheme.d.ts
@@ -1,5 +1,6 @@
export declare function useColorScheme(): {
colorScheme: import("./style-sheet/color-scheme").ColorSchemeName;
+ getColorScheme: () => import("./style-sheet/color-scheme").ColorSchemeName;
setColorScheme: (colorSchemeSystem: import("./style-sheet/color-scheme").ColorSchemeSystem) => void;
toggleColorScheme: () => void;
};
diff --git a/node_modules/nativewind/dist/use-color-scheme.js b/node_modules/nativewind/dist/use-color-scheme.js
index a64178b..b2fb438 100644
--- a/node_modules/nativewind/dist/use-color-scheme.js
+++ b/node_modules/nativewind/dist/use-color-scheme.js
@@ -9,6 +9,7 @@ function useColorScheme() {
const colorScheme = (0, shim_1.useSyncExternalStore)(store.subscribeColorScheme, store.getColorScheme);
return {
colorScheme,
+ getColorScheme: store.getColorScheme,
setColorScheme: store.setColorScheme,
toggleColorScheme: store.toggleColorScheme,
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment