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.

Author: necolas

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;

packages/react-strict-dom/tests/css-test.native.js

@@ -259,6 +259,31 @@ describe('properties: general', () => {
     expect(css.props.call(mockOptions, styles.rtl)).toMatchSnapshot('rtl');
   });
 
+  test('display', () => {
+    const styles = css.create({
+      good: {
+        display: 'flex',
+        flexDirection: 'row'
+      },
+      bad: {
+        flexDirection: 'row'
+      }
+    });
+    css.props.call(mockOptions, styles.good);
+
+    expect(console.error).not.toHaveBeenCalledWith(
+      expect.stringContaining(
+        '"display:flex" is required to use flexbox properties'
+      )
+    );
+    css.props.call(mockOptions, styles.bad);
+    expect(console.error).toHaveBeenCalledWith(
+      expect.stringContaining(
+        '"display:flex" is required to use flexbox properties'
+      )
+    );
+  });
+
   test('filter', () => {
     const { underTest } = css.create({
       underTest: {