From cb5c7841e06ce0d9d7d68d7b6eaa4f0c52d904d4 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Thu, 17 Jul 2025 12:41:44 -0700
Subject: [PATCH] Add flexbox error logging for native

Print an error message if flex properties are used on native without the
required "display:flex" style. This should help prevent layout
divergence between native and web for native-first development.
---
 .../src/native/stylex/index.js                | 31 +++++++++++++++++++
 .../react-strict-dom/tests/css-test.native.js | 26 ++++++++++++++++
 2 files changed, 57 insertions(+)

diff --git a/packages/react-strict-dom/src/native/stylex/index.js b/packages/react-strict-dom/src/native/stylex/index.js
index 4d2e5f38..92a8e6bc 100644
--- a/packages/react-strict-dom/src/native/stylex/index.js
+++ b/packages/react-strict-dom/src/native/stylex/index.js
@@ -637,6 +637,37 @@ export function props(
   if (boxSizingValue === 'content-box' && !version.experimental) {
     nextStyle = fixContentBox(nextStyle);
   }
+
+  // Print an error message if flex properties are used without
+  // "display:flex" being set. React Native is always using "flex"
+  // layout but web uses "flow" layout by default, which can lead
+  // to layout divergence if building for native first.
+  if (__DEV__) {
+    if (
+      nextStyle.display == null ||
+      (nextStyle.display !== 'flex' && nextStyle.display !== 'none')
+    ) {
+      if (
+        nextStyle.alignContent != null ||
+        nextStyle.alignItems != null ||
+        nextStyle.alignSelf != null ||
+        nextStyle.columnGap != null ||
+        nextStyle.flex != null ||
+        nextStyle.flexBasis != null ||
+        nextStyle.flexDirection != null ||
+        nextStyle.flexGrow != null ||
+        nextStyle.flexShrink != null ||
+        nextStyle.flexWrap != null ||
+        nextStyle.gap != null ||
+        nextStyle.justifyContent != null ||
+        nextStyle.placeContent != null ||
+        nextStyle.rowGap != null
+      ) {
+        errorMsg('"display:flex" is required to use flexbox properties');
+      }
+    }
+  }
+
   nativeProps.style = nextStyle;
 
   return nativeProps;
diff --git a/packages/react-strict-dom/tests/css-test.native.js b/packages/react-strict-dom/tests/css-test.native.js
index 21e6e654..34b63c58 100644
--- a/packages/react-strict-dom/tests/css-test.native.js
+++ b/packages/react-strict-dom/tests/css-test.native.js
@@ -259,6 +259,32 @@ describe('properties: general', () => {
     expect(css.props.call(mockOptions, styles.rtl)).toMatchSnapshot('rtl');
   });
 
+  test('display', () => {
+    const styles = css.create({
+      flex: {
+        display: 'flex'
+      },
+      align: {
+        alignItems: 'center'
+      },
+      row: {
+        flexDirection: 'row'
+      }
+    });
+    css.props.call(mockOptions, [styles.flex, styles.align]);
+    expect(console.error).not.toHaveBeenCalledWith(
+      expect.stringContaining(
+        '"display:flex" is required to use flexbox properties'
+      )
+    );
+    css.props.call(mockOptions, [styles.align, styles.row]);
+    expect(console.error).toHaveBeenCalledWith(
+      expect.stringContaining(
+        '"display:flex" is required to use flexbox properties'
+      )
+    );
+  });
+
   test('filter', () => {
     const { underTest } = css.create({
       underTest: {