diff --git a/src/__tests__/native/variables.test.tsx b/src/__tests__/native/variables.test.tsx
index 25ac30f5..40f677a9 100644
--- a/src/__tests__/native/variables.test.tsx
+++ b/src/__tests__/native/variables.test.tsx
@@ -351,3 +351,17 @@ test("variable overriding with classes", () => {
   const component = screen.getByTestId(testID);
   expect(component.props.style).toStrictEqual({ color: "#f00" });
 });
+
+test("a custom property declared as auto keeps its value", () => {
+  // Two definitions, so the compiler cannot inline `--my-var`.
+  registerCSS(`
+    .auto { --my-var: auto; }
+    .fixed { --my-var: 10px; }
+    .test { width: var(--my-var, 5px); }
+  `);
+
+  render(<View testID={testID} className="test auto" />);
+
+  const component = screen.getByTestId(testID);
+  expect(component.props.style).toStrictEqual({ width: "auto" });
+});
diff --git a/src/compiler/declarations.ts b/src/compiler/declarations.ts
index 2f0b8a4a..7fa27b30 100644
--- a/src/compiler/declarations.ts
+++ b/src/compiler/declarations.ts
@@ -1169,7 +1169,7 @@ export function parseUnparsed(
     | null,
   builder: StylesheetBuilder,
   property: string,
-  allowAuto = allowAutoProperties.has(property),
+  allowAuto = allowAutoProperties.has(property) || property.startsWith("--"),
 ): StyleDescriptor {
   if (tokenOrValue === undefined || tokenOrValue === null) {
     return;