diff --git a/src/runtime/native/__tests__/animations.test.tsx b/src/__tests__/native/animations.test.tsx
similarity index 100%
rename from src/runtime/native/__tests__/animations.test.tsx
rename to src/__tests__/native/animations.test.tsx
diff --git a/src/runtime/native/__tests__/attributes.test.tsx b/src/__tests__/native/attributes.test.tsx
similarity index 100%
rename from src/runtime/native/__tests__/attributes.test.tsx
rename to src/__tests__/native/attributes.test.tsx
diff --git a/src/runtime/native/__tests__/calc.test.tsx b/src/__tests__/native/calc.test.tsx
similarity index 100%
rename from src/runtime/native/__tests__/calc.test.tsx
rename to src/__tests__/native/calc.test.tsx
diff --git a/src/runtime/native/__tests__/colors.test.tsx b/src/__tests__/native/colors.test.tsx
similarity index 100%
rename from src/runtime/native/__tests__/colors.test.tsx
rename to src/__tests__/native/colors.test.tsx
diff --git a/src/runtime/native/__tests__/container-queries.test.tsx b/src/__tests__/native/container-queries.test.tsx
similarity index 100%
rename from src/runtime/native/__tests__/container-queries.test.tsx
rename to src/__tests__/native/container-queries.test.tsx
diff --git a/src/runtime/native/__tests__/env.test.ios.tsx b/src/__tests__/native/env.test.ios.tsx
similarity index 100%
rename from src/runtime/native/__tests__/env.test.ios.tsx
rename to src/__tests__/native/env.test.ios.tsx
diff --git a/src/runtime/native/__tests__/grouping.test.tsx b/src/__tests__/native/grouping.test.tsx
similarity index 100%
rename from src/runtime/native/__tests__/grouping.test.tsx
rename to src/__tests__/native/grouping.test.tsx
diff --git a/src/runtime/native/__tests__/keywords.test.tsx b/src/__tests__/native/keywords.test.tsx
similarity index 87%
rename from src/runtime/native/__tests__/keywords.test.tsx
rename to src/__tests__/native/keywords.test.tsx
index 3be107c1..9205f3b7 100644
--- a/src/runtime/native/__tests__/keywords.test.tsx
+++ b/src/__tests__/native/keywords.test.tsx
@@ -2,8 +2,7 @@ import { View } from "react-native";
 
 import { renderHook } from "@testing-library/react-native";
 import { registerCSS } from "react-native-css/jest";
-
-import { useNativeCss } from "../react/useNativeCss";
+import { useNativeCss } from "react-native-css/runtime/native";
 
 test("unset", () => {
   registerCSS(`.my-class { background-color: unset; }`);
diff --git a/src/runtime/native/__tests__/media-query.test.tsx b/src/__tests__/native/media-query.test.tsx
similarity index 97%
rename from src/runtime/native/__tests__/media-query.test.tsx
rename to src/__tests__/native/media-query.test.tsx
index bc52e474..179dda3f 100644
--- a/src/runtime/native/__tests__/media-query.test.tsx
+++ b/src/__tests__/native/media-query.test.tsx
@@ -3,9 +3,9 @@ import { PixelRatio } from "react-native";
 import { act, render, screen } from "@testing-library/react-native";
 import { View } from "react-native-css/components/View";
 import { registerCSS, testID } from "react-native-css/jest";
+import { colorScheme } from "react-native-css/runtime";
 
-import { colorScheme } from "../api";
-import { dimensions } from "../reactivity";
+import { dimensions } from "../../runtime/native/reactivity";
 
 jest.mock("react-native", () => {
   const RN = jest.requireActual("react-native");
@@ -105,10 +105,7 @@ test("width (range)", () => {
   });
 
   act(() => {
-    dimensions.set({
-      ...dimensions.get(),
-      width: 500,
-    });
+    dimensions.set({ ...dimensions.get(), width: 500 });
   });
 
   expect(component.props.style).toStrictEqual({
diff --git a/src/runtime/native/__tests__/pseudo-classes.test.tsx b/src/__tests__/native/pseudo-classes.test.tsx
similarity index 100%
rename from src/runtime/native/__tests__/pseudo-classes.test.tsx
rename to src/__tests__/native/pseudo-classes.test.tsx
diff --git a/src/runtime/native/__tests__/selector-prefix.test.tsx b/src/__tests__/native/selector-prefix.test.tsx
similarity index 100%
rename from src/runtime/native/__tests__/selector-prefix.test.tsx
rename to src/__tests__/native/selector-prefix.test.tsx
diff --git a/src/runtime/native/__tests__/selectors.test.tsx b/src/__tests__/native/selectors.test.tsx
similarity index 96%
rename from src/runtime/native/__tests__/selectors.test.tsx
rename to src/__tests__/native/selectors.test.tsx
index 082f4a26..92824ca4 100644
--- a/src/runtime/native/__tests__/selectors.test.tsx
+++ b/src/__tests__/native/selectors.test.tsx
@@ -1,8 +1,7 @@
 import { act, render, screen } from "@testing-library/react-native";
 import { View } from "react-native-css/components/View";
 import { registerCSS, testID } from "react-native-css/jest";
-
-import { colorScheme } from "../api";
+import { colorScheme } from "react-native-css/runtime";
 
 test.skip(":is(.dark *)", () => {
   registerCSS(`@cssInterop set darkMode class dark;
diff --git a/src/runtime/native/__tests__/specificity.test.tsx b/src/__tests__/native/specificity.test.tsx
similarity index 98%
rename from src/runtime/native/__tests__/specificity.test.tsx
rename to src/__tests__/native/specificity.test.tsx
index 179c93f0..3432a2fe 100644
--- a/src/runtime/native/__tests__/specificity.test.tsx
+++ b/src/__tests__/native/specificity.test.tsx
@@ -3,8 +3,7 @@ import { StyleSheet, type ViewProps } from "react-native";
 import { fireEvent, render } from "@testing-library/react-native";
 import { Text } from "react-native-css/components/Text";
 import { registerCSS, testID } from "react-native-css/jest";
-
-import { styled } from "../api";
+import { styled } from "react-native-css/runtime";
 
 test("inline styles", () => {
   registerCSS(`.red { background-color: red; }`);
diff --git a/src/runtime/native/__tests__/style-updating.test.tsx b/src/__tests__/native/style-updating.test.tsx
similarity index 100%
rename from src/runtime/native/__tests__/style-updating.test.tsx
rename to src/__tests__/native/style-updating.test.tsx
diff --git a/src/runtime/native/__tests__/styled.test.ios.tsx b/src/__tests__/native/styled.test.ios.tsx
similarity index 98%
rename from src/runtime/native/__tests__/styled.test.ios.tsx
rename to src/__tests__/native/styled.test.ios.tsx
index 39179955..79ea21fd 100644
--- a/src/runtime/native/__tests__/styled.test.ios.tsx
+++ b/src/__tests__/native/styled.test.ios.tsx
@@ -2,8 +2,7 @@ import { View } from "react-native";
 
 import { render, screen } from "@testing-library/react-native";
 import { registerCSS, testID } from "react-native-css/jest";
-
-import { styled } from "../api";
+import { styled } from "react-native-css/runtime";
 
 const children = undefined;
 
diff --git a/src/runtime/native/__tests__/text-shadow.test.ios.tsx b/src/__tests__/native/text-shadow.test.ios.tsx
similarity index 100%
rename from src/runtime/native/__tests__/text-shadow.test.ios.tsx
rename to src/__tests__/native/text-shadow.test.ios.tsx
diff --git a/src/runtime/native/__tests__/transform.test.tsx b/src/__tests__/native/transform.test.tsx
similarity index 100%
rename from src/runtime/native/__tests__/transform.test.tsx
rename to src/__tests__/native/transform.test.tsx
diff --git a/src/runtime/native/__tests__/transitions.test.tsx b/src/__tests__/native/transitions.test.tsx
similarity index 100%
rename from src/runtime/native/__tests__/transitions.test.tsx
rename to src/__tests__/native/transitions.test.tsx
diff --git a/src/runtime/native/__tests__/units.test.tsx b/src/__tests__/native/units.test.tsx
similarity index 96%
rename from src/runtime/native/__tests__/units.test.tsx
rename to src/__tests__/native/units.test.tsx
index 9aaae0fa..f7afcc75 100644
--- a/src/runtime/native/__tests__/units.test.tsx
+++ b/src/__tests__/native/units.test.tsx
@@ -2,8 +2,8 @@ import { View } from "react-native";
 
 import { act, renderHook } from "@testing-library/react-native";
 import { registerCSS } from "react-native-css/jest";
+import { useNativeCss } from "react-native-css/runtime/native";
 
-import { useNativeCss } from "../react/useNativeCss";
 import {
   dimensions,
   rem,
@@ -11,8 +11,8 @@ import {
   VariableContext,
   vh,
   vw,
-} from "../reactivity";
-import { emVariableName } from "../styles/constants";
+} from "../../runtime/native/reactivity";
+import { emVariableName } from "../../runtime/native/styles/constants";
 
 test("px", () => {
   registerCSS(`.my-class { width: 10px; }`);
diff --git a/src/runtime/native/__tests__/upgrading.test.tsx b/src/__tests__/native/upgrading.test.tsx
similarity index 100%
rename from src/runtime/native/__tests__/upgrading.test.tsx
rename to src/__tests__/native/upgrading.test.tsx
diff --git a/src/runtime/native/__tests__/variables.test.tsx b/src/__tests__/native/variables.test.tsx
similarity index 99%
rename from src/runtime/native/__tests__/variables.test.tsx
rename to src/__tests__/native/variables.test.tsx
index 24314fec..a824f800 100644
--- a/src/runtime/native/__tests__/variables.test.tsx
+++ b/src/__tests__/native/variables.test.tsx
@@ -4,8 +4,7 @@ import type { ViewProps } from "react-native";
 import { render, screen } from "@testing-library/react-native";
 import { View } from "react-native-css/components/View";
 import { registerCSS, testID } from "react-native-css/jest";
-
-import { styled } from "../api";
+import { styled } from "react-native-css/runtime";
 
 test("inline variable", () => {
   registerCSS(`.my-class { width: var(--my-var); --my-var: 10px; }`);
diff --git a/src/runtime/native/__tests__/vars.test.tsx b/src/__tests__/native/vars.test.tsx
similarity index 93%
rename from src/runtime/native/__tests__/vars.test.tsx
rename to src/__tests__/native/vars.test.tsx
index 5708f285..19df5490 100644
--- a/src/runtime/native/__tests__/vars.test.tsx
+++ b/src/__tests__/native/vars.test.tsx
@@ -1,8 +1,7 @@
 import { render, screen } from "@testing-library/react-native";
 import { View } from "react-native-css/components/View";
 import { registerCSS, testID } from "react-native-css/jest";
-
-import { vars } from "../api";
+import { vars } from "react-native-css/runtime";
 
 test("vars", () => {
   registerCSS(
diff --git a/src/__tests__/vendor/tailwind/_tailwind.tsx b/src/__tests__/vendor/tailwind/_tailwind.tsx
index d7a1395f..d1514fab 100644
--- a/src/__tests__/vendor/tailwind/_tailwind.tsx
+++ b/src/__tests__/vendor/tailwind/_tailwind.tsx
@@ -9,11 +9,10 @@ import {
   type RenderOptions,
 } from "@testing-library/react-native";
 import postcss from "postcss";
+import type { compile } from "react-native-css/compiler";
+import { View } from "react-native-css/components";
 import { registerCSS } from "react-native-css/jest";
 
-import type { compile } from "../../../compiler";
-import { View } from "../../../components";
-
 const testID = "tailwind";
 
 export type NativewindRenderOptions = RenderOptions & {
diff --git a/src/jest/index.ts b/src/jest/index.ts
index e6af2a0e..53a9df73 100644
--- a/src/jest/index.ts
+++ b/src/jest/index.ts
@@ -2,9 +2,9 @@ import { Appearance, Dimensions } from "react-native";
 
 import { inspect } from "node:util";
 
+import { compile, type CompilerOptions } from "react-native-css/compiler";
 import { StyleCollection } from "react-native-css/style-collection";
 
-import { compile, type CompilerOptions } from "../compiler";
 import { colorScheme, dimensions, rem } from "../runtime/native/reactivity";
 
 declare global {
diff --git a/src/runtime/native/api.ts b/src/runtime/native/api.ts
index 9ffc619f..2c877204 100644
--- a/src/runtime/native/api.ts
+++ b/src/runtime/native/api.ts
@@ -23,6 +23,8 @@ import { resolveValue } from "./styles/resolve";
 
 export { StyleCollection } from "react-native-css/style-collection";
 
+export { useNativeCss };
+
 /**
  * Generates a new Higher-Order component the wraps the base component and applies the styles.
  * This is added to the `interopComponents` map so that it can be used in the `wrapJSX` function
diff --git a/src/runtime/native/reactivity.ts b/src/runtime/native/reactivity.ts
index cd2b8700..ea122bbe 100644
--- a/src/runtime/native/reactivity.ts
+++ b/src/runtime/native/reactivity.ts
@@ -209,6 +209,18 @@ export const vh = observable<number>(
   (read, value) => value ?? read(dimensions)?.height,
 );
 
+Dimensions.addEventListener("change", ({ window }) => {
+  observableBatch.current = new Set();
+  vw.set(window.width);
+  vh.set(window.height);
+
+  for (const effect of observableBatch.current) {
+    effect.run();
+  }
+
+  observableBatch.current = undefined;
+});
+
 /** Color Scheme **************************************************************/
 
 export const colorScheme = observable<ColorSchemeName>(
diff --git a/src/runtime/web/api.ts b/src/runtime/web/api.ts
index 7ba33d90..65935ac5 100644
--- a/src/runtime/web/api.ts
+++ b/src/runtime/web/api.ts
@@ -66,7 +66,7 @@ export const colorScheme: ColorScheme = {
   },
 };
 
-export function vars(variables: Record<`--${string}`, string | number>) {
+export function vars(variables: Record<string, string | number>) {
   const $variables: Record<string, string> = {};
 
   for (const [key, value] of Object.entries(variables)) {
diff --git a/src/style-collection/index.ts b/src/style-collection/index.ts
index 844f6ca6..a82fc0bd 100644
--- a/src/style-collection/index.ts
+++ b/src/style-collection/index.ts
@@ -2,7 +2,8 @@ import type {
   Animation_V2,
   ReactNativeCssStyleSheet,
   StyleRuleSet,
-} from "../compiler";
+} from "react-native-css/compiler";
+
 import { DEFAULT_CONTAINER_NAME } from "../runtime/native/conditions/container-query";
 import {
   family,