From d1f93f7445f4c3b00fd312b06aff681df50b3008 Mon Sep 17 00:00:00 2001
From: Yevhenii <evgeny.kotyrlo@gmail.com>
Date: Sun, 11 Oct 2026 19:51:51 +0300
Subject: [PATCH] fix(native): measure inline-size and block-size container
 queries

getContainerFeatureValue answered undefined for both logical size
features, so @container (min-inline-size: 400px) matched nothing at any
size, on the axis container-type: inline-size names. React Native lays
out in one writing mode, so the inline axis is the width and the block
axis the height.
---
 .../native/container-logical-sizes.test.tsx   | 32 +++++++++++++++++++
 src/native/conditions/container-query.ts      |  3 ++
 2 files changed, 35 insertions(+)
 create mode 100644 src/__tests__/native/container-logical-sizes.test.tsx

diff --git a/src/__tests__/native/container-logical-sizes.test.tsx b/src/__tests__/native/container-logical-sizes.test.tsx
new file mode 100644
index 00000000..6b1ac339
--- /dev/null
+++ b/src/__tests__/native/container-logical-sizes.test.tsx
@@ -0,0 +1,32 @@
+import { fireEvent, render, screen } from "@testing-library/react-native";
+import { View } from "react-native-css/components/View";
+import { registerCSS } from "react-native-css/jest";
+
+test.each([
+  ["inline-size", "width"],
+  ["block-size", "height"],
+] as const)("container %s is measured on its %s", (feature, dimension) => {
+  registerCSS(`
+    .parent { container-type: size; }
+    .child { width: 10px; }
+    @container (min-${feature}: 40px) { .child { width: 37px; } }
+  `);
+  render(
+    <View testID="parent" className="parent">
+      <View testID="child" className="child" />
+    </View>,
+  );
+
+  for (const [size, expected] of [
+    [39, 10],
+    [40, 37],
+    [41, 37],
+  ] as const) {
+    fireEvent(screen.getByTestId("parent"), "layout", {
+      nativeEvent: {
+        layout: { x: 0, y: 0, width: 200, height: 300, [dimension]: size },
+      },
+    });
+    expect(screen.getByTestId("child")).toHaveStyle({ width: expected });
+  }
+});
diff --git a/src/native/conditions/container-query.ts b/src/native/conditions/container-query.ts
index e25df564..fe613656 100644
--- a/src/native/conditions/container-query.ts
+++ b/src/native/conditions/container-query.ts
@@ -156,8 +156,11 @@ function getContainerFeatureValue(
       const width = get(containerWidthFamily(containerKey));
       const height = get(containerHeightFamily(containerKey));
       return width > height ? "landscape" : "portrait";
+    // React Native lays out in one writing mode, so the inline axis is the width and the block axis the height
     case "inline-size":
+      return get(containerWidthFamily(containerKey));
     case "block-size":
+      return get(containerHeightFamily(containerKey));
     default:
       return;
   }