fix initial value of app color scheme

jest.config.json

@@ -3,5 +3,5 @@
   "transform": {
     "^.+\\.tsx?$": "ts-jest"
   },
-  "testRegex": "__tests__/.*spec\\.ts$"
+  "testRegex": "__tests__/.*spec\\.tsx?$"
 }

package.json

@@ -53,6 +53,7 @@
     "@types/jest": "^29.5.11",
     "@types/react": "^18.2.45",
     "@types/react-native": "^0.72.8",
+    "@types/react-test-renderer": "^17.0.0",
     "@types/tailwindcss": "^3.1.0",
     "@typescript-eslint/eslint-plugin": "^6.15.0",
     "@typescript-eslint/parser": "^6.15.0",
@@ -65,6 +66,7 @@
     "prettier": "^3.1.1",
     "react": "^17.0.2",
     "react-native": "^0.73.1",
+    "react-test-renderer": "^17.0.0",
     "ts-jest": "^29.1.1",
     "typescript": "^5.3.3"
   },

src/__tests__/color-scheme.spec.tsx

@@ -0,0 +1,56 @@
+import renderer from 'react-test-renderer';
+import rn from 'react-native';
+import { describe, it, expect } from '@jest/globals';
+import React from 'react';
+import type { RnColorScheme, TailwindFn } from '../';
+import { create, useDeviceContext, useAppColorScheme } from '../';
+
+jest.mock(`react-native`, () => ({
+  Platform: { OS: `ios` },
+  Appearance: { getColorScheme: () => `light` },
+  useColorScheme: () => `light`,
+  useWindowDimensions: () => ({ width: 320, height: 640, fontScale: 1, scale: 2 }),
+}));
+
+const Test: React.FC<{ tw: TailwindFn; initial?: RnColorScheme }> = ({ tw, initial }) => {
+  useDeviceContext(tw, { withDeviceColorScheme: true });
+  const [colorScheme] = useAppColorScheme(tw, initial);
+  return (
+    <>
+      {String(colorScheme)}
+      {tw.prefixMatch(`dark`) ? `match:dark` : `no-match:dark`}
+    </>
+  );
+};
+
+describe(`useAppColorScheme()`, () => {
+  it(`should initialize to ambient color scheme, if no initializer`, () => {
+    rn.Appearance.getColorScheme = () => `dark`;
+
+    let component = renderer.create(<Test tw={create()} />);
+    expect(component.toJSON()).toEqual([`dark`, `match:dark`]);
+
+    rn.Appearance.getColorScheme = () => `light`;
+    component = renderer.create(<Test tw={create()} />);
+    expect(component.toJSON()).toEqual([`light`, `no-match:dark`]);
+
+    rn.Appearance.getColorScheme = () => null;
+    component = renderer.create(<Test tw={create()} />);
+    expect(component.toJSON()).toEqual([`null`, `no-match:dark`]);
+
+    rn.Appearance.getColorScheme = () => undefined;
+    component = renderer.create(<Test tw={create()} />);
+    expect(component.toJSON()).toEqual([`undefined`, `no-match:dark`]);
+  });
+
+  it(`should initialize to explicitly passed color scheme when initializer provided`, () => {
+    rn.Appearance.getColorScheme = () => `dark`;
+
+    let component = renderer.create(<Test tw={create()} initial="light" />);
+    expect(component.toJSON()).toEqual([`light`, `no-match:dark`]);
+
+    rn.Appearance.getColorScheme = () => `light`;
+    component = renderer.create(<Test tw={create()} initial="dark" />);
+    expect(component.toJSON()).toEqual([`dark`, `match:dark`]);
+  });
+});

src/hooks.ts

@@ -28,9 +28,12 @@ export function useAppColorScheme(
   toggleColorScheme: () => void,
   setColorScheme: (colorScheme: RnColorScheme) => void,
 ] {
-  const [colorScheme, setColorScheme] = useState<RnColorScheme>(
-    initialValue ?? Appearance.getColorScheme(),
-  );
+  const [colorScheme, setColorScheme] = useState(() => {
+    const init = initialValue ?? Appearance.getColorScheme();
+    tw.setColorScheme(init);
+    return init;
+  });
+
   return [
     colorScheme,
     () => {

tsconfig.json

@@ -10,7 +10,8 @@
     "lib": ["ES2019"],
     "target": "ES2019",
     "declaration": true,
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "jsx": "react"
   },
   "exclude": ["./dist", "**/*.spec.ts"]
 }