From db3ea01c6c4482616fee6d9d77a8107f1861887f Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Mon, 15 Sep 2025 17:18:08 -0700
Subject: [PATCH] Minor optimization to display block shim

Avoid setting styles if they are already the default for View. The cost
of each style property in React Native is relatively high, so this micro
optimization can still add up.
---
 .../modules/createStrictDOMComponent.js       | 24 ++++++++++++++-----
 .../tests/html-test.native.js                 |  5 +++-
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/packages/react-strict-dom/src/native/modules/createStrictDOMComponent.js b/packages/react-strict-dom/src/native/modules/createStrictDOMComponent.js
index 2e2dca4..b723471 100644
--- a/packages/react-strict-dom/src/native/modules/createStrictDOMComponent.js
+++ b/packages/react-strict-dom/src/native/modules/createStrictDOMComponent.js
@@ -135,13 +135,25 @@ export function createStrictDOMComponent<T, P: StrictProps>(
     } else if (displayValue === 'block' && displayInsideValue === 'flow') {
       // Force the block emulation styles
       nextDisplayInsideValue = 'flow';
-      nativeProps.style.alignItems = 'stretch';
       nativeProps.style.display = 'flex';
-      nativeProps.style.flexBasis = 'auto';
-      nativeProps.style.flexDirection = 'column';
-      nativeProps.style.flexShrink = 0;
-      nativeProps.style.flexWrap = 'nowrap';
-      nativeProps.style.justifyContent = 'flex-start';
+      if (nativeProps.style.alignItems != null) {
+        nativeProps.style.alignItems = 'stretch';
+      }
+      if (nativeProps.style.flexBasis != null) {
+        nativeProps.style.flexBasis = 'auto';
+      }
+      if (nativeProps.style.flexDirection != null) {
+        nativeProps.style.flexDirection = 'column';
+      }
+      if (nativeProps.style.flexShrink != null) {
+        nativeProps.style.flexShrink = 0;
+      }
+      if (nativeProps.style.flexWrap != null) {
+        nativeProps.style.flexWrap = 'nowrap';
+      }
+      if (nativeProps.style.justifyContent != null) {
+        nativeProps.style.justifyContent = 'flex-start';
+      }
     }
 
     if (displayInsideValue === 'flex') {
diff --git a/packages/react-strict-dom/tests/html-test.native.js b/packages/react-strict-dom/tests/html-test.native.js
index 8cc5386..ee6d827 100644
--- a/packages/react-strict-dom/tests/html-test.native.js
+++ b/packages/react-strict-dom/tests/html-test.native.js
@@ -71,10 +71,13 @@ describe('<html.*>', () => {
   test('block layout override of flex layout', () => {
     const styles = css.create({
       root: {
+        display: 'block',
+        flexBasis: '25%',
         flexDirection: 'row',
         alignItems: 'start',
         flexShrink: '1',
-        display: 'block'
+        flexWrap: 'wrap',
+        justifyContent: 'flex-end'
       }
     });