feat(native): evaluate prefers-reduced-motion so motion-reduce / motion-safe work on native

The native runtime evaluated prefers-color-scheme but not prefers-reduced-motion, so Tailwind's
motion-reduce: and motion-safe: variants compiled and then never applied on a device.

devicePreference() keeps a user preference as the device reports it apart from the app's override,
which holds until it is cleared. The reduced-motion preference is built on it: the device's answer
comes from AccessibilityInfo.isReduceMotionEnabled() and follows reduceMotionChanged from import, as
colorScheme follows Appearance. React Native reads the setting only through a callback, so the
preference is unknown until it answers, and a reduced-motion query does not match before then. The
evaluator compares the prefers-reduced-motion keyword, and (prefers-reduced-motion) alone matches
reduce.

reducedMotion joins colorScheme in the API: get() returns the preference, and set() overrides it
until set(null). On web get() reads matchMedia on each call and set() changes only what get()
returns. The jest helper's reset clears an override and puts the device back to
AccessibilityInfo's answer.

Author: YevheniiKotyrlo

src/__tests__/compiler/compiler.test.tsx

@@ -232,6 +232,103 @@ test("light-dark()", () => {
   });
 });
 
+const reduce = ["=", "prefers-reduced-motion", "reduce"];
+const noPreference = ["=", "prefers-reduced-motion", "no-preference"];
+const dark = ["=", "prefers-color-scheme", "dark"];
+
+test.each([
+  ["(prefers-reduced-motion: reduce)", reduce],
+  ["(prefers-reduced-motion: no-preference)", noPreference],
+  ["(prefers-reduced-motion)", ["!!", "prefers-reduced-motion"]],
+  ["not (prefers-reduced-motion)", ["!", ["!!", "prefers-reduced-motion"]]],
+  ["not (prefers-reduced-motion: reduce)", ["!", reduce]],
+  ["not (prefers-reduced-motion: no-preference)", ["!", noPreference]],
+  ["not all and (prefers-reduced-motion: reduce)", ["!", reduce]],
+  ["(PREFERS-REDUCED-MOTION: reduce)", reduce],
+  ["( prefers-reduced-motion : reduce )", reduce],
+  ["(prefers-reduced-motion:/* a comment */reduce)", reduce],
+  ["((prefers-reduced-motion: reduce))", reduce],
+  ["screen and (prefers-reduced-motion: reduce)", reduce],
+  ["only screen and (prefers-reduced-motion: reduce)", reduce],
+  ["all and (prefers-reduced-motion: reduce)", reduce],
+  ["not screen and (prefers-reduced-motion: reduce)", ["!", reduce]],
+  ["(prefers-reduced-motion: reduce), print", reduce],
+  [
+    "(prefers-reduced-motion: reduce) and (min-width: 1px)",
+    ["&", [reduce, [">=", "width", 1]]],
+  ],
+  [
+    "(prefers-reduced-motion: reduce) and (prefers-color-scheme: dark)",
+    ["&", [reduce, dark]],
+  ],
+  [
+    "(prefers-reduced-motion: reduce) or (prefers-color-scheme: dark)",
+    ["|", [reduce, dark]],
+  ],
+  [
+    "not ((prefers-reduced-motion: reduce) and (prefers-color-scheme: dark))",
+    ["!", ["&", [reduce, dark]]],
+  ],
+  [
+    "(prefers-reduced-motion: reduce) and (not (prefers-color-scheme: dark))",
+    ["&", [reduce, ["!", dark]]],
+  ],
+  [
+    "(prefers-reduced-motion: no-preference) and (prefers-reduced-motion: reduce)",
+    ["&", [noPreference, reduce]],
+  ],
+  [
+    "(prefers-reduced-motion: reduce) and (unknown-feature)",
+    ["&", [reduce, ["!!", "unknown-feature"]]],
+  ],
+  [
+    "(prefers-reduced-motion: reduce) or (unknown-feature)",
+    ["|", [reduce, ["!!", "unknown-feature"]]],
+  ],
+])("@media %s compiles to its condition", (query, condition) => {
+  expect(
+    compile(`@media ${query} { .my-class { opacity: 0 } }`).stylesheet(),
+  ).toStrictEqual({
+    s: [["my-class", [{ s: [2, 1], m: [condition], d: [{ opacity: 0 }] }]]],
+  });
+});
+
+test("@media (prefers-reduced-motion: reduce), (prefers-color-scheme: dark) compiles a rule for each query", () => {
+  expect(
+    compile(
+      `@media (prefers-reduced-motion: reduce), (prefers-color-scheme: dark) { .my-class { opacity: 0 } }`,
+    ).stylesheet(),
+  ).toStrictEqual({
+    s: [
+      [
+        "my-class",
+        [
+          { s: [2, 1], m: [reduce], d: [{ opacity: 0 }] },
+          { s: [4, 1], m: [dark], d: [{ opacity: 0 }] },
+        ],
+      ],
+    ],
+  });
+});
+
+test("@media print and (prefers-reduced-motion: reduce) compiles to no rule", () => {
+  expect(
+    compile(
+      `@media print and (prefers-reduced-motion: reduce) { .my-class { opacity: 0 } }`,
+    ).stylesheet(),
+  ).toStrictEqual({});
+});
+
+test("@media not print and (prefers-reduced-motion: reduce) compiles to a rule with no condition", () => {
+  expect(
+    compile(
+      `@media not print and (prefers-reduced-motion: reduce) { .my-class { opacity: 0 } }`,
+    ).stylesheet(),
+  ).toStrictEqual({
+    s: [["my-class", [{ s: [2, 1], d: [{ opacity: 0 }] }]]],
+  });
+});
+
 test("media query nested in rules", () => {
   const compiled = compile(`
 .my-class {

src/__tests__/native/_reduced-motion-types.ts

@@ -0,0 +1,31 @@
+import {
+  reducedMotion as rootReducedMotion,
+  type ReducedMotionPreference,
+} from "react-native-css";
+import { reducedMotion as nativeReducedMotion } from "react-native-css/native";
+import { reducedMotion as webReducedMotion } from "react-native-css/web";
+
+// This module is checked by TypeScript and deliberately excluded from Jest.
+export const preferences: readonly (ReducedMotionPreference | undefined)[] = [
+  rootReducedMotion.get(),
+  nativeReducedMotion.get(),
+  webReducedMotion.get(),
+];
+
+// @ts-expect-error get() is undefined until the device answers.
+export const answered: ReducedMotionPreference = rootReducedMotion.get();
+
+rootReducedMotion.set("reduce");
+nativeReducedMotion.set("no-preference");
+webReducedMotion.set(null);
+
+// @ts-expect-error A preference is one of the keywords prefers-reduced-motion takes.
+rootReducedMotion.set("bogus");
+// @ts-expect-error A preference is one of the keywords prefers-reduced-motion takes, as written.
+nativeReducedMotion.set("REDUCE");
+// @ts-expect-error null, not an empty string, follows the device again.
+webReducedMotion.set("");
+// @ts-expect-error null, not undefined, follows the device again.
+nativeReducedMotion.set(undefined);
+// @ts-expect-error The preference is a keyword, not a boolean.
+webReducedMotion.set(true);

src/__tests__/native/jest-reset.test.ts

@@ -0,0 +1,24 @@
+import { reducedMotion } from "react-native-css/runtime";
+
+import { resetBetweenTests } from "../../jest/reset";
+import { deviceReducedMotion } from "../../native/reactivity";
+
+describe("the react-native-css/jest reset", () => {
+  test("clears a test's override", () => {
+    reducedMotion.set("reduce");
+    expect(reducedMotion.get()).toBe("reduce");
+
+    resetBetweenTests();
+
+    expect(reducedMotion.get()).toBe("no-preference");
+  });
+
+  test("puts a device a test changed back to AccessibilityInfo's answer", () => {
+    deviceReducedMotion.set("reduce");
+    expect(reducedMotion.get()).toBe("reduce");
+
+    resetBetweenTests();
+
+    expect(reducedMotion.get()).toBe("no-preference");
+  });
+});