diff --git a/example/src/App.tsx b/example/src/App.tsx
index 8695ee0..10d1b74 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -1,13 +1,24 @@
-import { Text, View } from "react-native";
+import { View as RNView } from "react-native";
+
+import { styled, VariableContextProvider } from "react-native-css";
+import { View } from "react-native-css/components";
 
 import "../global.css";
 
+const CustomView = styled(RNView, { className: "style" });
+
 export default function App() {
   return (
-    <>
-      <View className="justify-center items-center h-full">
-        <Text className="text-red-500">Test Component</Text>
-      </View>
-    </>
+    <View className="flex-1 items-center justify-center">
+      <VariableContextProvider
+        value={{
+          "--custom": "pink",
+        }}
+      >
+        <View className="bg-[var(--custom,purple)] w-10 h-10" />
+
+        <CustomView className="bg-[var(--custom,purple)] w-10 h-10" />
+      </VariableContextProvider>
+    </View>
   );
 }
diff --git a/src/__tests__/native/units.test.tsx b/src/__tests__/native/units.test.tsx
index 7793c4e..fa0f583 100644
--- a/src/__tests__/native/units.test.tsx
+++ b/src/__tests__/native/units.test.tsx
@@ -3,11 +3,11 @@ 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 { VariableContext } from "react-native-css/style-collection";
 
 import {
   dimensions,
   VAR_SYMBOL,
-  VariableContext,
   vh,
   vw,
 } from "../../runtime/native/reactivity";
diff --git a/src/__tests__/native/variables.test.tsx b/src/__tests__/native/variables.test.tsx
index 4897146..e61340b 100644
--- a/src/__tests__/native/variables.test.tsx
+++ b/src/__tests__/native/variables.test.tsx
@@ -2,9 +2,9 @@ import { memo, useEffect } from "react";
 import type { ViewProps } from "react-native";
 
 import { render, screen } from "@testing-library/react-native";
+import { styled, VariableContextProvider } from "react-native-css";
 import { View } from "react-native-css/components/View";
 import { registerCSS, testID } from "react-native-css/jest";
-import { styled, VariableContextProvider } from "react-native-css/runtime";
 
 test("inline variable", () => {
   registerCSS(`.my-class { width: var(--my-var); --my-var: 10px; }`);
diff --git a/src/components/react-native-safe-area-context.native.tsx b/src/components/react-native-safe-area-context.native.tsx
index 14d6e00..424e042 100644
--- a/src/components/react-native-safe-area-context.native.tsx
+++ b/src/components/react-native-safe-area-context.native.tsx
@@ -1,13 +1,12 @@
 import { useContext, useMemo, type PropsWithChildren } from "react";
 
+import { VariableContext } from "react-native-css/style-collection";
 import {
   SafeAreaProvider as OriginalSafeAreaProvider,
   useSafeAreaInsets,
   type SafeAreaProviderProps,
 } from "react-native-safe-area-context";
 
-import { VariableContext } from "../runtime/native/reactivity";
-
 export * from "react-native-safe-area-context";
 
 export function SafeAreaProvider({
diff --git a/src/runtime/native/api.tsx b/src/runtime/native/api.tsx
index 689d49f..a9a7ac0 100644
--- a/src/runtime/native/api.tsx
+++ b/src/runtime/native/api.tsx
@@ -2,6 +2,8 @@
 import { useContext, useMemo, useState, type PropsWithChildren } from "react";
 import { Appearance } from "react-native";
 
+import { VariableContext } from "react-native-css/style-collection";
+
 import type { StyleDescriptor } from "../../compiler";
 import type {
   ColorScheme,
@@ -15,14 +17,16 @@ import { usePassthrough } from "./react/usePassthrough";
 import {
   colorScheme as colorSchemeObs,
   VAR_SYMBOL,
-  VariableContext,
   type Effect,
   type Getter,
   type VariableContextValue,
 } from "./reactivity";
 import { resolveValue } from "./styles/resolve";
 
-export { StyleCollection } from "react-native-css/style-collection";
+export {
+  StyleCollection,
+  VariableContext,
+} from "react-native-css/style-collection";
 
 export { useNativeCss };
 
diff --git a/src/runtime/native/react/useNativeCss.ts b/src/runtime/native/react/useNativeCss.ts
index 9458841..7d6e2f4 100644
--- a/src/runtime/native/react/useNativeCss.ts
+++ b/src/runtime/native/react/useNativeCss.ts
@@ -9,12 +9,13 @@ import {
 } from "react";
 import { Pressable, View } from "react-native";
 
+import { VariableContext } from "react-native-css/style-collection";
+
 import type { StyledConfiguration } from "../../runtime.types";
 import { testGuards, type RenderGuard } from "../conditions/guards";
 import {
   cleanupEffect,
   ContainerContext,
-  VariableContext,
   type ContainerContextValue,
   type Effect,
   type Getter,
diff --git a/src/runtime/native/reactivity.ts b/src/runtime/native/reactivity.ts
index 483cdaf..ccc11fc 100644
--- a/src/runtime/native/reactivity.ts
+++ b/src/runtime/native/reactivity.ts
@@ -181,13 +181,10 @@ export function weakFamily<Key extends WeakKey, Args = undefined, Result = Key>(
 
 /********************************* Variables **********************************/
 
-export const VAR_SYMBOL = Symbol("react-native-css.var");
+export const VAR_SYMBOL = Symbol.for("react-native-css.var");
 export type VariableContextValue = Record<string, StyleDescriptor> & {
   [VAR_SYMBOL]: true;
 };
-export const VariableContext = createContext<VariableContextValue>({
-  [VAR_SYMBOL]: true,
-});
 
 /** Pseudo Classes ************************************************************/
 
diff --git a/src/style-collection/index.ts b/src/style-collection/index.ts
index e3299b5..bfd73ac 100644
--- a/src/style-collection/index.ts
+++ b/src/style-collection/index.ts
@@ -1,3 +1,5 @@
+import { createContext, type Context } from "react";
+
 import type {
   Animation,
   ReactNativeCssStyleSheet,
@@ -9,7 +11,9 @@ import {
   family,
   observable,
   observableBatch,
+  VAR_SYMBOL,
   type Observable,
+  type VariableContextValue,
 } from "../runtime/native/reactivity";
 import { rootVariables, universalVariables } from "./root";
 
@@ -23,6 +27,9 @@ interface StyleCollectionType {
 
 declare global {
   var __react_native_css_style_collection: StyleCollectionType | undefined;
+  var __react_native_css_variable_context:
+    | Context<VariableContextValue>
+    | undefined;
 }
 
 globalThis.__react_native_css_style_collection ??= {
@@ -140,3 +147,10 @@ function isDeepEqual(a: unknown, b: unknown): boolean {
 
   return true;
 }
+
+globalThis.__react_native_css_variable_context ??=
+  createContext<VariableContextValue>({
+    [VAR_SYMBOL]: true,
+  });
+
+export const VariableContext = globalThis.__react_native_css_variable_context;