From d570f0b2ba49e2d059ba828f075e5da9bd33d827 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Thu, 17 Jul 2025 11:38:20 -0700
Subject: [PATCH 01/24] Add support for CSS `backgroundImage` gradients on
 native

Delegate `backgroundImage` to `experimental_backgroundImage` in React
Native. This should provide support for using linear and radial
gradients.
---
 apps/website/docs/api/02-css/index.md                     | 2 +-
 packages/react-strict-dom/src/native/stylex/index.js      | 3 +++
 .../src/native/stylex/isAllowedStyleKey.js                | 1 +
 .../tests/__snapshots__/css-test.native.js.snap-native    | 8 ++++++++
 packages/react-strict-dom/tests/css-test.native.js        | 5 ++---
 5 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/apps/website/docs/api/02-css/index.md b/apps/website/docs/api/02-css/index.md
index 4e6def24..4a1b567d 100644
--- a/apps/website/docs/api/02-css/index.md
+++ b/apps/website/docs/api/02-css/index.md
@@ -72,7 +72,7 @@ The following tables represent the compatibility status of the strict CSS API fo
 | backdropFilter | ❌ | ❌ | |
 | backfaceVisibility | ✅ | ✅ | |
 | backgroundColor | ✅ | ✅ | |
-| backgroundImage | ❌ | ❌ | |
+| backgroundImage | 🟡 Partial | 🟡 Partial | Support for linear and radial gradients in React Native |
 | backgroundOrigin | ❌ | ❌ | |
 | backgroundPosition | ❌ | ❌ | |
 | backgroundRepeat | ❌ | ❌ | |
diff --git a/packages/react-strict-dom/src/native/stylex/index.js b/packages/react-strict-dom/src/native/stylex/index.js
index 4d2e5f38..d8bf060b 100644
--- a/packages/react-strict-dom/src/native/stylex/index.js
+++ b/packages/react-strict-dom/src/native/stylex/index.js
@@ -127,6 +127,9 @@ function processStyle(
           );
         }
         continue;
+      } else if (propName === 'backgroundImage') {
+        result.experimental_backgroundImage = styleValue;
+        continue;
       }
       // Workaround unsupported objectFit values
       else if (propName === 'objectFit' && styleValue === 'none') {
diff --git a/packages/react-strict-dom/src/native/stylex/isAllowedStyleKey.js b/packages/react-strict-dom/src/native/stylex/isAllowedStyleKey.js
index 35ff6fb1..7f6e0b1c 100644
--- a/packages/react-strict-dom/src/native/stylex/isAllowedStyleKey.js
+++ b/packages/react-strict-dom/src/native/stylex/isAllowedStyleKey.js
@@ -18,6 +18,7 @@ const allowedStyleKeySet = new Set<string>([
   'aspectRatio',
   'backfaceVisibility',
   'backgroundColor',
+  'backgroundImage',
   'blockSize',
   'borderBottomColor',
   'borderBottomLeftRadius',
diff --git a/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap-native b/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap-native
index 610def8d..a97b6fc0 100644
--- a/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap-native
+++ b/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap-native
@@ -72,6 +72,14 @@ exports[`properties: general animationDuration 1`] = `
 }
 `;
 
+exports[`properties: general backgroundImage 1`] = `
+{
+  "style": {
+    "experimental_backgroundImage": "linear-gradient(to bottom right, yellow, green)",
+  },
+}
+`;
+
 exports[`properties: general borderColor 1`] = `
 {
   "style": {
diff --git a/packages/react-strict-dom/tests/css-test.native.js b/packages/react-strict-dom/tests/css-test.native.js
index 21e6e654..f34acc44 100644
--- a/packages/react-strict-dom/tests/css-test.native.js
+++ b/packages/react-strict-dom/tests/css-test.native.js
@@ -141,11 +141,10 @@ describe('properties: general', () => {
   test('backgroundImage', () => {
     const styles = css.create({
       root: {
-        backgroundImage: 'url(https://placehold.it/300/300)'
+        backgroundImage: 'linear-gradient(to bottom right, yellow, green)'
       }
     });
-    css.props.call(mockOptions, styles.root);
-    expect(console.warn).toHaveBeenCalled();
+    expect(css.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
 
   test('borderColor', () => {

From 332ea899db8c0e3cef719b4afa054067ef98b44f Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Thu, 17 Jul 2025 12:41:44 -0700
Subject: [PATCH 02/24] 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 d8bf060b..a743c29d 100644
--- a/packages/react-strict-dom/src/native/stylex/index.js
+++ b/packages/react-strict-dom/src/native/stylex/index.js
@@ -640,6 +640,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 f34acc44..507891cc 100644
--- a/packages/react-strict-dom/tests/css-test.native.js
+++ b/packages/react-strict-dom/tests/css-test.native.js
@@ -258,6 +258,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: {

From ff9c7956cbe67f1a424ee6df36a1ea617a639f5d Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Thu, 17 Jul 2025 15:12:55 -0700
Subject: [PATCH 03/24] 0.0.41

---
 CHANGELOG.md                           | 10 ++++++++++
 package-lock.json                      |  2 +-
 packages/react-strict-dom/package.json |  2 +-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 23ba99fb..1751c513 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.0.41 (Jul 17, 2025)
+
+### New features
+
+* [Native] Add support for CSS `backgroundImage` gradients on native.
+
+### Fixes
+
+* [Native] Add flexbox error logging.
+
 ## 0.0.40 (Jul 11, 2025)
 
 ### Fixes
diff --git a/package-lock.json b/package-lock.json
index c3f2785e..ab45c652 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31218,7 +31218,7 @@
       }
     },
     "packages/react-strict-dom": {
-      "version": "0.0.40",
+      "version": "0.0.41",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-imports": "^7.24.7",
diff --git a/packages/react-strict-dom/package.json b/packages/react-strict-dom/package.json
index 748dfbc2..faee546c 100644
--- a/packages/react-strict-dom/package.json
+++ b/packages/react-strict-dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-strict-dom",
-  "version": "0.0.40",
+  "version": "0.0.41",
   "description": "React Strict DOM",
   "exports": {
     ".": {

From 198c2aa929901683a3fe499881e19d37213219a3 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Mon, 21 Jul 2025 13:30:26 -0700
Subject: [PATCH 04/24] Revert "Use built-in React Native support for logical
 CSS"

This reverts commit 4b556989b74deebfb35333f78bb55b965a0e86d7.
---
 apps/website/docs/api/02-css/index.md         | 40 +++++++-------
 .../src/native/stylex/index.js                | 53 ++++++++++++++++++
 .../compat-test.native.js.snap-native         |  4 +-
 .../css-test.native.js.snap-native            | 55 ++++++++-----------
 .../react-strict-dom/tests/css-test.native.js |  6 --
 5 files changed, 99 insertions(+), 59 deletions(-)

diff --git a/apps/website/docs/api/02-css/index.md b/apps/website/docs/api/02-css/index.md
index 4a1b567d..ed30d4c8 100644
--- a/apps/website/docs/api/02-css/index.md
+++ b/apps/website/docs/api/02-css/index.md
@@ -130,7 +130,7 @@ The following tables represent the compatibility status of the strict CSS API fo
 | color | ✅ | ✅ | |
 | columnGap | ✅ | ✅ | |
 | cursor | ❌ | ✅ Partial | |
-| direction | ✅ | ✅ | |
+| direction | ❌ | ❌ | |
 | display: block | 🟡 Partial | 🟡 Partial | [#2](https://github.com/facebook/react-strict-dom/issues/2) |
 | display: contents | ✅ | ✅ | |
 | display: flex | ✅ | ✅ | |
@@ -156,13 +156,13 @@ The following tables represent the compatibility status of the strict CSS API fo
 | gap | ✅ | ✅ | |
 | height | ✅ | ✅ | |
 | inlineSize | 🟡 | 🟡 | |
-| inset | ✅ | ✅ | |
-| insetBlock | ✅ | ✅ | |
-| insetBlockEnd | ✅ | ✅ | |
-| insetBlockStart | ✅ | ✅ | |
-| insetInline | ✅ | ✅ | |
-| insetInlineEnd | ✅ | ✅ | |
-| insetInlineStart | ✅ | ✅ | |
+| inset | 🟡 | 🟡 | |
+| insetBlock | 🟡 | 🟡 | |
+| insetBlockEnd | 🟡 | 🟡 | |
+| insetBlockStart | 🟡 | 🟡 | |
+| insetInline | 🟡 | 🟡 | |
+| insetInlineEnd | 🟡 | 🟡 | |
+| insetInlineStart | 🟡 | 🟡 | |
 | isolation | ✅ | ✅ | |
 | justifyContent | ✅ | ✅ | |
 | justifyItems | ❌ | ❌ | |
@@ -175,13 +175,13 @@ The following tables represent the compatibility status of the strict CSS API fo
 | listStylePosition | ❌ | ❌ | |
 | listStyleType | ❌ | ❌ | |
 | margin | ✅ | ✅ | |
-| marginBlock | ✅ | ✅ | |
-| marginBlockEnd | ✅ | ✅ | |
-| marginBlockStart | ✅ | ✅ | |
+| marginBlock | 🟡 | 🟡 | |
+| marginBlockEnd | 🟡 | 🟡 | |
+| marginBlockStart | 🟡 | 🟡 | |
 | marginBottom | ✅ | ✅ | |
-| marginInline | ✅ | ✅ | |
-| marginInlineEnd | ✅ | ✅ | |
-| marginInlineStart | ✅ | ✅ | |
+| marginInline | 🟡 | 🟡 | |
+| marginInlineEnd | 🟡 | 🟡 | |
+| marginInlineStart | 🟡 | 🟡 | |
 | marginLeft | ✅ | ✅ | |
 | marginRight | ✅ | ✅ | |
 | marginTop | ✅ | ✅ | |
@@ -208,13 +208,13 @@ The following tables represent the compatibility status of the strict CSS API fo
 | overflowX | ❌ | ❌ | |
 | overflowY | ❌ | ❌ | |
 | padding | ✅ | ✅ | |
-| paddingBlock | ✅ | ✅ | |
-| paddingBlockEnd | ✅ | ✅ | |
-| paddingBlockStart | ✅ | ✅ | |
+| paddingBlock | 🟡 | 🟡 | |
+| paddingBlockEnd | 🟡 | 🟡 | |
+| paddingBlockStart | 🟡 | 🟡 | |
 | paddingBottom | ✅ | ✅ | |
-| paddingInline | ✅ | ✅ | |
-| paddingInlineEnd | ✅ | ✅ | |
-| paddingInlineStart | ✅ | ✅ | |
+| paddingInline | 🟡 | 🟡 | |
+| paddingInlineEnd | 🟡 | 🟡 | |
+| paddingInlineStart | 🟡 | 🟡 | |
 | paddingLeft | ✅ | ✅ | |
 | paddingRight | ✅ | ✅ | |
 | paddingTop | ✅ | ✅ | |
diff --git a/packages/react-strict-dom/src/native/stylex/index.js b/packages/react-strict-dom/src/native/stylex/index.js
index a743c29d..9931568d 100644
--- a/packages/react-strict-dom/src/native/stylex/index.js
+++ b/packages/react-strict-dom/src/native/stylex/index.js
@@ -605,10 +605,63 @@ export function props(
         nativeProps.cursorColor = styleValue;
       }
     }
+    // inset
+    else if (styleProp === 'inset') {
+      nextStyle.top ??= styleValue;
+      nextStyle.start ??= styleValue;
+      nextStyle.end ??= styleValue;
+      nextStyle.bottom ??= styleValue;
+    } else if (styleProp === 'insetBlock') {
+      nextStyle.top ??= styleValue;
+      nextStyle.bottom ??= styleValue;
+    } else if (styleProp === 'insetBlockEnd') {
+      nextStyle.bottom = flatStyle.bottom ?? styleValue;
+    } else if (styleProp === 'insetBlockStart') {
+      nextStyle.top = flatStyle.top ?? styleValue;
+    } else if (styleProp === 'insetInline') {
+      nextStyle.end ??= styleValue;
+      nextStyle.start ??= styleValue;
+    } else if (styleProp === 'insetInlineEnd') {
+      nextStyle.end = flatStyle.end ?? styleValue;
+    } else if (styleProp === 'insetInlineStart') {
+      nextStyle.start = flatStyle.start ?? styleValue;
+    }
     // lineClamp polyfill
     else if (styleProp === 'lineClamp') {
       nativeProps.numberOfLines = styleValue;
     }
+    // marginBlock
+    else if (styleProp === 'marginBlock') {
+      nextStyle.marginVertical = styleValue;
+    } else if (styleProp === 'marginBlockStart') {
+      nextStyle.marginTop ??= styleValue;
+    } else if (styleProp === 'marginBlockEnd') {
+      nextStyle.marginBottom ??= styleValue;
+    }
+    // marginInline
+    else if (styleProp === 'marginInline') {
+      nextStyle.marginHorizontal = styleValue;
+    } else if (styleProp === 'marginInlineStart') {
+      nextStyle.marginStart = styleValue;
+    } else if (styleProp === 'marginInlineEnd') {
+      nextStyle.marginEnd = styleValue;
+    }
+    // paddingBlock
+    else if (styleProp === 'paddingBlock') {
+      nextStyle.paddingVertical = styleValue;
+    } else if (styleProp === 'paddingBlockStart') {
+      nextStyle.paddingTop ??= styleValue;
+    } else if (styleProp === 'paddingBlockEnd') {
+      nextStyle.paddingBottom ??= styleValue;
+    }
+    // paddingInline
+    else if (styleProp === 'paddingInline') {
+      nextStyle.paddingHorizontal = styleValue;
+    } else if (styleProp === 'paddingInlineStart') {
+      nextStyle.paddingStart = styleValue;
+    } else if (styleProp === 'paddingInlineEnd') {
+      nextStyle.paddingEnd = styleValue;
+    }
     // '::placeholder' polyfill
     else if (styleProp === 'placeholderTextColor') {
       nativeProps.placeholderTextColor = styleValue;
diff --git a/packages/react-strict-dom/tests/__snapshots__/compat-test.native.js.snap-native b/packages/react-strict-dom/tests/__snapshots__/compat-test.native.js.snap-native
index 08f72854..49a90201 100644
--- a/packages/react-strict-dom/tests/__snapshots__/compat-test.native.js.snap-native
+++ b/packages/react-strict-dom/tests/__snapshots__/compat-test.native.js.snap-native
@@ -68,7 +68,7 @@ exports[`<compat.native> "as" equals "view": as=view 1`] = `
   style={
     {
       "boxSizing": "content-box",
-      "paddingInline": 32,
+      "paddingHorizontal": 32,
       "position": "static",
     }
   }
@@ -82,7 +82,7 @@ exports[`<compat.native> default: default 1`] = `
   style={
     {
       "boxSizing": "content-box",
-      "paddingInline": 32,
+      "paddingHorizontal": 32,
       "position": "static",
     }
   }
diff --git a/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap-native b/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap-native
index a97b6fc0..1e18e109 100644
--- a/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap-native
+++ b/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap-native
@@ -161,14 +161,6 @@ exports[`properties: general caretColor: unsupported caret color 1`] = `
 }
 `;
 
-exports[`properties: general direction: inherit 1`] = `
-{
-  "style": {
-    "direction": "inherit",
-  },
-}
-`;
-
 exports[`properties: general direction: ltr 1`] = `
 {
   "style": {
@@ -1030,7 +1022,10 @@ exports[`properties: logical direction inlineSize: minInlineSize after minWidth
 exports[`properties: logical direction inset: inset 1`] = `
 {
   "style": {
-    "inset": 1,
+    "bottom": 1,
+    "end": 1,
+    "start": 1,
+    "top": 1,
   },
 }
 `;
@@ -1039,7 +1034,6 @@ exports[`properties: logical direction inset: inset vs top 1`] = `
 {
   "style": {
     "bottom": 100,
-    "insetBlockStart": 3,
     "left": 10,
     "right": 10,
     "top": 100,
@@ -1050,7 +1044,8 @@ exports[`properties: logical direction inset: inset vs top 1`] = `
 exports[`properties: logical direction inset: insetBlock 1`] = `
 {
   "style": {
-    "insetBlock": 2,
+    "bottom": 2,
+    "top": 2,
   },
 }
 `;
@@ -1059,7 +1054,6 @@ exports[`properties: logical direction inset: insetBlock vs top 1`] = `
 {
   "style": {
     "bottom": 100,
-    "insetBlockStart": 3,
     "top": 100,
   },
 }
@@ -1068,7 +1062,7 @@ exports[`properties: logical direction inset: insetBlock vs top 1`] = `
 exports[`properties: logical direction inset: insetBlockEnd 1`] = `
 {
   "style": {
-    "insetBlockEnd": 4,
+    "bottom": 4,
   },
 }
 `;
@@ -1077,7 +1071,6 @@ exports[`properties: logical direction inset: insetBlockEnd vs bottom 1`] = `
 {
   "style": {
     "bottom": 100,
-    "insetBlockEnd": 4,
   },
 }
 `;
@@ -1085,7 +1078,7 @@ exports[`properties: logical direction inset: insetBlockEnd vs bottom 1`] = `
 exports[`properties: logical direction inset: insetBlockStart 1`] = `
 {
   "style": {
-    "insetBlockStart": 3,
+    "top": 3,
   },
 }
 `;
@@ -1093,7 +1086,6 @@ exports[`properties: logical direction inset: insetBlockStart 1`] = `
 exports[`properties: logical direction inset: insetBlockStart vs top 1`] = `
 {
   "style": {
-    "insetBlockStart": 3,
     "top": 100,
   },
 }
@@ -1102,7 +1094,8 @@ exports[`properties: logical direction inset: insetBlockStart vs top 1`] = `
 exports[`properties: logical direction inset: insetInline 1`] = `
 {
   "style": {
-    "insetInline": 5,
+    "end": 5,
+    "start": 5,
   },
 }
 `;
@@ -1110,7 +1103,7 @@ exports[`properties: logical direction inset: insetInline 1`] = `
 exports[`properties: logical direction inset: insetInlineEnd 1`] = `
 {
   "style": {
-    "insetInlineEnd": 7,
+    "end": 7,
   },
 }
 `;
@@ -1118,7 +1111,7 @@ exports[`properties: logical direction inset: insetInlineEnd 1`] = `
 exports[`properties: logical direction inset: insetInlineStart 1`] = `
 {
   "style": {
-    "insetInlineStart": 6,
+    "start": 6,
   },
 }
 `;
@@ -1126,7 +1119,7 @@ exports[`properties: logical direction inset: insetInlineStart 1`] = `
 exports[`properties: logical direction margin: marginBlock 1`] = `
 {
   "style": {
-    "marginBlock": 1,
+    "marginVertical": 1,
   },
 }
 `;
@@ -1134,7 +1127,7 @@ exports[`properties: logical direction margin: marginBlock 1`] = `
 exports[`properties: logical direction margin: marginBlockEnd 1`] = `
 {
   "style": {
-    "marginBlockEnd": 3,
+    "marginBottom": 3,
   },
 }
 `;
@@ -1142,7 +1135,7 @@ exports[`properties: logical direction margin: marginBlockEnd 1`] = `
 exports[`properties: logical direction margin: marginBlockStart 1`] = `
 {
   "style": {
-    "marginBlockStart": 2,
+    "marginTop": 2,
   },
 }
 `;
@@ -1150,7 +1143,7 @@ exports[`properties: logical direction margin: marginBlockStart 1`] = `
 exports[`properties: logical direction margin: marginInline 1`] = `
 {
   "style": {
-    "marginInline": 1,
+    "marginHorizontal": 1,
   },
 }
 `;
@@ -1158,7 +1151,7 @@ exports[`properties: logical direction margin: marginInline 1`] = `
 exports[`properties: logical direction margin: marginInlineEnd 1`] = `
 {
   "style": {
-    "marginInlineEnd": 3,
+    "marginEnd": 3,
   },
 }
 `;
@@ -1166,7 +1159,7 @@ exports[`properties: logical direction margin: marginInlineEnd 1`] = `
 exports[`properties: logical direction margin: marginInlineStart 1`] = `
 {
   "style": {
-    "marginInlineStart": 2,
+    "marginStart": 2,
   },
 }
 `;
@@ -1174,7 +1167,7 @@ exports[`properties: logical direction margin: marginInlineStart 1`] = `
 exports[`properties: logical direction padding: paddingBlock 1`] = `
 {
   "style": {
-    "paddingBlock": 1,
+    "paddingVertical": 1,
   },
 }
 `;
@@ -1182,7 +1175,7 @@ exports[`properties: logical direction padding: paddingBlock 1`] = `
 exports[`properties: logical direction padding: paddingBlockEnd 1`] = `
 {
   "style": {
-    "paddingBlockEnd": 3,
+    "paddingBottom": 3,
   },
 }
 `;
@@ -1190,7 +1183,7 @@ exports[`properties: logical direction padding: paddingBlockEnd 1`] = `
 exports[`properties: logical direction padding: paddingBlockStart 1`] = `
 {
   "style": {
-    "paddingBlockStart": 2,
+    "paddingTop": 2,
   },
 }
 `;
@@ -1198,7 +1191,7 @@ exports[`properties: logical direction padding: paddingBlockStart 1`] = `
 exports[`properties: logical direction padding: paddingInline 1`] = `
 {
   "style": {
-    "paddingInline": 1,
+    "paddingHorizontal": 1,
   },
 }
 `;
@@ -1206,7 +1199,7 @@ exports[`properties: logical direction padding: paddingInline 1`] = `
 exports[`properties: logical direction padding: paddingInlineEnd 1`] = `
 {
   "style": {
-    "paddingInlineEnd": 3,
+    "paddingEnd": 3,
   },
 }
 `;
@@ -1214,7 +1207,7 @@ exports[`properties: logical direction padding: paddingInlineEnd 1`] = `
 exports[`properties: logical direction padding: paddingInlineStart 1`] = `
 {
   "style": {
-    "paddingInlineStart": 2,
+    "paddingStart": 2,
   },
 }
 `;
diff --git a/packages/react-strict-dom/tests/css-test.native.js b/packages/react-strict-dom/tests/css-test.native.js
index 507891cc..e1b52a48 100644
--- a/packages/react-strict-dom/tests/css-test.native.js
+++ b/packages/react-strict-dom/tests/css-test.native.js
@@ -241,9 +241,6 @@ describe('properties: general', () => {
 
   test('direction', () => {
     const styles = css.create({
-      inherit: {
-        direction: 'inherit'
-      },
       ltr: {
         direction: 'ltr'
       },
@@ -251,9 +248,6 @@ describe('properties: general', () => {
         direction: 'rtl'
       }
     });
-    expect(css.props.call(mockOptions, styles.inherit)).toMatchSnapshot(
-      'inherit'
-    );
     expect(css.props.call(mockOptions, styles.ltr)).toMatchSnapshot('ltr');
     expect(css.props.call(mockOptions, styles.rtl)).toMatchSnapshot('rtl');
   });

From 8e78531f2b1421b0fcfc6e3572108848714365d7 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Mon, 21 Jul 2025 13:08:38 -0700
Subject: [PATCH 05/24] Add logical CSS to examples app

---
 apps/examples/src/components/App.js | 43 +++++++++++++++++++++++++++--
 1 file changed, 41 insertions(+), 2 deletions(-)

diff --git a/apps/examples/src/components/App.js b/apps/examples/src/components/App.js
index 311de906..ceab9d99 100644
--- a/apps/examples/src/components/App.js
+++ b/apps/examples/src/components/App.js
@@ -52,6 +52,7 @@ const greenPinkTheme = css.createTheme(themeColors, {
 
 const themedStyles = css.create({
   container: {
+    display: 'flex',
     flex: 1,
     justifyContent: 'center',
     backgroundColor: '#bbb',
@@ -323,6 +324,15 @@ function Shell(): React.MixedElement {
           </html.div>
         </ExampleBlock>
 
+        {/* logical styles emulation */}
+        <ExampleBlock title="CSS Logical">
+          <html.div>
+            <html.div style={styles.logicalPadding} />
+            <html.div style={styles.logicalMargin} />
+            <html.div style={styles.logicalBorder} />
+          </html.div>
+        </ExampleBlock>
+
         {/* CSS positioning (static by default) */}
         <ExampleBlock title="CSS Position">
           <html.div style={[styles.p50, styles.relative]}>
@@ -571,7 +581,7 @@ function Shell(): React.MixedElement {
           >
             <html.span style={styles.bgWhite}>{clickData.text}</html.span>
             <html.div style={styles.flex}>
-              <html.div style={styles.flexGrow}>
+              <html.div style={[styles.flex, styles.flexGrow]}>
                 <html.div>
                   <html.span>
                     {clickEventData.altKey ? '✅' : '🚫'} altKey
@@ -593,7 +603,7 @@ function Shell(): React.MixedElement {
                   </html.span>
                 </html.div>
               </html.div>
-              <html.div style={styles.flexGrow}>
+              <html.div style={[styles.flex, styles.flexGrow]}>
                 <html.div>
                   <html.span>button: {clickEventData.button}</html.span>
                 </html.div>
@@ -846,5 +856,34 @@ const styles = css.create({
     borderWidth: 1,
     borderStyle: 'solid',
     borderColor: 'black'
+  },
+  logicalMargin: {
+    backgroundColor: 'pink',
+    width: 50,
+    height: 50,
+    marginBlock: 20,
+    marginInline: 20,
+    borderColor: 'black',
+    borderWidth: 1,
+    borderStyle: 'solid'
+  },
+  logicalPadding: {
+    backgroundColor: 'pink',
+    width: 50,
+    height: 50,
+    paddingBlock: 20,
+    paddingInline: 20,
+    borderColor: 'black',
+    borderWidth: 1,
+    borderStyle: 'solid'
+  },
+  logicalBorder: {
+    backgroundColor: 'pink',
+    width: 50,
+    height: 50,
+    borderColor: 'red',
+    borderBlockWidth: 20,
+    borderInlineWidth: 20,
+    borderStyle: 'solid'
   }
 });

From 0a68208fff6c6eafde1efd83da9148286731e740 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Mon, 21 Jul 2025 13:23:57 -0700
Subject: [PATCH 06/24] Add logical CSS to contentBox tests

---
 .../__snapshots__/fixContentBox-test.js.snap        | 13 +++++++++++++
 .../native/stylex/__tests__/fixContentBox-test.js   | 12 ++++++++++++
 2 files changed, 25 insertions(+)

diff --git a/packages/react-strict-dom/src/native/stylex/__tests__/__snapshots__/fixContentBox-test.js.snap b/packages/react-strict-dom/src/native/stylex/__tests__/__snapshots__/fixContentBox-test.js.snap
index 8ebb16b4..90399ff4 100644
--- a/packages/react-strict-dom/src/native/stylex/__tests__/__snapshots__/fixContentBox-test.js.snap
+++ b/packages/react-strict-dom/src/native/stylex/__tests__/__snapshots__/fixContentBox-test.js.snap
@@ -32,6 +32,19 @@ exports[`fixContentBox boxSizing: content-box: height 1`] = `
 }
 `;
 
+exports[`fixContentBox boxSizing: content-box: logical 1`] = `
+{
+  "borderBlockWidth": 5,
+  "borderInlineWidth": 5,
+  "height": 100,
+  "paddingBlock": 10,
+  "paddingInline": 20,
+  "paddingInlineEnd": 30,
+  "paddingLeft": 40,
+  "width": 140,
+}
+`;
+
 exports[`fixContentBox boxSizing: content-box: maxHeight 1`] = `
 {
   "borderWidth": 2,
diff --git a/packages/react-strict-dom/src/native/stylex/__tests__/fixContentBox-test.js b/packages/react-strict-dom/src/native/stylex/__tests__/fixContentBox-test.js
index eb5a4478..bc69805b 100644
--- a/packages/react-strict-dom/src/native/stylex/__tests__/fixContentBox-test.js
+++ b/packages/react-strict-dom/src/native/stylex/__tests__/fixContentBox-test.js
@@ -70,6 +70,17 @@ describe('fixContentBox', () => {
         width: 100,
         height: 100
       },
+      logical: {
+        boxSizing: 'content-box',
+        borderBlockWidth: 5,
+        borderInlineWidth: 5,
+        paddingBlock: 10,
+        paddingInline: 20,
+        paddingInlineEnd: 30,
+        paddingLeft: 40,
+        width: 100,
+        height: 100
+      },
       auto: {
         boxSizing: 'content-box',
         borderWidth: 2,
@@ -100,6 +111,7 @@ describe('fixContentBox', () => {
     expect(fixContentBox(styles.minWidth)).toMatchSnapshot('minWidth');
     expect(fixContentBox(styles.minHeight)).toMatchSnapshot('minHeight');
     expect(fixContentBox(styles.allDifferent)).toMatchSnapshot('allDifferent');
+    expect(fixContentBox(styles.logical)).toMatchSnapshot('logical');
     expect(fixContentBox(styles.auto)).toMatchSnapshot('auto');
     expect(fixContentBox(styles.null)).toMatchSnapshot('null');
     expect(fixContentBox(styles.string)).toMatchSnapshot('string');

From c5251b890a16f7d7f2a284c639033398b89c2b9c Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Wed, 23 Jul 2025 12:48:13 -0700
Subject: [PATCH 07/24] 0.0.42

---
 CHANGELOG.md                           | 6 ++++++
 package-lock.json                      | 2 +-
 packages/react-strict-dom/package.json | 2 +-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1751c513..1c4c3e03 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.0.42 (Jul 23, 2025)
+
+### Fixes
+
+* [Native] Revert "Use built-in React Native support for logical CSS"
+
 ## 0.0.41 (Jul 17, 2025)
 
 ### New features
diff --git a/package-lock.json b/package-lock.json
index ab45c652..e5f25bea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31218,7 +31218,7 @@
       }
     },
     "packages/react-strict-dom": {
-      "version": "0.0.41",
+      "version": "0.0.42",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-imports": "^7.24.7",
diff --git a/packages/react-strict-dom/package.json b/packages/react-strict-dom/package.json
index faee546c..65aea0a4 100644
--- a/packages/react-strict-dom/package.json
+++ b/packages/react-strict-dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-strict-dom",
-  "version": "0.0.41",
+  "version": "0.0.42",
   "description": "React Strict DOM",
   "exports": {
     ".": {

From da1f2de13e6ffcfbb18a00a51a7e129f90453dee Mon Sep 17 00:00:00 2001
From: Martin Booth <martinbooth@fb.com>
Date: Fri, 25 Jul 2025 09:27:24 -0700
Subject: [PATCH 08/24] Add support for setting a custom viewport width (#344)

* Add support for setting a custom viewport width

* Iterate on viewport scaling polyfill

* Add scaling for default 'em' unit polyfill.
* Move scale context provider into context file.
* Expand list of length style properties.

---------

Co-authored-by: Nicolas Gallagher <necolas@meta.com>
---
 apps/examples/src/components/App.js           |  1 +
 .../benchmarks/perf/tests/css-props-tests.js  |  2 +
 packages/react-strict-dom/src/native/index.js |  4 +-
 .../native/modules/ContextViewportScale.js    | 52 +++++++++++
 .../src/native/modules/useStrictDOMElement.js | 22 ++++-
 .../src/native/modules/useStyleProps.js       |  3 +
 .../src/native/stylex/CSSLengthUnitValue.js   | 26 +++---
 .../src/native/stylex/CSSTransformValue.js    | 59 +++++++++++++
 .../stylex/__tests__/parseTransform-test.js   |  6 +-
 .../src/native/stylex/index.js                | 21 ++++-
 .../src/native/stylex/isLengthStyleKey.js     | 86 +++++++++++++++++++
 .../src/native/stylex/parseTransform.js       | 14 +--
 .../html-test.native.js.snap-native           | 39 +++++++++
 .../react-strict-dom/tests/css-test.native.js |  6 +-
 .../tests/html-test.native.js                 | 41 +++++++++
 15 files changed, 354 insertions(+), 28 deletions(-)
 create mode 100644 packages/react-strict-dom/src/native/modules/ContextViewportScale.js
 create mode 100644 packages/react-strict-dom/src/native/stylex/CSSTransformValue.js
 create mode 100644 packages/react-strict-dom/src/native/stylex/isLengthStyleKey.js

diff --git a/apps/examples/src/components/App.js b/apps/examples/src/components/App.js
index ceab9d99..1801e4a7 100644
--- a/apps/examples/src/components/App.js
+++ b/apps/examples/src/components/App.js
@@ -54,6 +54,7 @@ const themedStyles = css.create({
   container: {
     display: 'flex',
     flex: 1,
+    flexDirection: 'column',
     justifyContent: 'center',
     backgroundColor: '#bbb',
     padding: 8
diff --git a/packages/benchmarks/perf/tests/css-props-tests.js b/packages/benchmarks/perf/tests/css-props-tests.js
index da4a4cd8..7896b3d6 100644
--- a/packages/benchmarks/perf/tests/css-props-tests.js
+++ b/packages/benchmarks/perf/tests/css-props-tests.js
@@ -20,6 +20,7 @@ function runSuite(opts) {
     hover: true,
     inheritedFontSize: 16,
     viewportHeight: 600,
+    viewportScale: 1,
     viewportWidth: 1024
   };
 
@@ -29,6 +30,7 @@ function runSuite(opts) {
     hover: true,
     inheritedFontSize: 16,
     viewportHeight: 600,
+    viewportScale: 1,
     viewportWidth: 1024
   };
 
diff --git a/packages/react-strict-dom/src/native/index.js b/packages/react-strict-dom/src/native/index.js
index 6eb983ac..b14c019b 100644
--- a/packages/react-strict-dom/src/native/index.js
+++ b/packages/react-strict-dom/src/native/index.js
@@ -22,6 +22,7 @@ import * as compat from './compat';
 import * as html from './html';
 import * as stylex from './stylex';
 import { ProvideCustomProperties } from './modules/ContextCustomProperties';
+import { ProvideViewportScale } from './modules/ContextViewportScale';
 
 type StyleTheme<V, T> = Theme<V, T>;
 type StyleVars<T> = VarGroup<T>;
@@ -48,7 +49,8 @@ function ThemeProvider(props: ProviderProps): React.Node {
 }
 
 const contexts = {
-  ThemeProvider: ThemeProvider as typeof ThemeProvider
+  ThemeProvider: ThemeProvider as typeof ThemeProvider,
+  ViewportProvider: ProvideViewportScale as typeof ProvideViewportScale
 };
 
 // Export using StyleX types as the shim has divergent types internally.
diff --git a/packages/react-strict-dom/src/native/modules/ContextViewportScale.js b/packages/react-strict-dom/src/native/modules/ContextViewportScale.js
new file mode 100644
index 00000000..eab7e791
--- /dev/null
+++ b/packages/react-strict-dom/src/native/modules/ContextViewportScale.js
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ */
+
+import * as React from 'react';
+import * as ReactNative from '../react-native';
+
+type Value = $ReadOnly<{
+  scale: number
+}>;
+
+type ProviderProps = $ReadOnly<{
+  children: React.Node,
+  viewportWidth: number
+}>;
+
+const defaultContext = { scale: 1 };
+const ContextViewportScale: React.Context<Value> =
+  React.createContext(defaultContext);
+
+if (__DEV__) {
+  ContextViewportScale.displayName = 'ContextViewportScale';
+}
+
+export function ProvideViewportScale({
+  viewportWidth: logicalViewportWidth,
+  children
+}: ProviderProps): React.Node {
+  const { width: viewportWidth } = ReactNative.useWindowDimensions();
+
+  const viewportScale = React.useMemo(
+    () => ({
+      scale: viewportWidth / logicalViewportWidth
+    }),
+    [logicalViewportWidth, viewportWidth]
+  );
+
+  return (
+    <ContextViewportScale.Provider value={viewportScale}>
+      {children}
+    </ContextViewportScale.Provider>
+  );
+}
+
+export function useViewportScale(): Value {
+  return React.useContext(ContextViewportScale);
+}
diff --git a/packages/react-strict-dom/src/native/modules/useStrictDOMElement.js b/packages/react-strict-dom/src/native/modules/useStrictDOMElement.js
index 663cf76d..8825366a 100644
--- a/packages/react-strict-dom/src/native/modules/useStrictDOMElement.js
+++ b/packages/react-strict-dom/src/native/modules/useStrictDOMElement.js
@@ -4,15 +4,16 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict
+ * @flow strict-local
  */
 
 import type { CallbackRef } from '../../types/react';
 
 import * as React from 'react';
 
-import { useElementCallback } from '../../shared/useElementCallback';
 import { errorMsg } from '../../shared/logUtils';
+import { useElementCallback } from '../../shared/useElementCallback';
+import { useViewportScale } from './ContextViewportScale';
 
 function errorUnimplemented(name: string) {
   if (__DEV__) {
@@ -33,6 +34,7 @@ type Options = {
 };
 
 export function useStrictDOMElement<T>({ tagName }: Options): CallbackRef<T> {
+  const { scale: viewportScale } = useViewportScale();
   const elementCallback = useElementCallback(
     React.useCallback(
       // $FlowFixMe[unclear-type]
@@ -83,6 +85,20 @@ export function useStrictDOMElement<T>({ tagName }: Options): CallbackRef<T> {
           };
         }
 
+        if (viewportScale !== 1) {
+          const getBoundingClientRect = node.getBoundingClientRect;
+          node.getBoundingClientRect = function () {
+            const rect = getBoundingClientRect.call(node);
+
+            return new DOMRect(
+              rect.x / viewportScale,
+              rect.y / viewportScale,
+              rect.width / viewportScale,
+              rect.height / viewportScale
+            );
+          };
+        }
+
         const { getRootNode } = node;
         if (getRootNode == null) {
           node.getRootNode = () => errorUnimplemented('getRootNode');
@@ -157,7 +173,7 @@ export function useStrictDOMElement<T>({ tagName }: Options): CallbackRef<T> {
           }
         }
       },
-      [tagName]
+      [tagName, viewportScale]
     )
   );
 
diff --git a/packages/react-strict-dom/src/native/modules/useStyleProps.js b/packages/react-strict-dom/src/native/modules/useStyleProps.js
index ed604680..2f509d61 100644
--- a/packages/react-strict-dom/src/native/modules/useStyleProps.js
+++ b/packages/react-strict-dom/src/native/modules/useStyleProps.js
@@ -20,6 +20,7 @@ import { flattenStyle } from './flattenStyle';
 import { useInheritedStyles } from './ContextInheritedStyles';
 import { usePseudoStates } from './usePseudoStates';
 import { useStyleTransition } from './useStyleTransition';
+import { useViewportScale } from './ContextViewportScale';
 
 type StyleOptions = {
   customProperties: ?CustomProperties,
@@ -66,6 +67,7 @@ export function useStyleProps(
 
   const { fontScale, height, width } = ReactNative.useWindowDimensions();
   const colorScheme = ReactNative.useColorScheme();
+  const { scale: viewportScale } = useViewportScale();
 
   // These values are already computed
   const {
@@ -104,6 +106,7 @@ export function useStyleProps(
       inheritedFontSize:
         typeof inheritedFontSize === 'number' ? inheritedFontSize : undefined,
       viewportHeight: height,
+      viewportScale,
       viewportWidth: width
     },
     flatStyle as $FlowFixMe
diff --git a/packages/react-strict-dom/src/native/stylex/CSSLengthUnitValue.js b/packages/react-strict-dom/src/native/stylex/CSSLengthUnitValue.js
index 5f8a5613..8e64ecd5 100644
--- a/packages/react-strict-dom/src/native/stylex/CSSLengthUnitValue.js
+++ b/packages/react-strict-dom/src/native/stylex/CSSLengthUnitValue.js
@@ -17,16 +17,15 @@ type ResolvePixelValueOptions = $ReadOnly<{
   fontScale: number | void,
   inheritedFontSize: ?number,
   viewportHeight: number,
+  viewportScale: number,
   viewportWidth: number
 }>;
 
-type ParsedValue = [+value: number, +unit: CSSLengthUnitType] | null;
-
-const memoizedValues = new Map<string, ParsedValue>();
+const memoizedValues = new Map<string, CSSLengthUnitValue | null>();
 
 // TODO: this only works on simple values
 export class CSSLengthUnitValue {
-  static parse(input: string): ParsedValue {
+  static parse(input: string): CSSLengthUnitValue | null {
     const memoizedValue = memoizedValues.get(input);
     if (memoizedValue !== undefined) {
       return memoizedValue;
@@ -40,9 +39,9 @@ export class CSSLengthUnitValue {
     const value = match[1];
     const unit: $FlowFixMe = match[2];
     const parsedFloat: number = parseFloat(value);
-    const parsedValue: ParsedValue = [parsedFloat, unit];
-    memoizedValues.set(input, parsedValue);
-    return parsedValue;
+    const cssLengthUnitValue = new CSSLengthUnitValue(parsedFloat, unit);
+    memoizedValues.set(input, cssLengthUnitValue);
+    return cssLengthUnitValue;
   }
 
   value: number;
@@ -55,10 +54,11 @@ export class CSSLengthUnitValue {
 
   resolvePixelValue(options: ResolvePixelValueOptions): number {
     const {
-      viewportWidth,
-      viewportHeight,
       fontScale = 1,
-      inheritedFontSize
+      inheritedFontSize,
+      viewportHeight,
+      viewportScale,
+      viewportWidth
     } = options;
     const unit = this.unit;
     const value = this.value;
@@ -66,16 +66,16 @@ export class CSSLengthUnitValue {
     switch (unit) {
       case 'em': {
         if (inheritedFontSize == null) {
-          return fontScale * 16 * value;
+          return fontScale * 16 * value * viewportScale;
         } else {
           return inheritedFontSize * value;
         }
       }
       case 'px': {
-        return value;
+        return value * viewportScale;
       }
       case 'rem': {
-        return fontScale * 16 * value;
+        return fontScale * 16 * value * viewportScale;
       }
       case 'vh': {
         return viewportHeight * valuePercent;
diff --git a/packages/react-strict-dom/src/native/stylex/CSSTransformValue.js b/packages/react-strict-dom/src/native/stylex/CSSTransformValue.js
new file mode 100644
index 00000000..70c6d30c
--- /dev/null
+++ b/packages/react-strict-dom/src/native/stylex/CSSTransformValue.js
@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+import type { ReactNativeTransform } from '../../types/renderer.native';
+
+export class CSSTransformValue {
+  value: $ReadOnlyArray<ReactNativeTransform>;
+  cachedScaledTransform: void | {
+    viewportScale: number,
+    value: $ReadOnlyArray<ReactNativeTransform>
+  };
+
+  constructor(value: $ReadOnlyArray<ReactNativeTransform>) {
+    this.value = value;
+  }
+
+  resolveTransformValue(
+    viewportScale: number
+  ): $ReadOnlyArray<ReactNativeTransform> {
+    if (viewportScale === 1) {
+      return this.value;
+    }
+    if (
+      this.cachedScaledTransform != null &&
+      this.cachedScaledTransform.viewportScale === viewportScale
+    ) {
+      return this.cachedScaledTransform.value;
+    }
+
+    const scaledTransform = this.value.map((transform) => {
+      if (
+        transform.translateX != null &&
+        typeof transform.translateX === 'number'
+      ) {
+        return { translateX: transform.translateX * viewportScale };
+      }
+      if (
+        transform.translateY != null &&
+        typeof transform.translateY === 'number'
+      ) {
+        return { translateY: transform.translateY * viewportScale };
+      }
+      return transform;
+    });
+
+    this.cachedScaledTransform = {
+      viewportScale,
+      value: scaledTransform
+    };
+
+    return scaledTransform;
+  }
+}
diff --git a/packages/react-strict-dom/src/native/stylex/__tests__/parseTransform-test.js b/packages/react-strict-dom/src/native/stylex/__tests__/parseTransform-test.js
index 49b93530..e9eff5e4 100644
--- a/packages/react-strict-dom/src/native/stylex/__tests__/parseTransform-test.js
+++ b/packages/react-strict-dom/src/native/stylex/__tests__/parseTransform-test.js
@@ -5,7 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { parseTransform } from '../parseTransform';
+import { parseTransform as parseTransformImpl } from '../parseTransform';
+
+function parseTransform(transform) {
+  return parseTransformImpl(transform).resolveTransformValue(1);
+}
 
 describe('parseTransform', () => {
   test('perspective', () => {
diff --git a/packages/react-strict-dom/src/native/stylex/index.js b/packages/react-strict-dom/src/native/stylex/index.js
index 9931568d..1b4ad203 100644
--- a/packages/react-strict-dom/src/native/stylex/index.js
+++ b/packages/react-strict-dom/src/native/stylex/index.js
@@ -19,12 +19,14 @@ import type {
 } from '../../types/styles';
 
 import { CSSLengthUnitValue } from './CSSLengthUnitValue';
+import { CSSTransformValue } from './CSSTransformValue';
 import { CSSUnparsedValue } from './typed-om/CSSUnparsedValue';
 import { errorMsg, warnMsg } from '../../shared/logUtils';
 import { fixContentBox } from './fixContentBox';
 import { flattenStyle } from './flattenStyleXStyles';
 import { isAllowedShortFormValue } from './isAllowedShortFormValue';
 import { isAllowedStyleKey } from './isAllowedStyleKey';
+import { lengthStyleKeySet } from './isLengthStyleKey';
 import { mediaQueryMatches } from './mediaQueryMatches';
 import { parseTextShadow } from './parseTextShadow';
 import { parseTimeValue } from './parseTimeValue';
@@ -44,6 +46,7 @@ type ResolveStyleOptions = $ReadOnly<{
   hover?: ?boolean,
   inheritedFontSize: ?number,
   viewportHeight: number,
+  viewportScale: number,
   viewportWidth: number,
   writingDirection?: ?'ltr' | 'rtl'
 }>;
@@ -197,7 +200,7 @@ function processStyle(
 
       const maybeLengthUnitValue = CSSLengthUnitValue.parse(styleValue);
       if (maybeLengthUnitValue != null) {
-        result[propName] = new CSSLengthUnitValue(...maybeLengthUnitValue);
+        result[propName] = maybeLengthUnitValue;
         continue;
         // React Native doesn't support these keywords or functions
       } else if (styleValue === 'inherit' || styleValue === 'unset') {
@@ -295,6 +298,7 @@ function resolveStyle(
     hover,
     inheritedFontSize,
     viewportHeight,
+    viewportScale,
     viewportWidth
   } = options;
   const colorScheme = options.colorScheme || 'light';
@@ -331,6 +335,7 @@ function resolveStyle(
           fontScale,
           inheritedFontSize: inheritedFontSize,
           viewportHeight,
+          viewportScale,
           viewportWidth
         });
         continue;
@@ -343,6 +348,7 @@ function resolveStyle(
             fontScale,
             inheritedFontSize: fontSize,
             viewportHeight,
+            viewportScale,
             viewportWidth
           });
         } else {
@@ -352,6 +358,19 @@ function resolveStyle(
       }
     }
 
+    if (styleValue instanceof CSSTransformValue) {
+      result[propName] = styleValue.resolveTransformValue(viewportScale);
+      continue;
+    }
+    if (
+      viewportScale !== 1 &&
+      typeof styleValue === 'number' &&
+      lengthStyleKeySet.has(propName)
+    ) {
+      result[propName] = styleValue * viewportScale;
+      continue;
+    }
+
     // Resolve the stylex object-value syntax
     if (
       styleValue != null &&
diff --git a/packages/react-strict-dom/src/native/stylex/isLengthStyleKey.js b/packages/react-strict-dom/src/native/stylex/isLengthStyleKey.js
new file mode 100644
index 00000000..7c77763d
--- /dev/null
+++ b/packages/react-strict-dom/src/native/stylex/isLengthStyleKey.js
@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+import { version } from '../modules/version';
+
+export const lengthStyleKeySet: Set<string> = new Set([
+  'blockSize',
+  'borderBottomLeftRadius',
+  'borderBottomRightRadius',
+  'borderBottomWidth',
+  'borderBlockWidth',
+  'borderBlockEndWidth',
+  'borderBlockStartWidth',
+  'borderEndEndRadius',
+  'borderEndStartRadius',
+  'borderInlineWidth',
+  'borderInlineEndWidth',
+  'borderInlineStartWidth',
+  'borderLeftWidth',
+  'borderRadius',
+  'borderRightWidth',
+  'borderStartEndRadius',
+  'borderStartStartRadius',
+  'borderTopLeftRadius',
+  'borderTopRightRadius',
+  'borderTopWidth',
+  'borderWidth',
+  'bottom',
+  'columnGap',
+  'gap',
+  'height',
+  'inlineSize',
+  'inset',
+  'insetBlock',
+  'insetBlockEnd',
+  'insetBlockStart',
+  'insetInline',
+  'insetInlineEnd',
+  'insetInlineStart',
+  'left',
+  'margin',
+  'marginBlock',
+  'marginBlockEnd',
+  'marginBlockStart',
+  'marginBottom',
+  'marginInline',
+  'marginInlineEnd',
+  'marginInlineStart',
+  'marginLeft',
+  'marginRight',
+  'marginTop',
+  'maxBlockSize',
+  'maxHeight',
+  'maxInlineSize',
+  'maxWidth',
+  'minBlockSize',
+  'minHeight',
+  'minInlineSize',
+  'minWidth',
+  'padding',
+  'paddingBlock',
+  'paddingBlockEnd',
+  'paddingBlockStart',
+  'paddingBottom',
+  'paddingInline',
+  'paddingInlineEnd',
+  'paddingInlineStart',
+  'paddingLeft',
+  'paddingRight',
+  'paddingTop',
+  'right',
+  'rowGap',
+  'top',
+  'width'
+]);
+
+if (version.experimental) {
+  lengthStyleKeySet.add('outlineOffset');
+  lengthStyleKeySet.add('outlineWidth');
+}
diff --git a/packages/react-strict-dom/src/native/stylex/parseTransform.js b/packages/react-strict-dom/src/native/stylex/parseTransform.js
index 8c0f13de..aca32836 100644
--- a/packages/react-strict-dom/src/native/stylex/parseTransform.js
+++ b/packages/react-strict-dom/src/native/stylex/parseTransform.js
@@ -9,16 +9,16 @@
 
 import type { ReactNativeTransform } from '../../types/renderer.native';
 
+import { CSSTransformValue } from './CSSTransformValue';
+
 const transformRegex1 =
   /(perspective|scale|scaleX|scaleY|scaleZ|translateX|translateY)\(([0-9.+\-eE]+)(px|%)?\)/;
 const transformRegex2 = /(rotate|rotateX|rotateY|rotateZ|skewX|skewY)\((.*)\)/;
 const transformRegex3 = /matrix\((.*)\)/;
 
-const memoizedValues = new Map<string, ReactNativeTransform[]>();
+const memoizedValues = new Map<string, CSSTransformValue>();
 
-export function parseTransform(
-  transform: string
-): $ReadOnlyArray<ReactNativeTransform> {
+export function parseTransform(transform: string): CSSTransformValue {
   const memoizedValue = memoizedValues.get(transform);
   if (memoizedValue != null) {
     return memoizedValue;
@@ -114,7 +114,7 @@ export function parseTransform(
     }
   }
 
-  memoizedValues.set(transform, parsedTransforms);
-
-  return parsedTransforms;
+  const cssTransformValue = new CSSTransformValue(parsedTransforms);
+  memoizedValues.set(transform, cssTransformValue);
+  return cssTransformValue;
 }
diff --git a/packages/react-strict-dom/tests/__snapshots__/html-test.native.js.snap-native b/packages/react-strict-dom/tests/__snapshots__/html-test.native.js.snap-native
index 8807fc0d..eb16da34 100644
--- a/packages/react-strict-dom/tests/__snapshots__/html-test.native.js.snap-native
+++ b/packages/react-strict-dom/tests/__snapshots__/html-test.native.js.snap-native
@@ -2022,3 +2022,42 @@ exports[`<html.*> style polyfills lineClamp workaround for Android 1`] = `
   text
 </Text>
 `;
+
+exports[`<html.*> viewport width lengths are scaled according to viewport width: scaled lengths 1`] = `
+<ViewNativeComponent
+  ref={[Function]}
+  style={
+    {
+      "borderWidth": 0.75,
+      "boxSizing": "content-box",
+      "height": 75,
+      "margin": 15,
+      "padding": 24,
+      "position": "static",
+      "transform": [
+        {
+          "translateX": 7.5,
+        },
+        {
+          "translateY": 15,
+        },
+      ],
+      "width": 150,
+    }
+  }
+>
+  <Text
+    ref={[Function]}
+    style={
+      {
+        "boxSizing": "content-box",
+        "fontSize": 24,
+        "lineHeight": 24,
+        "position": "static",
+      }
+    }
+  >
+    Scaled content
+  </Text>
+</ViewNativeComponent>
+`;
diff --git a/packages/react-strict-dom/tests/css-test.native.js b/packages/react-strict-dom/tests/css-test.native.js
index e1b52a48..5af3b6ea 100644
--- a/packages/react-strict-dom/tests/css-test.native.js
+++ b/packages/react-strict-dom/tests/css-test.native.js
@@ -10,7 +10,8 @@ import { css } from 'react-strict-dom';
 const mockOptions = {
   hover: false,
   viewportHeight: 600,
-  viewportWidth: 320
+  viewportWidth: 320,
+  viewportScale: 1
 };
 
 /**
@@ -1731,7 +1732,8 @@ expect.extend({
     const theProps = css.props.call(
       {
         viewportHeight: height,
-        viewportWidth: width
+        viewportWidth: width,
+        viewportScale: 1
       },
       underTest
     );
diff --git a/packages/react-strict-dom/tests/html-test.native.js b/packages/react-strict-dom/tests/html-test.native.js
index 27ff635e..e12bbffc 100644
--- a/packages/react-strict-dom/tests/html-test.native.js
+++ b/packages/react-strict-dom/tests/html-test.native.js
@@ -1630,4 +1630,45 @@ describe('<html.*>', () => {
     });
     */
   });
+
+  describe('viewport width', () => {
+    test('lengths are scaled according to viewport width', () => {
+      const { ViewportProvider } = contexts;
+      const ReactNative = require('../src/native/react-native');
+      jest
+        .spyOn(ReactNative, 'useWindowDimensions')
+        .mockReturnValue({ width: 960 });
+
+      const styles = css.create({
+        container: {
+          borderWidth: '1px',
+          height: '100px',
+          margin: '20px',
+          padding: '2em',
+          width: '200px',
+          transform: 'translateX(10px) translateY(20px)'
+        },
+        text: {
+          fontSize: '2rem',
+          lineHeight: '1em'
+        }
+      });
+
+      let root;
+      act(() => {
+        root = create(
+          <ViewportProvider viewportWidth={1280}>
+            <html.div style={styles.container}>
+              <html.span style={styles.text}>Scaled content</html.span>
+            </html.div>
+          </ViewportProvider>
+        );
+      });
+
+      // scale factor 0.75
+      expect(root.toJSON()).toMatchSnapshot('scaled lengths');
+
+      ReactNative.useWindowDimensions.mockRestore();
+    });
+  });
 });

From 07568d303c8a609020548f7a8949506c335d925b Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Thu, 24 Jul 2025 10:34:02 -0700
Subject: [PATCH 09/24] Avoid calling `super()` on native

This is currently a source of lost performance on native.
---
 .../src/native/stylex/typed-om/CSSUnparsedValue.js          | 5 ++---
 .../src/native/stylex/typed-om/CSSVariableReferenceValue.js | 6 ++----
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/react-strict-dom/src/native/stylex/typed-om/CSSUnparsedValue.js b/packages/react-strict-dom/src/native/stylex/typed-om/CSSUnparsedValue.js
index 0389d3a8..901c283e 100644
--- a/packages/react-strict-dom/src/native/stylex/typed-om/CSSUnparsedValue.js
+++ b/packages/react-strict-dom/src/native/stylex/typed-om/CSSUnparsedValue.js
@@ -8,7 +8,6 @@
  */
 
 import valueParser from 'postcss-value-parser';
-import { CSSStyleValue } from './CSSStyleValue';
 import { CSSVariableReferenceValue } from './CSSVariableReferenceValue';
 import { errorMsg, warnMsg } from '../../../shared/logUtils';
 
@@ -39,7 +38,7 @@ function splitComponentValueListByComma(
 const memoizedValues = new Map<string, CSSUnparsedValue>();
 
 // https://drafts.css-houdini.org/css-typed-om-1/#cssunparsedvalue
-export class CSSUnparsedValue extends CSSStyleValue {
+export class CSSUnparsedValue /*extends CSSStyleValue*/ {
   static #resolveVariableName(input: PostCSSValueASTNode[]): string | null {
     const cleanedInput = input.filter((i) => i.type === 'word');
     if (cleanedInput.length !== 1) {
@@ -148,7 +147,7 @@ export class CSSUnparsedValue extends CSSStyleValue {
   #tokens: CSSUnparsedSegment[];
 
   constructor(members: CSSUnparsedSegment[]) {
-    super();
+    // No super() call because it's slow in Hermes
     this.#tokens = members;
   }
 
diff --git a/packages/react-strict-dom/src/native/stylex/typed-om/CSSVariableReferenceValue.js b/packages/react-strict-dom/src/native/stylex/typed-om/CSSVariableReferenceValue.js
index 50e68c3f..7333458f 100644
--- a/packages/react-strict-dom/src/native/stylex/typed-om/CSSVariableReferenceValue.js
+++ b/packages/react-strict-dom/src/native/stylex/typed-om/CSSVariableReferenceValue.js
@@ -9,10 +9,8 @@
 
 import type { CSSUnparsedValue } from './CSSUnparsedValue';
 
-import { CSSStyleValue } from './CSSStyleValue';
-
 // https://drafts.css-houdini.org/css-typed-om-1/#cssvariablereferencevalue
-export class CSSVariableReferenceValue extends CSSStyleValue {
+export class CSSVariableReferenceValue /*extends CSSStyleValue*/ {
   // https://drafts.css-houdini.org/css-typed-om-1/#custom-property-name-string
   static #validateVariableName(variable: string): void {
     if (!variable.startsWith('--')) {
@@ -27,7 +25,7 @@ export class CSSVariableReferenceValue extends CSSStyleValue {
     if (__DEV__) {
       CSSVariableReferenceValue.#validateVariableName(variable);
     }
-    super();
+    // No super() call because it's slow in Hermes
     this.#variable = variable;
     this.#fallback = fallback ?? null;
   }

From d0282af54a15bf3fab111913efd8756b64dfd303 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Thu, 24 Jul 2025 10:36:46 -0700
Subject: [PATCH 10/24] Avoid private class fields

This is currently a source of lost performance on native.
---
 .../stylex/typed-om/CSSUnparsedValue.js       | 24 +++++++++----------
 .../typed-om/CSSVariableReferenceValue.js     | 22 ++++++++---------
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/packages/react-strict-dom/src/native/stylex/typed-om/CSSUnparsedValue.js b/packages/react-strict-dom/src/native/stylex/typed-om/CSSUnparsedValue.js
index 901c283e..048eee1f 100644
--- a/packages/react-strict-dom/src/native/stylex/typed-om/CSSUnparsedValue.js
+++ b/packages/react-strict-dom/src/native/stylex/typed-om/CSSUnparsedValue.js
@@ -39,7 +39,7 @@ const memoizedValues = new Map<string, CSSUnparsedValue>();
 
 // https://drafts.css-houdini.org/css-typed-om-1/#cssunparsedvalue
 export class CSSUnparsedValue /*extends CSSStyleValue*/ {
-  static #resolveVariableName(input: PostCSSValueASTNode[]): string | null {
+  static _resolveVariableName(input: PostCSSValueASTNode[]): string | null {
     const cleanedInput = input.filter((i) => i.type === 'word');
     if (cleanedInput.length !== 1) {
       return null;
@@ -47,7 +47,7 @@ export class CSSUnparsedValue /*extends CSSStyleValue*/ {
     return valueParser.stringify(cleanedInput[0]);
   }
 
-  static #resolveUnparsedValue(
+  static _resolveUnparsedValue(
     input: PostCSSValueASTNode[],
     depth: number = 0
   ): CSSUnparsedValue {
@@ -77,7 +77,7 @@ export class CSSUnparsedValue /*extends CSSStyleValue*/ {
       if (currentValue.type === 'function') {
         if (currentValue.value === 'var') {
           const args = splitComponentValueListByComma(currentValue.nodes);
-          const variableName = CSSUnparsedValue.#resolveVariableName(args[0]);
+          const variableName = CSSUnparsedValue._resolveVariableName(args[0]);
           if (variableName == null) {
             if (__DEV__) {
               warnMsg(
@@ -91,7 +91,7 @@ export class CSSUnparsedValue /*extends CSSStyleValue*/ {
 
           const fallbackValue =
             args[1] != null
-              ? CSSUnparsedValue.#resolveUnparsedValue(args[1], depth + 1)
+              ? CSSUnparsedValue._resolveUnparsedValue(args[1], depth + 1)
               : undefined;
 
           try {
@@ -109,7 +109,7 @@ export class CSSUnparsedValue /*extends CSSStyleValue*/ {
         } else {
           // stringify the function manually but still attempt to resolve the args
           appendString(`${currentValue.value}(`);
-          const functionArgs = CSSUnparsedValue.#resolveUnparsedValue(
+          const functionArgs = CSSUnparsedValue._resolveUnparsedValue(
             currentValue.nodes,
             depth + 1
           );
@@ -139,32 +139,32 @@ export class CSSUnparsedValue /*extends CSSStyleValue*/ {
     }
     const componentValueList = valueParser(input).nodes;
     const parsedValue =
-      CSSUnparsedValue.#resolveUnparsedValue(componentValueList);
+      CSSUnparsedValue._resolveUnparsedValue(componentValueList);
     memoizedValues.set(input, parsedValue);
     return parsedValue;
   }
 
-  #tokens: CSSUnparsedSegment[];
+  _tokens: CSSUnparsedSegment[];
 
   constructor(members: CSSUnparsedSegment[]) {
     // No super() call because it's slow in Hermes
-    this.#tokens = members;
+    this._tokens = members;
   }
 
   get(index: number): CSSUnparsedSegment {
-    return this.#tokens[index];
+    return this._tokens[index];
   }
 
   get size(): number {
-    return this.#tokens.length;
+    return this._tokens.length;
   }
 
   values(): Iterator<CSSUnparsedSegment> {
-    return this.#tokens.values();
+    return this._tokens.values();
   }
 
   toString(): string {
-    return this.#tokens
+    return this._tokens
       .map((t) => t.toString())
       .join('')
       .trim();
diff --git a/packages/react-strict-dom/src/native/stylex/typed-om/CSSVariableReferenceValue.js b/packages/react-strict-dom/src/native/stylex/typed-om/CSSVariableReferenceValue.js
index 7333458f..e0ca3bc8 100644
--- a/packages/react-strict-dom/src/native/stylex/typed-om/CSSVariableReferenceValue.js
+++ b/packages/react-strict-dom/src/native/stylex/typed-om/CSSVariableReferenceValue.js
@@ -12,39 +12,39 @@ import type { CSSUnparsedValue } from './CSSUnparsedValue';
 // https://drafts.css-houdini.org/css-typed-om-1/#cssvariablereferencevalue
 export class CSSVariableReferenceValue /*extends CSSStyleValue*/ {
   // https://drafts.css-houdini.org/css-typed-om-1/#custom-property-name-string
-  static #validateVariableName(variable: string): void {
+  static _validateVariableName(variable: string): void {
     if (!variable.startsWith('--')) {
       throw new TypeError(`Invalid custom property name: ${variable}`);
     }
   }
 
-  #variable: string;
-  #fallback: CSSUnparsedValue | null;
+  _variable: string;
+  _fallback: CSSUnparsedValue | null;
 
   constructor(variable: string, fallback?: CSSUnparsedValue) {
     if (__DEV__) {
-      CSSVariableReferenceValue.#validateVariableName(variable);
+      CSSVariableReferenceValue._validateVariableName(variable);
     }
     // No super() call because it's slow in Hermes
-    this.#variable = variable;
-    this.#fallback = fallback ?? null;
+    this._variable = variable;
+    this._fallback = fallback ?? null;
   }
 
   get variable(): string {
-    return this.#variable;
+    return this._variable;
   }
 
   set variable(variable: string): void {
-    this.#variable = variable;
+    this._variable = variable;
   }
 
   get fallback(): CSSUnparsedValue | null {
-    return this.#fallback;
+    return this._fallback;
   }
 
   toString(): string {
-    return `var(${this.#variable}${
-      this.#fallback ? `, ${this.#fallback.toString()}` : ''
+    return `var(${this._variable}${
+      this._fallback ? `, ${this._fallback.toString()}` : ''
     })`;
   }
 }

From 7a952e1a8cee5d24a36bfb0a6ee241ded2e8c8ba Mon Sep 17 00:00:00 2001
From: Ken Sheedlo <ksheedlo@meta.com>
Date: Fri, 25 Jul 2025 12:25:32 -0600
Subject: [PATCH 11/24] Remove flex warning for flex item properties

---
 packages/react-strict-dom/src/native/stylex/index.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/react-strict-dom/src/native/stylex/index.js b/packages/react-strict-dom/src/native/stylex/index.js
index 1b4ad203..47dc3e83 100644
--- a/packages/react-strict-dom/src/native/stylex/index.js
+++ b/packages/react-strict-dom/src/native/stylex/index.js
@@ -725,13 +725,8 @@ export function props(
       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 ||

From 93a8b74ab1f6e46a7d604b3b08e7084096d7a60a Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Fri, 25 Jul 2025 12:58:39 -0700
Subject: [PATCH 12/24] Set the default viewportScale to 1 even if no provider
 is used

---
 .../src/native/stylex/CSSLengthUnitValue.js                 | 2 +-
 .../react-strict-dom/src/native/stylex/CSSTransformValue.js | 2 +-
 .../src/native/stylex/__tests__/parseTransform-test.js      | 2 +-
 packages/react-strict-dom/src/native/stylex/index.js        | 4 ++--
 packages/react-strict-dom/tests/css-test.native.js          | 6 ++----
 5 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/react-strict-dom/src/native/stylex/CSSLengthUnitValue.js b/packages/react-strict-dom/src/native/stylex/CSSLengthUnitValue.js
index 8e64ecd5..ac0b2158 100644
--- a/packages/react-strict-dom/src/native/stylex/CSSLengthUnitValue.js
+++ b/packages/react-strict-dom/src/native/stylex/CSSLengthUnitValue.js
@@ -57,7 +57,7 @@ export class CSSLengthUnitValue {
       fontScale = 1,
       inheritedFontSize,
       viewportHeight,
-      viewportScale,
+      viewportScale = 1,
       viewportWidth
     } = options;
     const unit = this.unit;
diff --git a/packages/react-strict-dom/src/native/stylex/CSSTransformValue.js b/packages/react-strict-dom/src/native/stylex/CSSTransformValue.js
index 70c6d30c..5edb3a51 100644
--- a/packages/react-strict-dom/src/native/stylex/CSSTransformValue.js
+++ b/packages/react-strict-dom/src/native/stylex/CSSTransformValue.js
@@ -21,7 +21,7 @@ export class CSSTransformValue {
   }
 
   resolveTransformValue(
-    viewportScale: number
+    viewportScale?: number = 1
   ): $ReadOnlyArray<ReactNativeTransform> {
     if (viewportScale === 1) {
       return this.value;
diff --git a/packages/react-strict-dom/src/native/stylex/__tests__/parseTransform-test.js b/packages/react-strict-dom/src/native/stylex/__tests__/parseTransform-test.js
index e9eff5e4..cdf1f8cb 100644
--- a/packages/react-strict-dom/src/native/stylex/__tests__/parseTransform-test.js
+++ b/packages/react-strict-dom/src/native/stylex/__tests__/parseTransform-test.js
@@ -8,7 +8,7 @@
 import { parseTransform as parseTransformImpl } from '../parseTransform';
 
 function parseTransform(transform) {
-  return parseTransformImpl(transform).resolveTransformValue(1);
+  return parseTransformImpl(transform).resolveTransformValue();
 }
 
 describe('parseTransform', () => {
diff --git a/packages/react-strict-dom/src/native/stylex/index.js b/packages/react-strict-dom/src/native/stylex/index.js
index 47dc3e83..dc71781c 100644
--- a/packages/react-strict-dom/src/native/stylex/index.js
+++ b/packages/react-strict-dom/src/native/stylex/index.js
@@ -46,7 +46,7 @@ type ResolveStyleOptions = $ReadOnly<{
   hover?: ?boolean,
   inheritedFontSize: ?number,
   viewportHeight: number,
-  viewportScale: number,
+  viewportScale: number | void,
   viewportWidth: number,
   writingDirection?: ?'ltr' | 'rtl'
 }>;
@@ -298,7 +298,7 @@ function resolveStyle(
     hover,
     inheritedFontSize,
     viewportHeight,
-    viewportScale,
+    viewportScale = 1,
     viewportWidth
   } = options;
   const colorScheme = options.colorScheme || 'light';
diff --git a/packages/react-strict-dom/tests/css-test.native.js b/packages/react-strict-dom/tests/css-test.native.js
index 5af3b6ea..e1b52a48 100644
--- a/packages/react-strict-dom/tests/css-test.native.js
+++ b/packages/react-strict-dom/tests/css-test.native.js
@@ -10,8 +10,7 @@ import { css } from 'react-strict-dom';
 const mockOptions = {
   hover: false,
   viewportHeight: 600,
-  viewportWidth: 320,
-  viewportScale: 1
+  viewportWidth: 320
 };
 
 /**
@@ -1732,8 +1731,7 @@ expect.extend({
     const theProps = css.props.call(
       {
         viewportHeight: height,
-        viewportWidth: width,
-        viewportScale: 1
+        viewportWidth: width
       },
       underTest
     );

From 2f8aa5f2414bd0dbbad4b6471b47caec28692bdc Mon Sep 17 00:00:00 2001
From: Martin Booth <martinbooth@fb.com>
Date: Fri, 25 Jul 2025 17:18:24 -0700
Subject: [PATCH 13/24] Make elementCallback idempotent if using a custom
 viewport width (#350)

I hadn't realised this got called multiple times with the same node
and it isn't currently idempotent so each time a component
re-renders it re-wraps getBoundingClientRect, increasing the amount
the returned rect is scaled by each time.

Issue is only present if viewportScale !== 1

Fix captures the original getBoundingClientRect in a WeakMap
so subsequent calls will re-use the original function when
wrapping
---
 .../src/native/modules/useStrictDOMElement.js | 17 ++++--
 .../tests/html-test.native.js                 | 53 +++++++++++++++++--
 2 files changed, 62 insertions(+), 8 deletions(-)

diff --git a/packages/react-strict-dom/src/native/modules/useStrictDOMElement.js b/packages/react-strict-dom/src/native/modules/useStrictDOMElement.js
index 8825366a..5f0d5cd5 100644
--- a/packages/react-strict-dom/src/native/modules/useStrictDOMElement.js
+++ b/packages/react-strict-dom/src/native/modules/useStrictDOMElement.js
@@ -33,12 +33,16 @@ type Options = {
   tagName: string
 };
 
+// $FlowFixMe[unclear-type]
+type Node = any;
+
+const originalGetBoundingClientRects = new WeakMap<Node, () => DOMRect>();
+
 export function useStrictDOMElement<T>({ tagName }: Options): CallbackRef<T> {
   const { scale: viewportScale } = useViewportScale();
   const elementCallback = useElementCallback(
     React.useCallback(
-      // $FlowFixMe[unclear-type]
-      (node: any) => {
+      (node: Node) => {
         Object.defineProperty(node, 'nodeName', {
           value: tagName.toUpperCase(),
           writable: false
@@ -86,9 +90,14 @@ export function useStrictDOMElement<T>({ tagName }: Options): CallbackRef<T> {
         }
 
         if (viewportScale !== 1) {
-          const getBoundingClientRect = node.getBoundingClientRect;
+          let getBoundingClientRect = originalGetBoundingClientRects.get(node);
+          if (getBoundingClientRect == null) {
+            getBoundingClientRect = node.getBoundingClientRect;
+            originalGetBoundingClientRects.set(node, getBoundingClientRect);
+          }
+          const getBoundingRectConst = getBoundingClientRect;
           node.getBoundingClientRect = function () {
-            const rect = getBoundingClientRect.call(node);
+            const rect = getBoundingRectConst.call(node);
 
             return new DOMRect(
               rect.x / viewportScale,
diff --git a/packages/react-strict-dom/tests/html-test.native.js b/packages/react-strict-dom/tests/html-test.native.js
index e12bbffc..c209aa8d 100644
--- a/packages/react-strict-dom/tests/html-test.native.js
+++ b/packages/react-strict-dom/tests/html-test.native.js
@@ -9,6 +9,15 @@ import React from 'react';
 import { css, html, contexts } from 'react-strict-dom';
 import { act, create } from 'react-test-renderer';
 
+global.DOMRect = class DOMRect {
+  constructor(x, y, width, height) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+  }
+};
+
 describe('<html.*>', () => {
   beforeEach(() => {
     // avoid console messages for these tests
@@ -1632,12 +1641,20 @@ describe('<html.*>', () => {
   });
 
   describe('viewport width', () => {
-    test('lengths are scaled according to viewport width', () => {
-      const { ViewportProvider } = contexts;
-      const ReactNative = require('../src/native/react-native');
+    const ReactNative = require('../src/native/react-native');
+
+    beforeEach(() => {
       jest
         .spyOn(ReactNative, 'useWindowDimensions')
         .mockReturnValue({ width: 960 });
+    });
+
+    afterEach(() => {
+      ReactNative.useWindowDimensions.mockRestore();
+    });
+
+    test('lengths are scaled according to viewport width', () => {
+      const { ViewportProvider } = contexts;
 
       const styles = css.create({
         container: {
@@ -1667,8 +1684,36 @@ describe('<html.*>', () => {
 
       // scale factor 0.75
       expect(root.toJSON()).toMatchSnapshot('scaled lengths');
+    });
 
-      ReactNative.useWindowDimensions.mockRestore();
+    test('getClientBoundingRect() returns scaled values', () => {
+      const { ViewportProvider } = contexts;
+
+      function createNodeMock(element) {
+        const obj = {};
+        obj.addEventListener_unstable = () => {};
+        obj.blur = () => {};
+        obj.focus = () => {};
+        obj.removeEventListener_unstable = () => {};
+        obj.getBoundingClientRect = () => new DOMRect(21, 21, 99, 99);
+        return obj;
+      }
+
+      let scaledDomRect;
+      act(() => {
+        create(
+          <ViewportProvider viewportWidth={1280}>
+            <html.input
+              ref={(node) => {
+                scaledDomRect = node.getBoundingClientRect();
+              }}
+            />
+          </ViewportProvider>,
+          { createNodeMock }
+        );
+      });
+
+      expect(scaledDomRect).toEqual(new DOMRect(28, 28, 132, 132));
     });
   });
 });

From e62d177aca089e859a880cffbb6e010e8ea78372 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Sat, 26 Jul 2025 19:44:26 -0700
Subject: [PATCH 14/24] Fix postcss-value-parser flow types (#351)

Don't declare global types in the flow-typed libdef for
postcss-value-parser. Add a types file that can included in the build to
avoid errors for missing type definitions. These definitions are
required now that CSSUnparsedValue doesn't use private fields and the
types appear in the build artefacts.
---
 .../stylex/typed-om/CSSUnparsedValue.js       |  10 +-
 .../src/types/value-parser.js                 |  55 +++++++
 .../npm/postcss-value-parser_vx.x.x.js        | 134 +++++++++---------
 3 files changed, 128 insertions(+), 71 deletions(-)
 create mode 100644 packages/react-strict-dom/src/types/value-parser.js

diff --git a/packages/react-strict-dom/src/native/stylex/typed-om/CSSUnparsedValue.js b/packages/react-strict-dom/src/native/stylex/typed-om/CSSUnparsedValue.js
index 048eee1f..58c72231 100644
--- a/packages/react-strict-dom/src/native/stylex/typed-om/CSSUnparsedValue.js
+++ b/packages/react-strict-dom/src/native/stylex/typed-om/CSSUnparsedValue.js
@@ -7,6 +7,8 @@
  * @flow strict
  */
 
+import type { CSSValueASTNode } from '../../../types/value-parser';
+
 import valueParser from 'postcss-value-parser';
 import { CSSVariableReferenceValue } from './CSSVariableReferenceValue';
 import { errorMsg, warnMsg } from '../../../shared/logUtils';
@@ -17,8 +19,8 @@ type CSSUnparsedSegment = string | CSSVariableReferenceValue;
 const MAX_RESOLVE_DEPTH = 50;
 
 function splitComponentValueListByComma(
-  input: PostCSSValueASTNode[]
-): PostCSSValueASTNode[][] {
+  input: CSSValueASTNode[]
+): CSSValueASTNode[][] {
   const output = [];
   let current = [];
   for (const value of input) {
@@ -39,7 +41,7 @@ const memoizedValues = new Map<string, CSSUnparsedValue>();
 
 // https://drafts.css-houdini.org/css-typed-om-1/#cssunparsedvalue
 export class CSSUnparsedValue /*extends CSSStyleValue*/ {
-  static _resolveVariableName(input: PostCSSValueASTNode[]): string | null {
+  static _resolveVariableName(input: CSSValueASTNode[]): string | null {
     const cleanedInput = input.filter((i) => i.type === 'word');
     if (cleanedInput.length !== 1) {
       return null;
@@ -48,7 +50,7 @@ export class CSSUnparsedValue /*extends CSSStyleValue*/ {
   }
 
   static _resolveUnparsedValue(
-    input: PostCSSValueASTNode[],
+    input: CSSValueASTNode[],
     depth: number = 0
   ): CSSUnparsedValue {
     if (depth > MAX_RESOLVE_DEPTH) {
diff --git a/packages/react-strict-dom/src/types/value-parser.js b/packages/react-strict-dom/src/types/value-parser.js
new file mode 100644
index 00000000..2fb599c0
--- /dev/null
+++ b/packages/react-strict-dom/src/types/value-parser.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+export type CSSValueASTNode =
+  | {
+      type: 'word' | 'unicode-range',
+      value: string,
+      sourceIndex: number,
+      sourceEndIndex: number
+    }
+  | {
+      type: 'string' | 'comment',
+      value: string,
+      quote: '"' | "'",
+      sourceIndex: number,
+      sourceEndIndex: number,
+      unclosed?: boolean
+    }
+  | {
+      type: 'comment',
+      value: string,
+      sourceIndex: number,
+      sourceEndIndex: number,
+      unclosed?: boolean
+    }
+  | {
+      type: 'div',
+      value: ',' | '/' | ':',
+      sourceIndex: number,
+      sourceEndIndex: number,
+      before: '' | ' ' | '  ' | '   ',
+      after: '' | ' ' | '  ' | '   '
+    }
+  | {
+      type: 'space',
+      value: ' ' | '  ' | '   ',
+      sourceIndex: number,
+      sourceEndIndex: number
+    }
+  | {
+      type: 'function',
+      value: string,
+      before: '' | ' ' | '  ' | '   ',
+      after: '' | ' ' | '  ' | '   ',
+      nodes: Array<CSSValueASTNode>,
+      unclosed?: boolean,
+      sourceIndex: number,
+      sourceEndIndex: number
+    };
diff --git a/tools/flow-typed/npm/postcss-value-parser_vx.x.x.js b/tools/flow-typed/npm/postcss-value-parser_vx.x.x.js
index 449e3860..9fdefebc 100644
--- a/tools/flow-typed/npm/postcss-value-parser_vx.x.x.js
+++ b/tools/flow-typed/npm/postcss-value-parser_vx.x.x.js
@@ -7,75 +7,75 @@
  * @flow strict
  */
 
-type PostCSSValueASTNode =
-  | {
-      type: 'word' | 'unicode-range',
-      value: string,
-      sourceIndex: number,
-      sourceEndIndex: number
-    }
-  | {
-      type: 'string' | 'comment',
-      value: string,
-      quote: '"' | "'",
-      sourceIndex: number,
-      sourceEndIndex: number,
-      unclosed?: boolean
-    }
-  | {
-      type: 'comment',
-      value: string,
-      sourceIndex: number,
-      sourceEndIndex: number,
-      unclosed?: boolean
-    }
-  | {
-      type: 'div',
-      value: ',' | '/' | ':',
-      sourceIndex: number,
-      sourceEndIndex: number,
-      before: '' | ' ' | '  ' | '   ',
-      after: '' | ' ' | '  ' | '   '
-    }
-  | {
-      type: 'space',
-      value: ' ' | '  ' | '   ',
-      sourceIndex: number,
-      sourceEndIndex: number
-    }
-  | {
-      type: 'function',
-      value: string,
-      before: '' | ' ' | '  ' | '   ',
-      after: '' | ' ' | '  ' | '   ',
-      nodes: Array<PostCSSValueASTNode>,
-      unclosed?: boolean,
-      sourceIndex: number,
-      sourceEndIndex: number
-    };
+declare module 'postcss-value-parser' {
+  declare export type PostCSSValueASTNode =
+    | {
+        type: 'word' | 'unicode-range',
+        value: string,
+        sourceIndex: number,
+        sourceEndIndex: number
+      }
+    | {
+        type: 'string' | 'comment',
+        value: string,
+        quote: '"' | "'",
+        sourceIndex: number,
+        sourceEndIndex: number,
+        unclosed?: boolean
+      }
+    | {
+        type: 'comment',
+        value: string,
+        sourceIndex: number,
+        sourceEndIndex: number,
+        unclosed?: boolean
+      }
+    | {
+        type: 'div',
+        value: ',' | '/' | ':',
+        sourceIndex: number,
+        sourceEndIndex: number,
+        before: '' | ' ' | '  ' | '   ',
+        after: '' | ' ' | '  ' | '   '
+      }
+    | {
+        type: 'space',
+        value: ' ' | '  ' | '   ',
+        sourceIndex: number,
+        sourceEndIndex: number
+      }
+    | {
+        type: 'function',
+        value: string,
+        before: '' | ' ' | '  ' | '   ',
+        after: '' | ' ' | '  ' | '   ',
+        nodes: Array<PostCSSValueASTNode>,
+        unclosed?: boolean,
+        sourceIndex: number,
+        sourceEndIndex: number
+      };
 
-declare interface PostCSSValueAST {
-  nodes: Array<PostCSSValueASTNode>;
-  walk(
-    callback: (PostCSSValueASTNode, number, PostCSSValueAST) => ?false,
-    bubble?: boolean
-  ): void;
-}
+  declare interface PostCSSValueAST {
+    nodes: Array<PostCSSValueASTNode>;
+    walk(
+      callback: (PostCSSValueASTNode, number, PostCSSValueAST) => ?false,
+      bubble?: boolean
+    ): void;
+  }
 
-type PostCSSValueParser = {
-  (string): PostCSSValueAST,
-  unit(string): { number: string, unit: string } | false,
-  stringify(
-    nodes: PostCSSValueAST | PostCSSValueASTNode | PostCSSValueAST['nodes'],
-    custom?: (PostCSSValueASTNode) => string
-  ): string,
-  walk(
-    ast: PostCSSValueAST,
-    callback: (PostCSSValueASTNode, number, PostCSSValueAST) => ?false,
-    bubble?: boolean
-  ): void
-};
+  declare type PostCSSValueParser = {
+    (string): PostCSSValueAST,
+    unit(string): { number: string, unit: string } | false,
+    stringify(
+      nodes: PostCSSValueAST | PostCSSValueASTNode | PostCSSValueAST['nodes'],
+      custom?: (PostCSSValueASTNode) => string
+    ): string,
+    walk(
+      ast: PostCSSValueAST,
+      callback: (PostCSSValueASTNode, number, PostCSSValueAST) => ?false,
+      bubble?: boolean
+    ): void
+  };
 
-declare module 'postcss-value-parser' {
   declare module.exports: PostCSSValueParser;
 }

From 2ae338a43d08d052a07d93341160d1922d13c8d9 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Sun, 27 Jul 2025 10:49:59 -0700
Subject: [PATCH 15/24] 0.0.43

---
 CHANGELOG.md                           | 11 +++++++++++
 package-lock.json                      |  2 +-
 packages/react-strict-dom/package.json |  2 +-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1c4c3e03..f1c2c5da 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.0.43 (Jul 27, 2025)
+
+### New features
+
+* [Native] Add experimental support for setting a custom viewport width. See #344
+
+### Fixes
+
+* [Native] Improve e2e performance ~3% by avoiding JS APIs that are more costly in Hermes.
+* [Native] Remove `display:flex` warning for flex item properties.
+
 ## 0.0.42 (Jul 23, 2025)
 
 ### Fixes
diff --git a/package-lock.json b/package-lock.json
index e5f25bea..d6b0f9e9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31218,7 +31218,7 @@
       }
     },
     "packages/react-strict-dom": {
-      "version": "0.0.42",
+      "version": "0.0.43",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-imports": "^7.24.7",
diff --git a/packages/react-strict-dom/package.json b/packages/react-strict-dom/package.json
index 65aea0a4..326cdb01 100644
--- a/packages/react-strict-dom/package.json
+++ b/packages/react-strict-dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-strict-dom",
-  "version": "0.0.42",
+  "version": "0.0.43",
   "description": "React Strict DOM",
   "exports": {
     ".": {

From aadcab38c43dfc7a0b36122146fc1f4b355da9cc Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Sun, 27 Jul 2025 12:02:14 -0700
Subject: [PATCH 16/24] Minor reorganization and rename of native css
 implementation

---
 .../{stylex => css}/CSSLengthUnitValue.js     |   0
 .../{stylex => css}/CSSTransformValue.js      |   0
 .../__tests__/CSSUnparsedValue-test.js        |   0
 .../__snapshots__/fixContentBox-test.js.snap  |   0
 .../__tests__/fixContentBox-test.js           |   0
 .../__tests__/parseTimeValue-test.js          |   0
 .../__tests__/parseTransform-test.js          |   0
 .../{stylex => css}/customProperties.js       |   0
 .../native/{stylex => css}/fixContentBox.js   |   0
 .../{stylex => css}/flattenStyleXStyles.js    |   0
 .../src/native/{stylex => css}/index.js       | 443 ++++--------------
 .../isAllowedShortFormValue.js                |   0
 .../{stylex => css}/isAllowedStyleKey.js      |   0
 .../{stylex => css}/isLengthStyleKey.js       |   0
 .../{stylex => css}/mediaQueryMatches.js      |   0
 .../native/{stylex => css}/parseTextShadow.js |   0
 .../native/{stylex => css}/parseTimeValue.js  |   0
 .../native/{stylex => css}/parseTransform.js  |   0
 .../src/native/css/processStyle.js            | 246 ++++++++++
 .../{stylex => css}/typed-om/CSSStyleValue.js |   0
 .../typed-om/CSSUnparsedValue.js              |   0
 .../typed-om/CSSVariableReferenceValue.js     |   0
 packages/react-strict-dom/src/native/html.js  |   4 +-
 packages/react-strict-dom/src/native/index.js |   6 +-
 .../native/modules/ContextCustomProperties.js |   2 +-
 .../native/modules/ContextInheritedStyles.js  |   2 +-
 .../modules/createStrictDOMImageComponent.js  |   4 +-
 .../src/native/modules/useNativeProps.js      |   4 +-
 .../src/native/modules/useStyleProps.js       |   4 +-
 .../react-strict-dom/tools/jest.config.js     |   2 +-
 30 files changed, 360 insertions(+), 357 deletions(-)
 rename packages/react-strict-dom/src/native/{stylex => css}/CSSLengthUnitValue.js (100%)
 rename packages/react-strict-dom/src/native/{stylex => css}/CSSTransformValue.js (100%)
 rename packages/react-strict-dom/src/native/{stylex => css}/__tests__/CSSUnparsedValue-test.js (100%)
 rename packages/react-strict-dom/src/native/{stylex => css}/__tests__/__snapshots__/fixContentBox-test.js.snap (100%)
 rename packages/react-strict-dom/src/native/{stylex => css}/__tests__/fixContentBox-test.js (100%)
 rename packages/react-strict-dom/src/native/{stylex => css}/__tests__/parseTimeValue-test.js (100%)
 rename packages/react-strict-dom/src/native/{stylex => css}/__tests__/parseTransform-test.js (100%)
 rename packages/react-strict-dom/src/native/{stylex => css}/customProperties.js (100%)
 rename packages/react-strict-dom/src/native/{stylex => css}/fixContentBox.js (100%)
 rename packages/react-strict-dom/src/native/{stylex => css}/flattenStyleXStyles.js (100%)
 rename packages/react-strict-dom/src/native/{stylex => css}/index.js (67%)
 rename packages/react-strict-dom/src/native/{stylex => css}/isAllowedShortFormValue.js (100%)
 rename packages/react-strict-dom/src/native/{stylex => css}/isAllowedStyleKey.js (100%)
 rename packages/react-strict-dom/src/native/{stylex => css}/isLengthStyleKey.js (100%)
 rename packages/react-strict-dom/src/native/{stylex => css}/mediaQueryMatches.js (100%)
 rename packages/react-strict-dom/src/native/{stylex => css}/parseTextShadow.js (100%)
 rename packages/react-strict-dom/src/native/{stylex => css}/parseTimeValue.js (100%)
 rename packages/react-strict-dom/src/native/{stylex => css}/parseTransform.js (100%)
 create mode 100644 packages/react-strict-dom/src/native/css/processStyle.js
 rename packages/react-strict-dom/src/native/{stylex => css}/typed-om/CSSStyleValue.js (100%)
 rename packages/react-strict-dom/src/native/{stylex => css}/typed-om/CSSUnparsedValue.js (100%)
 rename packages/react-strict-dom/src/native/{stylex => css}/typed-om/CSSVariableReferenceValue.js (100%)

diff --git a/packages/react-strict-dom/src/native/stylex/CSSLengthUnitValue.js b/packages/react-strict-dom/src/native/css/CSSLengthUnitValue.js
similarity index 100%
rename from packages/react-strict-dom/src/native/stylex/CSSLengthUnitValue.js
rename to packages/react-strict-dom/src/native/css/CSSLengthUnitValue.js
diff --git a/packages/react-strict-dom/src/native/stylex/CSSTransformValue.js b/packages/react-strict-dom/src/native/css/CSSTransformValue.js
similarity index 100%
rename from packages/react-strict-dom/src/native/stylex/CSSTransformValue.js
rename to packages/react-strict-dom/src/native/css/CSSTransformValue.js
diff --git a/packages/react-strict-dom/src/native/stylex/__tests__/CSSUnparsedValue-test.js b/packages/react-strict-dom/src/native/css/__tests__/CSSUnparsedValue-test.js
similarity index 100%
rename from packages/react-strict-dom/src/native/stylex/__tests__/CSSUnparsedValue-test.js
rename to packages/react-strict-dom/src/native/css/__tests__/CSSUnparsedValue-test.js
diff --git a/packages/react-strict-dom/src/native/stylex/__tests__/__snapshots__/fixContentBox-test.js.snap b/packages/react-strict-dom/src/native/css/__tests__/__snapshots__/fixContentBox-test.js.snap
similarity index 100%
rename from packages/react-strict-dom/src/native/stylex/__tests__/__snapshots__/fixContentBox-test.js.snap
rename to packages/react-strict-dom/src/native/css/__tests__/__snapshots__/fixContentBox-test.js.snap
diff --git a/packages/react-strict-dom/src/native/stylex/__tests__/fixContentBox-test.js b/packages/react-strict-dom/src/native/css/__tests__/fixContentBox-test.js
similarity index 100%
rename from packages/react-strict-dom/src/native/stylex/__tests__/fixContentBox-test.js
rename to packages/react-strict-dom/src/native/css/__tests__/fixContentBox-test.js
diff --git a/packages/react-strict-dom/src/native/stylex/__tests__/parseTimeValue-test.js b/packages/react-strict-dom/src/native/css/__tests__/parseTimeValue-test.js
similarity index 100%
rename from packages/react-strict-dom/src/native/stylex/__tests__/parseTimeValue-test.js
rename to packages/react-strict-dom/src/native/css/__tests__/parseTimeValue-test.js
diff --git a/packages/react-strict-dom/src/native/stylex/__tests__/parseTransform-test.js b/packages/react-strict-dom/src/native/css/__tests__/parseTransform-test.js
similarity index 100%
rename from packages/react-strict-dom/src/native/stylex/__tests__/parseTransform-test.js
rename to packages/react-strict-dom/src/native/css/__tests__/parseTransform-test.js
diff --git a/packages/react-strict-dom/src/native/stylex/customProperties.js b/packages/react-strict-dom/src/native/css/customProperties.js
similarity index 100%
rename from packages/react-strict-dom/src/native/stylex/customProperties.js
rename to packages/react-strict-dom/src/native/css/customProperties.js
diff --git a/packages/react-strict-dom/src/native/stylex/fixContentBox.js b/packages/react-strict-dom/src/native/css/fixContentBox.js
similarity index 100%
rename from packages/react-strict-dom/src/native/stylex/fixContentBox.js
rename to packages/react-strict-dom/src/native/css/fixContentBox.js
diff --git a/packages/react-strict-dom/src/native/stylex/flattenStyleXStyles.js b/packages/react-strict-dom/src/native/css/flattenStyleXStyles.js
similarity index 100%
rename from packages/react-strict-dom/src/native/stylex/flattenStyleXStyles.js
rename to packages/react-strict-dom/src/native/css/flattenStyleXStyles.js
diff --git a/packages/react-strict-dom/src/native/stylex/index.js b/packages/react-strict-dom/src/native/css/index.js
similarity index 67%
rename from packages/react-strict-dom/src/native/stylex/index.js
rename to packages/react-strict-dom/src/native/css/index.js
index dc71781c..29fff4a2 100644
--- a/packages/react-strict-dom/src/native/stylex/index.js
+++ b/packages/react-strict-dom/src/native/css/index.js
@@ -7,280 +7,128 @@
  * @flow strict
  */
 
-import type {
-  ReactNativeProps,
-  ReactNativeStyle
-} from '../../types/renderer.native';
-
-import type {
-  CustomProperties,
-  MutableCustomProperties,
-  IStyleX
-} from '../../types/styles';
+import type { ReactNativeProps } from '../../types/renderer.native';
+import type { ReactNativeStyle } from '../../types/renderer.native';
+import type { CustomProperties } from '../../types/styles';
+import type { MutableCustomProperties } from '../../types/styles';
+import type { IStyleX } from '../../types/styles';
 
 import { CSSLengthUnitValue } from './CSSLengthUnitValue';
 import { CSSTransformValue } from './CSSTransformValue';
 import { CSSUnparsedValue } from './typed-om/CSSUnparsedValue';
-import { errorMsg, warnMsg } from '../../shared/logUtils';
+import { errorMsg } from '../../shared/logUtils';
 import { fixContentBox } from './fixContentBox';
 import { flattenStyle } from './flattenStyleXStyles';
-import { isAllowedShortFormValue } from './isAllowedShortFormValue';
-import { isAllowedStyleKey } from './isAllowedStyleKey';
 import { lengthStyleKeySet } from './isLengthStyleKey';
 import { mediaQueryMatches } from './mediaQueryMatches';
-import { parseTextShadow } from './parseTextShadow';
-import { parseTimeValue } from './parseTimeValue';
-import { parseTransform } from './parseTransform';
-import {
-  resolveVariableReferences,
-  stringContainsVariables
-} from './customProperties';
+import { processStyle } from './processStyle';
+import { resolveVariableReferences } from './customProperties';
 import { version } from '../modules/version';
 
-type ResolveStyleOptions = $ReadOnly<{
-  active?: ?boolean,
-  colorScheme: ?('light' | 'dark'),
-  customProperties: CustomProperties,
-  focus?: ?boolean,
-  fontScale: number | void,
-  hover?: ?boolean,
-  inheritedFontSize: ?number,
-  viewportHeight: number,
-  viewportScale: number | void,
-  viewportWidth: number,
-  writingDirection?: ?'ltr' | 'rtl'
-}>;
-
-const validPlaceContentValues = new Set<string>([
-  'center',
-  'flex-end',
-  'flex-start',
-  // distributed alignment
-  'space-around',
-  'space-between',
-  'space-evenly'
-]);
+export const __customProperties: MutableCustomProperties = {};
 
 /**
- * Pre-process 'create'
+ * The create method shim should do initial transforms like
+ * renaming/expanding/validating properties, essentially all the steps
+ * which can be done at initialization-time (could potentially be done at
+ * compile-time in the future).
  */
-
-function processStyle(
-  style: { +[string]: mixed },
-  skipValidation?: boolean
-): { +[string]: mixed } {
+function _create<S: { +[string]: { +[string]: mixed } }>(styles: S): {
+  [string]: mixed
+} {
   const result: { [string]: mixed } = {};
-
-  for (const propName in style) {
-    const styleValue = style[propName];
-
-    if (skipValidation !== true && !isAllowedStyleKey(propName)) {
-      if (__DEV__) {
-        warnMsg(`unsupported style property "${propName}"`);
-      }
-      continue;
+  for (const styleName in styles) {
+    const val = styles[styleName];
+    if (typeof val === 'function') {
+      result[styleName] = (...args: ?(string | number)) => {
+        const style = val(...args);
+        return processStyle(style);
+      };
+    } else {
+      result[styleName] = processStyle(styles[styleName]);
     }
+  }
+  return result;
+}
+export const create: IStyleX['create'] = _create as $FlowFixMe;
 
-    // Object values
-    else if (typeof styleValue === 'object' && styleValue != null) {
-      if (propName === '::placeholder') {
-        const placeholderStyleProps = Object.keys(styleValue);
-        for (let i = 0; i < placeholderStyleProps.length; i++) {
-          const prop = placeholderStyleProps[i];
-          if (prop === 'color') {
-            result['placeholderTextColor'] = processStyle({
-              color: styleValue.color
-            }).color;
-          } else {
-            if (__DEV__) {
-              warnMsg(`unsupported "::placeholder" style property "${prop}"`);
-            }
-          }
-        }
-        continue;
-      } else if (Object.hasOwn(styleValue, 'default')) {
-        result[propName] = processStyle(styleValue);
-        continue;
-      }
-    }
+const RE_CAPTURE_VAR_NAME = /^var\(--(.*)\)$/;
+export const createTheme = (
+  baseTokens: Tokens,
+  overrides: CustomProperties
+): CustomProperties => {
+  const result: MutableCustomProperties = { $$theme: 'theme' };
+  for (const key in baseTokens) {
+    const varName: string = baseTokens[key];
+    const normalizedKey = varName.replace(RE_CAPTURE_VAR_NAME, '$1');
+    result[normalizedKey] = overrides[key];
+  }
+  return result;
+};
 
-    // String values
-    else if (typeof styleValue === 'string') {
-      // Polyfill support for string '0' on Android
-      if (styleValue === '0') {
-        result[propName] = 0;
-        continue;
-      }
-      // Polyfill support for string opacity on Android
-      if (propName === 'opacity') {
-        result[propName] = parseFloat(styleValue);
-        continue;
-      }
-      // Polyfill support for custom property references (do this first)
-      else if (stringContainsVariables(styleValue)) {
-        result[propName] = CSSUnparsedValue.parse(propName, styleValue);
-        continue;
-      } else if (
-        propName === 'caretColor' &&
-        (typeof styleValue === 'undefined' || styleValue === 'auto')
-      ) {
-        if (__DEV__) {
-          warnMsg(
-            `unsupported style value in "${propName}:${String(styleValue)}"`
-          );
-        }
-        continue;
-      } else if (propName === 'backgroundImage') {
-        result.experimental_backgroundImage = styleValue;
-        continue;
-      }
-      // Workaround unsupported objectFit values
-      else if (propName === 'objectFit' && styleValue === 'none') {
-        result[propName] = 'scale-down';
-        continue;
-      }
-      // Polyfill placeContent
-      else if (propName === 'placeContent') {
-        // None of these values are supported in RN for both properties.
-        if (!validPlaceContentValues.has(styleValue)) {
-          if (__DEV__) {
-            warnMsg(
-              `unsupported style value in "${propName}:${String(styleValue)}"`
-            );
-          }
-          continue;
-        }
-      }
-      // Workaround unsupported position values
-      else if (
-        propName === 'position' &&
-        (styleValue === 'fixed' || styleValue === 'sticky')
-      ) {
-        const fallback = styleValue === 'fixed' ? 'absolute' : 'relative';
-        if (__DEV__) {
-          warnMsg(
-            `unsupported style value in "position:${styleValue}". Falling back to "position:${fallback}".`
-          );
-        }
-        result[propName] = fallback;
-        continue;
-      }
-      // Workaround unsupported textAlign values
-      // https://github.com/facebook/react-native/issues/45255
-      else if (propName === 'textAlign') {
-        if (styleValue === 'start') {
-          result[propName] = 'left';
-        } else if (styleValue === 'end') {
-          result[propName] = 'right';
-        } else {
-          result[propName] = styleValue;
-        }
-        continue;
-      }
-      // Polyfill textShadow
-      else if (propName === 'textShadow') {
-        result[propName] = parseTextShadow(styleValue);
-        continue;
-      }
-      // Polyfill transform as string value
-      else if (propName === 'transform') {
-        result[propName] = parseTransform(styleValue);
-        continue;
-      }
-      // Polyfill time-valued string values (e.g., '1000ms' => 1000)
-      else if (
-        propName === 'animationDelay' ||
-        propName === 'animationDuration' ||
-        propName === 'transitionDelay' ||
-        propName === 'transitionDuration'
-      ) {
-        result[propName] = parseTimeValue(styleValue);
-        continue;
-      }
+export const defineConsts = (constants: {
+  [string]: string
+}): { [string]: string } => {
+  return Object.freeze(constants);
+};
 
-      const maybeLengthUnitValue = CSSLengthUnitValue.parse(styleValue);
-      if (maybeLengthUnitValue != null) {
-        result[propName] = maybeLengthUnitValue;
-        continue;
-        // React Native doesn't support these keywords or functions
-      } else if (styleValue === 'inherit' || styleValue === 'unset') {
-        // direction has native support for 'inherit'
-        if (propName === 'direction') {
-          result[propName] = 'inherit';
-          continue;
-        }
-        // inherited properties polyfill 'inherit' in useStyleProps
-        else if (
-          propName !== ':active' &&
-          propName !== ':focus' &&
-          propName !== ':hover' &&
-          propName !== 'default' &&
-          propName !== 'color' &&
-          propName !== 'cursor' &&
-          propName !== 'fontFamily' &&
-          propName !== 'fontSize' &&
-          propName !== 'fontStyle' &&
-          propName !== 'fontVariant' &&
-          propName !== 'fontWeight' &&
-          propName !== 'letterSpacing' &&
-          propName !== 'lineHeight' &&
-          propName !== 'textAlign' &&
-          propName !== 'textDecorationColor' &&
-          propName !== 'textDecorationLine' &&
-          propName !== 'textDecorationStyle' &&
-          propName !== 'textAlign' &&
-          propName !== 'textIndent' &&
-          propName !== 'textTransform' &&
-          propName !== 'whiteSpace'
-        ) {
-          if (__DEV__) {
-            warnMsg(
-              `unsupported style value in "${propName}:${String(styleValue)}"`
-            );
-          }
-          continue;
-        }
-      } else if (
-        styleValue === 'currentcolor' ||
-        styleValue === 'initial' ||
-        styleValue.includes('calc(')
-      ) {
-        if (__DEV__) {
-          warnMsg(
-            `unsupported style value in "${propName}:${String(styleValue)}"`
-          );
-        }
-        continue;
-      } else if (!isAllowedShortFormValue(propName, styleValue)) {
-        if (__DEV__) {
-          errorMsg(
-            `invalid style value in "${propName}:${String(styleValue)}". Shortform properties cannot contain multiple values. Please use longform properties.`
-          );
-        }
-        continue;
-      }
-    }
+type Tokens = { [string]: string };
+let defineVarsCount = 1;
+export const defineVars = (tokens: CustomProperties): Tokens => {
+  const result: Tokens = {};
+  for (const key in tokens) {
+    const value = tokens[key];
+    const customPropName = `${key}__id__${defineVarsCount++}`;
+    result[key] = `var(--${customPropName})`;
+    // NOTE: it's generally not a good idea to mutate the default context,
+    // but defineVars is always called before any component body is evaluated,
+    // and so it's safe to do so here.
+    __customProperties[customPropName] = value;
+  }
+  return result;
+};
 
-    // Number values
-    else if (typeof styleValue === 'number') {
-      // Polyfill numeric fontWeight (for desktop)
-      if (propName === 'fontWeight') {
-        result[propName] = styleValue.toString();
-        continue;
-      }
-      // Normalize unitless lineHeight to string
-      if (propName === 'lineHeight') {
-        result[propName] = styleValue.toString();
-        continue;
-      }
-    }
+export const firstThatWorks = <T: string | number>(
+  ...values: $ReadOnlyArray<T>
+): T => {
+  return values[0];
+};
 
-    // Everything else
-    result[propName] = styleValue;
+type Keyframes = {
+  +[key: string]: { +[k: string]: string | number }
+};
+function _keyframes(k: Keyframes): Keyframes {
+  if (__DEV__) {
+    errorMsg('css.keyframes() is not supported.');
   }
+  return k;
+}
+export const keyframes: (Keyframes) => string = _keyframes as $FlowFixMe;
 
-  return result;
+type PositionTry = {
+  +[k: string]: string | number
+};
+function _positionTry(p: PositionTry): PositionTry {
+  if (__DEV__) {
+    errorMsg('css.positionTry() is not supported.');
+  }
+  return p;
 }
+export const positionTry: (PositionTry) => string = _positionTry as $FlowFixMe;
+
+type ResolveStyleOptions = $ReadOnly<{
+  active?: ?boolean,
+  colorScheme: ?('light' | 'dark'),
+  customProperties: CustomProperties,
+  focus?: ?boolean,
+  fontScale: number | void,
+  hover?: ?boolean,
+  inheritedFontSize: ?number,
+  viewportHeight: number,
+  viewportScale: number | void,
+  viewportWidth: number,
+  writingDirection?: ?'ltr' | 'rtl'
+}>;
 
 /**
  * Resolve 'props'
@@ -371,7 +219,7 @@ function resolveStyle(
       continue;
     }
 
-    // Resolve the stylex object-value syntax
+    // Resolve the object-value syntax
     if (
       styleValue != null &&
       typeof styleValue === 'object' &&
@@ -435,97 +283,6 @@ function resolveStyle(
   return result;
 }
 
-export const __customProperties: MutableCustomProperties = {};
-
-/**
- * The create method shim should do initial transforms like
- * renaming/expanding/validating properties, essentially all the steps
- * which can be done at initialization-time (could potentially be done at
- * compile-time in the future).
- */
-function _create<S: { +[string]: { +[string]: mixed } }>(styles: S): {
-  [string]: mixed
-} {
-  const result: { [string]: mixed } = {};
-  for (const styleName in styles) {
-    const val = styles[styleName];
-    if (typeof val === 'function') {
-      result[styleName] = (...args: ?(string | number)) => {
-        const style = val(...args);
-        return processStyle(style);
-      };
-    } else {
-      result[styleName] = processStyle(styles[styleName]);
-    }
-  }
-  return result;
-}
-export const create: IStyleX['create'] = _create as $FlowFixMe;
-
-const RE_CAPTURE_VAR_NAME = /^var\(--(.*)\)$/;
-export const createTheme = (
-  baseTokens: Tokens,
-  overrides: CustomProperties
-): CustomProperties => {
-  const result: MutableCustomProperties = { $$theme: 'theme' };
-  for (const key in baseTokens) {
-    const varName: string = baseTokens[key];
-    const normalizedKey = varName.replace(RE_CAPTURE_VAR_NAME, '$1');
-    result[normalizedKey] = overrides[key];
-  }
-  return result;
-};
-
-export const defineConsts = (constants: {
-  [string]: string
-}): { [string]: string } => {
-  return Object.freeze(constants);
-};
-
-type Tokens = { [string]: string };
-let defineVarsCount = 1;
-export const defineVars = (tokens: CustomProperties): Tokens => {
-  const result: Tokens = {};
-  for (const key in tokens) {
-    const value = tokens[key];
-    const customPropName = `${key}__id__${defineVarsCount++}`;
-    result[key] = `var(--${customPropName})`;
-    // NOTE: it's generally not a good idea to mutate the default context,
-    // but defineVars is always called before any component body is evaluated,
-    // and so it's safe to do so here.
-    __customProperties[customPropName] = value;
-  }
-  return result;
-};
-
-export const firstThatWorks = <T: string | number>(
-  ...values: $ReadOnlyArray<T>
-): T => {
-  return values[0];
-};
-
-type Keyframes = {
-  +[key: string]: { +[k: string]: string | number }
-};
-function _keyframes(k: Keyframes): Keyframes {
-  if (__DEV__) {
-    errorMsg('css.keyframes() is not supported.');
-  }
-  return k;
-}
-export const keyframes: (Keyframes) => string = _keyframes as $FlowFixMe;
-
-type PositionTry = {
-  +[k: string]: string | number
-};
-function _positionTry(p: PositionTry): PositionTry {
-  if (__DEV__) {
-    errorMsg('css.positionTry() is not supported.');
-  }
-  return p;
-}
-export const positionTry: (PositionTry) => string = _positionTry as $FlowFixMe;
-
 export function props(
   this: ResolveStyleOptions,
   ...style: $ReadOnlyArray<?{ [key: string]: mixed }>
diff --git a/packages/react-strict-dom/src/native/stylex/isAllowedShortFormValue.js b/packages/react-strict-dom/src/native/css/isAllowedShortFormValue.js
similarity index 100%
rename from packages/react-strict-dom/src/native/stylex/isAllowedShortFormValue.js
rename to packages/react-strict-dom/src/native/css/isAllowedShortFormValue.js
diff --git a/packages/react-strict-dom/src/native/stylex/isAllowedStyleKey.js b/packages/react-strict-dom/src/native/css/isAllowedStyleKey.js
similarity index 100%
rename from packages/react-strict-dom/src/native/stylex/isAllowedStyleKey.js
rename to packages/react-strict-dom/src/native/css/isAllowedStyleKey.js
diff --git a/packages/react-strict-dom/src/native/stylex/isLengthStyleKey.js b/packages/react-strict-dom/src/native/css/isLengthStyleKey.js
similarity index 100%
rename from packages/react-strict-dom/src/native/stylex/isLengthStyleKey.js
rename to packages/react-strict-dom/src/native/css/isLengthStyleKey.js
diff --git a/packages/react-strict-dom/src/native/stylex/mediaQueryMatches.js b/packages/react-strict-dom/src/native/css/mediaQueryMatches.js
similarity index 100%
rename from packages/react-strict-dom/src/native/stylex/mediaQueryMatches.js
rename to packages/react-strict-dom/src/native/css/mediaQueryMatches.js
diff --git a/packages/react-strict-dom/src/native/stylex/parseTextShadow.js b/packages/react-strict-dom/src/native/css/parseTextShadow.js
similarity index 100%
rename from packages/react-strict-dom/src/native/stylex/parseTextShadow.js
rename to packages/react-strict-dom/src/native/css/parseTextShadow.js
diff --git a/packages/react-strict-dom/src/native/stylex/parseTimeValue.js b/packages/react-strict-dom/src/native/css/parseTimeValue.js
similarity index 100%
rename from packages/react-strict-dom/src/native/stylex/parseTimeValue.js
rename to packages/react-strict-dom/src/native/css/parseTimeValue.js
diff --git a/packages/react-strict-dom/src/native/stylex/parseTransform.js b/packages/react-strict-dom/src/native/css/parseTransform.js
similarity index 100%
rename from packages/react-strict-dom/src/native/stylex/parseTransform.js
rename to packages/react-strict-dom/src/native/css/parseTransform.js
diff --git a/packages/react-strict-dom/src/native/css/processStyle.js b/packages/react-strict-dom/src/native/css/processStyle.js
new file mode 100644
index 00000000..a6144356
--- /dev/null
+++ b/packages/react-strict-dom/src/native/css/processStyle.js
@@ -0,0 +1,246 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+import { CSSLengthUnitValue } from './CSSLengthUnitValue';
+import { CSSUnparsedValue } from './typed-om/CSSUnparsedValue';
+
+import { errorMsg, warnMsg } from '../../shared/logUtils';
+import { isAllowedShortFormValue } from './isAllowedShortFormValue';
+import { isAllowedStyleKey } from './isAllowedStyleKey';
+import { parseTextShadow } from './parseTextShadow';
+import { parseTimeValue } from './parseTimeValue';
+import { parseTransform } from './parseTransform';
+import { stringContainsVariables } from './customProperties';
+
+const validPlaceContentValues = new Set<string>([
+  'center',
+  'flex-end',
+  'flex-start',
+  // distributed alignment
+  'space-around',
+  'space-between',
+  'space-evenly'
+]);
+
+export function processStyle(
+  style: { +[string]: mixed },
+  skipValidation?: boolean
+): { +[string]: mixed } {
+  const result: { [string]: mixed } = {};
+
+  for (const propName in style) {
+    const styleValue = style[propName];
+
+    if (skipValidation !== true && !isAllowedStyleKey(propName)) {
+      if (__DEV__) {
+        warnMsg(`unsupported style property "${propName}"`);
+      }
+      continue;
+    }
+
+    // Object values
+    else if (typeof styleValue === 'object' && styleValue != null) {
+      if (propName === '::placeholder') {
+        const placeholderStyleProps = Object.keys(styleValue);
+        for (let i = 0; i < placeholderStyleProps.length; i++) {
+          const prop = placeholderStyleProps[i];
+          if (prop === 'color') {
+            result['placeholderTextColor'] = processStyle({
+              color: styleValue.color
+            }).color;
+          } else {
+            if (__DEV__) {
+              warnMsg(`unsupported "::placeholder" style property "${prop}"`);
+            }
+          }
+        }
+        continue;
+      } else if (Object.hasOwn(styleValue, 'default')) {
+        result[propName] = processStyle(styleValue);
+        continue;
+      }
+    }
+
+    // String values
+    else if (typeof styleValue === 'string') {
+      // Polyfill support for string '0' on Android
+      if (styleValue === '0') {
+        result[propName] = 0;
+        continue;
+      }
+      // Polyfill support for string opacity on Android
+      if (propName === 'opacity') {
+        result[propName] = parseFloat(styleValue);
+        continue;
+      }
+      // Polyfill support for custom property references (do this first)
+      else if (stringContainsVariables(styleValue)) {
+        result[propName] = CSSUnparsedValue.parse(propName, styleValue);
+        continue;
+      } else if (
+        propName === 'caretColor' &&
+        (typeof styleValue === 'undefined' || styleValue === 'auto')
+      ) {
+        if (__DEV__) {
+          warnMsg(
+            `unsupported style value in "${propName}:${String(styleValue)}"`
+          );
+        }
+        continue;
+      } else if (propName === 'backgroundImage') {
+        result.experimental_backgroundImage = styleValue;
+        continue;
+      }
+      // Workaround unsupported objectFit values
+      else if (propName === 'objectFit' && styleValue === 'none') {
+        result[propName] = 'scale-down';
+        continue;
+      }
+      // Polyfill placeContent
+      else if (propName === 'placeContent') {
+        // None of these values are supported in RN for both properties.
+        if (!validPlaceContentValues.has(styleValue)) {
+          if (__DEV__) {
+            warnMsg(
+              `unsupported style value in "${propName}:${String(styleValue)}"`
+            );
+          }
+          continue;
+        }
+      }
+      // Workaround unsupported position values
+      else if (
+        propName === 'position' &&
+        (styleValue === 'fixed' || styleValue === 'sticky')
+      ) {
+        const fallback = styleValue === 'fixed' ? 'absolute' : 'relative';
+        if (__DEV__) {
+          warnMsg(
+            `unsupported style value in "position:${styleValue}". Falling back to "position:${fallback}".`
+          );
+        }
+        result[propName] = fallback;
+        continue;
+      }
+      // Workaround unsupported textAlign values
+      // https://github.com/facebook/react-native/issues/45255
+      else if (propName === 'textAlign') {
+        if (styleValue === 'start') {
+          result[propName] = 'left';
+        } else if (styleValue === 'end') {
+          result[propName] = 'right';
+        } else {
+          result[propName] = styleValue;
+        }
+        continue;
+      }
+      // Polyfill textShadow
+      else if (propName === 'textShadow') {
+        result[propName] = parseTextShadow(styleValue);
+        continue;
+      }
+      // Polyfill transform as string value
+      else if (propName === 'transform') {
+        result[propName] = parseTransform(styleValue);
+        continue;
+      }
+      // Polyfill time-valued string values (e.g., '1000ms' => 1000)
+      else if (
+        propName === 'animationDelay' ||
+        propName === 'animationDuration' ||
+        propName === 'transitionDelay' ||
+        propName === 'transitionDuration'
+      ) {
+        result[propName] = parseTimeValue(styleValue);
+        continue;
+      }
+
+      const maybeLengthUnitValue = CSSLengthUnitValue.parse(styleValue);
+      if (maybeLengthUnitValue != null) {
+        result[propName] = maybeLengthUnitValue;
+        continue;
+        // React Native doesn't support these keywords or functions
+      } else if (styleValue === 'inherit' || styleValue === 'unset') {
+        // direction has native support for 'inherit'
+        if (propName === 'direction') {
+          result[propName] = 'inherit';
+          continue;
+        }
+        // inherited properties polyfill 'inherit' in useStyleProps
+        else if (
+          propName !== ':active' &&
+          propName !== ':focus' &&
+          propName !== ':hover' &&
+          propName !== 'default' &&
+          propName !== 'color' &&
+          propName !== 'cursor' &&
+          propName !== 'fontFamily' &&
+          propName !== 'fontSize' &&
+          propName !== 'fontStyle' &&
+          propName !== 'fontVariant' &&
+          propName !== 'fontWeight' &&
+          propName !== 'letterSpacing' &&
+          propName !== 'lineHeight' &&
+          propName !== 'textAlign' &&
+          propName !== 'textDecorationColor' &&
+          propName !== 'textDecorationLine' &&
+          propName !== 'textDecorationStyle' &&
+          propName !== 'textAlign' &&
+          propName !== 'textIndent' &&
+          propName !== 'textTransform' &&
+          propName !== 'whiteSpace'
+        ) {
+          if (__DEV__) {
+            warnMsg(
+              `unsupported style value in "${propName}:${String(styleValue)}"`
+            );
+          }
+          continue;
+        }
+      } else if (
+        styleValue === 'currentcolor' ||
+        styleValue === 'initial' ||
+        styleValue.includes('calc(')
+      ) {
+        if (__DEV__) {
+          warnMsg(
+            `unsupported style value in "${propName}:${String(styleValue)}"`
+          );
+        }
+        continue;
+      } else if (!isAllowedShortFormValue(propName, styleValue)) {
+        if (__DEV__) {
+          errorMsg(
+            `invalid style value in "${propName}:${String(styleValue)}". Shortform properties cannot contain multiple values. Please use longform properties.`
+          );
+        }
+        continue;
+      }
+    }
+
+    // Number values
+    else if (typeof styleValue === 'number') {
+      // Polyfill numeric fontWeight (for desktop)
+      if (propName === 'fontWeight') {
+        result[propName] = styleValue.toString();
+        continue;
+      }
+      // Normalize unitless lineHeight to string
+      if (propName === 'lineHeight') {
+        result[propName] = styleValue.toString();
+        continue;
+      }
+    }
+
+    // Everything else
+    result[propName] = styleValue;
+  }
+
+  return result;
+}
diff --git a/packages/react-strict-dom/src/native/stylex/typed-om/CSSStyleValue.js b/packages/react-strict-dom/src/native/css/typed-om/CSSStyleValue.js
similarity index 100%
rename from packages/react-strict-dom/src/native/stylex/typed-om/CSSStyleValue.js
rename to packages/react-strict-dom/src/native/css/typed-om/CSSStyleValue.js
diff --git a/packages/react-strict-dom/src/native/stylex/typed-om/CSSUnparsedValue.js b/packages/react-strict-dom/src/native/css/typed-om/CSSUnparsedValue.js
similarity index 100%
rename from packages/react-strict-dom/src/native/stylex/typed-om/CSSUnparsedValue.js
rename to packages/react-strict-dom/src/native/css/typed-om/CSSUnparsedValue.js
diff --git a/packages/react-strict-dom/src/native/stylex/typed-om/CSSVariableReferenceValue.js b/packages/react-strict-dom/src/native/css/typed-om/CSSVariableReferenceValue.js
similarity index 100%
rename from packages/react-strict-dom/src/native/stylex/typed-om/CSSVariableReferenceValue.js
rename to packages/react-strict-dom/src/native/css/typed-om/CSSVariableReferenceValue.js
diff --git a/packages/react-strict-dom/src/native/html.js b/packages/react-strict-dom/src/native/html.js
index 5030c2ad..7331566f 100644
--- a/packages/react-strict-dom/src/native/html.js
+++ b/packages/react-strict-dom/src/native/html.js
@@ -29,9 +29,9 @@ import { createStrictDOMTextComponent as createStrictText } from './modules/crea
 import { createStrictDOMTextInputComponent as createStrictTextInput } from './modules/createStrictDOMTextInputComponent';
 // $FlowFixMe[nonstrict-import]
 import * as ReactNative from './react-native';
-import * as stylex from './stylex';
+import * as css from './css';
 
-const styles = stylex.create({
+const styles = css.create({
   bold: {
     fontWeight: 'bold'
   },
diff --git a/packages/react-strict-dom/src/native/index.js b/packages/react-strict-dom/src/native/index.js
index b14c019b..a586ce4c 100644
--- a/packages/react-strict-dom/src/native/index.js
+++ b/packages/react-strict-dom/src/native/index.js
@@ -20,7 +20,7 @@ import typeof * as TStyleX from '@stylexjs/stylex';
 import * as React from 'react';
 import * as compat from './compat';
 import * as html from './html';
-import * as stylex from './stylex';
+import * as _css from './css';
 import { ProvideCustomProperties } from './modules/ContextCustomProperties';
 import { ProvideViewportScale } from './modules/ContextViewportScale';
 
@@ -54,6 +54,6 @@ const contexts = {
 };
 
 // Export using StyleX types as the shim has divergent types internally.
-const css: TStyleX = stylex as $FlowFixMe;
+const css: TStyleX = _css as $FlowFixMe;
 
-export { contexts, compat, css, html };
+export { compat, contexts, css, html };
diff --git a/packages/react-strict-dom/src/native/modules/ContextCustomProperties.js b/packages/react-strict-dom/src/native/modules/ContextCustomProperties.js
index 7446dfcd..92077163 100644
--- a/packages/react-strict-dom/src/native/modules/ContextCustomProperties.js
+++ b/packages/react-strict-dom/src/native/modules/ContextCustomProperties.js
@@ -10,7 +10,7 @@
 import type { CustomProperties } from '../../types/styles';
 
 import * as React from 'react';
-import { __customProperties } from '../stylex';
+import { __customProperties } from '../css';
 
 const defaultContext = __customProperties;
 const ContextCustomProperties: React.Context<CustomProperties> =
diff --git a/packages/react-strict-dom/src/native/modules/ContextInheritedStyles.js b/packages/react-strict-dom/src/native/modules/ContextInheritedStyles.js
index 35482f58..4027d4dd 100644
--- a/packages/react-strict-dom/src/native/modules/ContextInheritedStyles.js
+++ b/packages/react-strict-dom/src/native/modules/ContextInheritedStyles.js
@@ -29,7 +29,7 @@ if (__DEV__) {
 }
 
 // We do some special-casing to compute inherited fontSize.
-// The 'em' unit polyfill in stylex assumes the inherited fontSize is always a computed number.
+// The 'em' unit polyfill assumes the inherited fontSize is always a computed number.
 export function ProvideInheritedStyles(props: ProviderProps): React.Node {
   const { children, value } = props;
   const inheritedStyles = useInheritedStyles();
diff --git a/packages/react-strict-dom/src/native/modules/createStrictDOMImageComponent.js b/packages/react-strict-dom/src/native/modules/createStrictDOMImageComponent.js
index 24313f67..9c3999fc 100644
--- a/packages/react-strict-dom/src/native/modules/createStrictDOMImageComponent.js
+++ b/packages/react-strict-dom/src/native/modules/createStrictDOMImageComponent.js
@@ -15,7 +15,7 @@ import * as ReactNative from '../react-native';
 import { mergeRefs } from '../../shared/mergeRefs';
 import { useNativeProps } from './useNativeProps';
 import { useStrictDOMElement } from './useStrictDOMElement';
-import * as stylex from '../stylex';
+import * as css from '../css';
 
 export function createStrictDOMImageComponent<P: StrictReactDOMImageProps, T>(
   tagName: string,
@@ -126,7 +126,7 @@ export function createStrictDOMImageComponent<P: StrictReactDOMImageProps, T>(
   return component;
 }
 
-const styles = stylex.create({
+const styles = css.create({
   aspectRatio: (width: number, height: number) => ({
     aspectRatio: width / height,
     width,
diff --git a/packages/react-strict-dom/src/native/modules/useNativeProps.js b/packages/react-strict-dom/src/native/modules/useNativeProps.js
index 3c659d1a..3de22e35 100644
--- a/packages/react-strict-dom/src/native/modules/useNativeProps.js
+++ b/packages/react-strict-dom/src/native/modules/useNativeProps.js
@@ -12,7 +12,7 @@ import type { ReactNativeProps } from '../../types/renderer.native';
 import type { StrictProps as StrictPropsOriginal } from '../../types/StrictProps';
 import type { Style } from '../../types/styles';
 
-import * as stylex from '../stylex';
+import * as css from '../css';
 import { errorMsg, warnMsg } from '../../shared/logUtils';
 import { extractStyleThemes } from './extractStyleThemes';
 import { isPropAllowed } from '../../shared/isPropAllowed';
@@ -421,7 +421,7 @@ export function useNativeProps(
   };
 }
 
-const styles = stylex.create({
+const styles = css.create({
   contentBox: {
     boxSizing: 'content-box'
   },
diff --git a/packages/react-strict-dom/src/native/modules/useStyleProps.js b/packages/react-strict-dom/src/native/modules/useStyleProps.js
index 2f509d61..58ed7884 100644
--- a/packages/react-strict-dom/src/native/modules/useStyleProps.js
+++ b/packages/react-strict-dom/src/native/modules/useStyleProps.js
@@ -13,7 +13,7 @@ import type {
   ReactNativeStyle
 } from '../../types/renderer.native';
 
-import * as stylex from '../stylex';
+import * as css from '../css';
 import * as ReactNative from '../react-native';
 
 import { flattenStyle } from './flattenStyle';
@@ -95,7 +95,7 @@ export function useStyleProps(
   const { active, focus, hover, handlers } = usePseudoStates(flatStyle);
 
   // Get the computed style props
-  const styleProps = stylex.props.call(
+  const styleProps = css.props.call(
     {
       active,
       colorScheme: colorScheme === 'unspecified' ? 'light' : colorScheme,
diff --git a/packages/react-strict-dom/tools/jest.config.js b/packages/react-strict-dom/tools/jest.config.js
index 5f2a5ab4..2add3fad 100644
--- a/packages/react-strict-dom/tools/jest.config.js
+++ b/packages/react-strict-dom/tools/jest.config.js
@@ -14,7 +14,7 @@ module.exports = {
     '<rootDir>/src/**/*.{js,jsx}',
     // exclude
     '!<rootDir>/src/**/__tests__/**',
-    '!<rootDir>/src/native/stylex/typed-om/**',
+    '!<rootDir>/src/native/css/typed-om/**',
     '!<rootDir>/src/shared/logUtils.js',
     '!<rootDir>/src/types/**'
   ],

From 51233d70cf2826d679e7fdb23a7dbf9a95895f99 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Tue, 29 Jul 2025 11:04:00 -0700
Subject: [PATCH 17/24] Fix scaling of numeric fontSize

Previously fontSize was not scaled if the value is a number. The
viewport scaling was performed for CSS lengths but not specifically for
the fontSize or lineHeight property. Numeric lineHeight should not exist
as we convert it to a string in the preprocessing step. And numeric
fontSize is complicated by the multi-pass processing of styles which
means fontSize could be incorrectly scaled multiple times.

This patch only reprocesses non-numeric fontSize values, and introduces
a new resolving option that is used to pass around numeric fontSize (for
use in resolving logic) without treating it as a style that needs
further processing.
---
 .../react-strict-dom/src/native/css/index.js  | 25 ++++++++++++++-----
 .../src/native/css/isLengthStyleKey.js        |  2 ++
 .../html-test.native.js.snap-native           | 12 +++++++++
 .../tests/html-test.native.js                 |  4 +++
 4 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/packages/react-strict-dom/src/native/css/index.js b/packages/react-strict-dom/src/native/css/index.js
index 29fff4a2..e6324b1c 100644
--- a/packages/react-strict-dom/src/native/css/index.js
+++ b/packages/react-strict-dom/src/native/css/index.js
@@ -122,6 +122,7 @@ type ResolveStyleOptions = $ReadOnly<{
   customProperties: CustomProperties,
   focus?: ?boolean,
   fontScale: number | void,
+  fontSize?: ?number,
   hover?: ?boolean,
   inheritedFontSize: ?number,
   viewportHeight: number,
@@ -143,6 +144,7 @@ function resolveStyle(
     active,
     focus,
     fontScale,
+    fontSize: _fontSize,
     hover,
     inheritedFontSize,
     viewportHeight,
@@ -175,7 +177,8 @@ function resolveStyle(
 
     // Resolve length units
     if (styleValue instanceof CSSLengthUnitValue) {
-      const fontSize = flatStyle.fontSize;
+      const fontSize =
+        flatStyle.fontSize != null ? flatStyle.fontSize : _fontSize;
       // If fontSize is being resolved, or there is no fontSize for this style,
       // we use the inherited fontSize.
       if (propName === 'fontSize' || fontSize == null) {
@@ -270,13 +273,23 @@ function resolveStyle(
     const processedStyles = processStyle(stylesToReprocess, true);
     // We can end up re-processing values without a fontSize (since it might already be resolved),
     // which generates incorrect 'em'-based values. Passing the fontSize back in avoids this.
+    // However, if the fontSize is already a number it could be incorrectly scaled so it must be
+    // passed in as an option instead of a style.
     const resolvedFontSize = result.fontSize;
     const fontSizeStyle =
-      resolvedFontSize != null ? { fontSize: resolvedFontSize } : null;
-    const resolvedStyles = resolveStyle(
-      [fontSizeStyle, processedStyles],
-      options
-    );
+      resolvedFontSize != null && typeof resolvedFontSize !== 'number'
+        ? { fontSize: resolvedFontSize }
+        : null;
+    const nextStyles =
+      fontSizeStyle != null
+        ? [fontSizeStyle, processedStyles]
+        : processedStyles;
+    const nextOptions =
+      resolvedFontSize != null && typeof resolvedFontSize === 'number'
+        ? { ...options, fontSize: resolvedFontSize }
+        : options;
+
+    const resolvedStyles = resolveStyle(nextStyles, nextOptions);
     Object.assign(result, resolvedStyles);
   }
 
diff --git a/packages/react-strict-dom/src/native/css/isLengthStyleKey.js b/packages/react-strict-dom/src/native/css/isLengthStyleKey.js
index 7c77763d..e630c6ed 100644
--- a/packages/react-strict-dom/src/native/css/isLengthStyleKey.js
+++ b/packages/react-strict-dom/src/native/css/isLengthStyleKey.js
@@ -33,6 +33,7 @@ export const lengthStyleKeySet: Set<string> = new Set([
   'borderWidth',
   'bottom',
   'columnGap',
+  'fontSize',
   'gap',
   'height',
   'inlineSize',
@@ -44,6 +45,7 @@ export const lengthStyleKeySet: Set<string> = new Set([
   'insetInlineEnd',
   'insetInlineStart',
   'left',
+  'lineHeight',
   'margin',
   'marginBlock',
   'marginBlockEnd',
diff --git a/packages/react-strict-dom/tests/__snapshots__/html-test.native.js.snap-native b/packages/react-strict-dom/tests/__snapshots__/html-test.native.js.snap-native
index eb16da34..425321f4 100644
--- a/packages/react-strict-dom/tests/__snapshots__/html-test.native.js.snap-native
+++ b/packages/react-strict-dom/tests/__snapshots__/html-test.native.js.snap-native
@@ -2059,5 +2059,17 @@ exports[`<html.*> viewport width lengths are scaled according to viewport width:
   >
     Scaled content
   </Text>
+  <Text
+    ref={[Function]}
+    style={
+      {
+        "boxSizing": "content-box",
+        "fontSize": 18,
+        "position": "static",
+      }
+    }
+  >
+    Scaled content
+  </Text>
 </ViewNativeComponent>
 `;
diff --git a/packages/react-strict-dom/tests/html-test.native.js b/packages/react-strict-dom/tests/html-test.native.js
index c209aa8d..775e2a75 100644
--- a/packages/react-strict-dom/tests/html-test.native.js
+++ b/packages/react-strict-dom/tests/html-test.native.js
@@ -1668,6 +1668,9 @@ describe('<html.*>', () => {
         text: {
           fontSize: '2rem',
           lineHeight: '1em'
+        },
+        textOther: {
+          fontSize: 24
         }
       });
 
@@ -1677,6 +1680,7 @@ describe('<html.*>', () => {
           <ViewportProvider viewportWidth={1280}>
             <html.div style={styles.container}>
               <html.span style={styles.text}>Scaled content</html.span>
+              <html.span style={styles.textOther}>Scaled content</html.span>
             </html.div>
           </ViewportProvider>
         );

From 920c9d5dd8a84f7601f09414b4bc7dff187340ca Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Wed, 30 Jul 2025 11:35:42 -0700
Subject: [PATCH 18/24] Don't overwrite getBoundingClientRect (#355)

Instead of mutating the fields on the underlying node, rely on
`useImperativeHandle` to proxy those fields without exposing the node.
This fixes an issue with React DevTools when RSD modifies the
getBoundingClientRect function.

Co-authored-by: Martin Booth <martinbooth@fb.com>
---
 .../modules/createStrictDOMComponent.js       |    8 +-
 .../modules/createStrictDOMImageComponent.js  |    8 +-
 .../modules/createStrictDOMTextComponent.js   |    8 +-
 .../createStrictDOMTextInputComponent.js      |    8 +-
 .../src/native/modules/useStrictDOMElement.js |  225 +--
 packages/react-strict-dom/src/types/react.js  |    4 +-
 .../compat-test.native.js.snap-native         |   48 +-
 .../__snapshots__/html-test.js.snap-native    | 1226 ++++++++++++++---
 .../html-test.native.js.snap-native           |  732 ++++++++--
 9 files changed, 1752 insertions(+), 515 deletions(-)

diff --git a/packages/react-strict-dom/src/native/modules/createStrictDOMComponent.js b/packages/react-strict-dom/src/native/modules/createStrictDOMComponent.js
index b73c48cb..42ae5499 100644
--- a/packages/react-strict-dom/src/native/modules/createStrictDOMComponent.js
+++ b/packages/react-strict-dom/src/native/modules/createStrictDOMComponent.js
@@ -18,7 +18,6 @@ import { ProvideDisplayInside, useDisplayInside } from './ContextDisplayInside';
 import { ProvideInheritedStyles } from './ContextInheritedStyles';
 import { TextString } from './TextString';
 import { warnMsg } from '../../shared/logUtils';
-import { mergeRefs } from '../../shared/mergeRefs';
 import { useNativeProps } from './useNativeProps';
 import { useStrictDOMElement } from './useStrictDOMElement';
 
@@ -42,7 +41,7 @@ export function createStrictDOMComponent<T, P: StrictProps>(
         tagName === 'button'
           ? ReactNative.Pressable
           : ReactNative.ViewNativeComponent;
-      const elementRef = useStrictDOMElement<T>({ tagName });
+      const elementRef = useStrictDOMElement<T>(forwardedRef, { tagName });
       const hasTextAncestor = React.useContext(ReactNative.TextAncestorContext);
 
       /**
@@ -85,10 +84,7 @@ export function createStrictDOMComponent<T, P: StrictProps>(
         }
       }
 
-      nativeProps.ref = React.useMemo(
-        () => mergeRefs(elementRef, forwardedRef),
-        [elementRef, forwardedRef]
-      );
+      nativeProps.ref = elementRef;
 
       // Workaround: React Native doesn't support raw text children of View
       // Sometimes we can auto-fix this
diff --git a/packages/react-strict-dom/src/native/modules/createStrictDOMImageComponent.js b/packages/react-strict-dom/src/native/modules/createStrictDOMImageComponent.js
index 9c3999fc..adb596ed 100644
--- a/packages/react-strict-dom/src/native/modules/createStrictDOMImageComponent.js
+++ b/packages/react-strict-dom/src/native/modules/createStrictDOMImageComponent.js
@@ -12,7 +12,6 @@ import type { StrictReactDOMImageProps } from '../../types/StrictReactDOMImagePr
 import * as React from 'react';
 import * as ReactNative from '../react-native';
 
-import { mergeRefs } from '../../shared/mergeRefs';
 import { useNativeProps } from './useNativeProps';
 import { useStrictDOMElement } from './useStrictDOMElement';
 import * as css from '../css';
@@ -24,7 +23,7 @@ export function createStrictDOMImageComponent<P: StrictReactDOMImageProps, T>(
   const component: React.AbstractComponent<P, T> = React.forwardRef(
     function (props, forwardedRef) {
       let NativeComponent = ReactNative.Image;
-      const elementRef = useStrictDOMElement<T>({ tagName });
+      const elementRef = useStrictDOMElement<T>(forwardedRef, { tagName });
 
       const {
         alt,
@@ -100,10 +99,7 @@ export function createStrictDOMImageComponent<P: StrictReactDOMImageProps, T>(
 
       // Component-specific props
 
-      nativeProps.ref = React.useMemo(
-        () => mergeRefs(elementRef, forwardedRef),
-        [elementRef, forwardedRef]
-      );
+      nativeProps.ref = elementRef;
 
       // Use Animated components if necessary
       if (nativeProps.animated === true) {
diff --git a/packages/react-strict-dom/src/native/modules/createStrictDOMTextComponent.js b/packages/react-strict-dom/src/native/modules/createStrictDOMTextComponent.js
index 2f10ce48..7835b79c 100644
--- a/packages/react-strict-dom/src/native/modules/createStrictDOMTextComponent.js
+++ b/packages/react-strict-dom/src/native/modules/createStrictDOMTextComponent.js
@@ -16,7 +16,6 @@ import * as ReactNative from '../react-native';
 import { ProvideCustomProperties } from './ContextCustomProperties';
 import { ProvideInheritedStyles } from './ContextInheritedStyles';
 import { errorMsg } from '../../shared/logUtils';
-import { mergeRefs } from '../../shared/mergeRefs';
 import { useNativeProps } from './useNativeProps';
 import { useStrictDOMElement } from './useStrictDOMElement';
 
@@ -36,7 +35,7 @@ export function createStrictDOMTextComponent<T, P: StrictProps>(
   const component: React.AbstractComponent<P, T> = React.forwardRef(
     function (props, forwardedRef) {
       let NativeComponent = ReactNative.Text;
-      const elementRef = useStrictDOMElement<T>({ tagName });
+      const elementRef = useStrictDOMElement<T>(forwardedRef, { tagName });
 
       const { href, label } = props;
 
@@ -84,10 +83,7 @@ export function createStrictDOMTextComponent<T, P: StrictProps>(
 
       // Component-specific props
 
-      nativeProps.ref = React.useMemo(
-        () => mergeRefs(elementRef, forwardedRef),
-        [elementRef, forwardedRef]
-      );
+      nativeProps.ref = elementRef;
 
       // Workaround: Android doesn't support ellipsis truncation if Text is selectable
       // See #136
diff --git a/packages/react-strict-dom/src/native/modules/createStrictDOMTextInputComponent.js b/packages/react-strict-dom/src/native/modules/createStrictDOMTextInputComponent.js
index c1fbeafa..ed26de17 100644
--- a/packages/react-strict-dom/src/native/modules/createStrictDOMTextInputComponent.js
+++ b/packages/react-strict-dom/src/native/modules/createStrictDOMTextInputComponent.js
@@ -14,7 +14,6 @@ import * as React from 'react';
 import * as ReactNative from '../react-native';
 
 import { errorMsg } from '../../shared/logUtils';
-import { mergeRefs } from '../../shared/mergeRefs';
 import { useNativeProps } from './useNativeProps';
 import { useStrictDOMElement } from './useStrictDOMElement';
 
@@ -35,7 +34,7 @@ export function createStrictDOMTextInputComponent<
       let NativeComponent:
         | typeof ReactNative.TextInput
         | typeof AnimatedTextInput = ReactNative.TextInput;
-      const elementRef = useStrictDOMElement<T>({ tagName });
+      const elementRef = useStrictDOMElement<T>(forwardedRef, { tagName });
 
       const {
         autoComplete,
@@ -180,10 +179,7 @@ export function createStrictDOMTextInputComponent<
         nativeProps.value = value;
       }
 
-      nativeProps.ref = React.useMemo(
-        () => mergeRefs(elementRef, forwardedRef),
-        [elementRef, forwardedRef]
-      );
+      nativeProps.ref = elementRef;
 
       // Use Animated components if necessary
       if (nativeProps.animated === true) {
diff --git a/packages/react-strict-dom/src/native/modules/useStrictDOMElement.js b/packages/react-strict-dom/src/native/modules/useStrictDOMElement.js
index 5f0d5cd5..29d2fbef 100644
--- a/packages/react-strict-dom/src/native/modules/useStrictDOMElement.js
+++ b/packages/react-strict-dom/src/native/modules/useStrictDOMElement.js
@@ -7,28 +7,11 @@
  * @flow strict-local
  */
 
-import type { CallbackRef } from '../../types/react';
-
 import * as React from 'react';
 
 import { errorMsg } from '../../shared/logUtils';
-import { useElementCallback } from '../../shared/useElementCallback';
 import { useViewportScale } from './ContextViewportScale';
 
-function errorUnimplemented(name: string) {
-  if (__DEV__) {
-    errorMsg(`unsupported method node.${name}()`);
-  }
-}
-
-/*
-function errorUnimplementedEvent(name: string) {
-  warnMsg(
-    `unsupported event type "${name}"`
-  );
-}
-*/
-
 type Options = {
   tagName: string
 };
@@ -36,155 +19,87 @@ type Options = {
 // $FlowFixMe[unclear-type]
 type Node = any;
 
-const originalGetBoundingClientRects = new WeakMap<Node, () => DOMRect>();
-
-export function useStrictDOMElement<T>({ tagName }: Options): CallbackRef<T> {
-  const { scale: viewportScale } = useViewportScale();
-  const elementCallback = useElementCallback(
-    React.useCallback(
-      (node: Node) => {
-        Object.defineProperty(node, 'nodeName', {
-          value: tagName.toUpperCase(),
-          writable: false
-        });
-
-        const { addEventListener } = node;
-        if (addEventListener == null) {
-          node.addEventListener = () => errorUnimplemented('addEventListener');
-        }
-
-        const { animate } = node;
-        if (animate == null) {
-          node.animate = () => errorUnimplemented('animate');
-        }
-
-        const { click } = node;
-        if (click == null) {
-          node.click = () => errorUnimplemented('click');
-        }
-
-        const { contains } = node;
-        if (contains == null) {
-          node.contains = () => errorUnimplemented('contains');
-        }
-
-        const { dispatchEvent } = node;
-        if (dispatchEvent == null) {
-          node.dispatchEvent = () => errorUnimplemented('dispatchEvent');
-        }
+function errorUnimplemented(name: string) {
+  if (__DEV__) {
+    errorMsg(`unsupported method node.${name}()`);
+  }
+}
 
-        const { getAttribute } = node;
-        if (getAttribute == null) {
-          node.getAttribute = () => errorUnimplemented('getAttribute');
-        }
+function proxy(nativeRef: React.RefObject<Node>, name: string) {
+  return (...args: Array<mixed>) => {
+    const node = nativeRef.current;
+    if (node?.[name]) {
+      return node[name](...args);
+    }
+    errorUnimplemented(name);
+  };
+}
 
-        const { getBoundingClientRect } = node;
-        if (getBoundingClientRect == null) {
-          node.getBoundingClientRect = function () {
-            if (node.unstable_getBoundingClientRect != null) {
-              return node.unstable_getBoundingClientRect();
-            } else {
-              errorUnimplemented('getBoundingClientRect');
-            }
-          };
-        }
+export function useStrictDOMElement<T>(
+  ref: React.RefSetter<Node>,
+  { tagName }: Options
+): React.RefObject<T | null> {
+  const nativeRef = React.useRef<T | null>(null);
+  const { scale: viewportScale } = useViewportScale();
 
-        if (viewportScale !== 1) {
-          let getBoundingClientRect = originalGetBoundingClientRects.get(node);
-          if (getBoundingClientRect == null) {
-            getBoundingClientRect = node.getBoundingClientRect;
-            originalGetBoundingClientRects.set(node, getBoundingClientRect);
+  React.useImperativeHandle(ref, () => {
+    return {
+      get __nativeTag() {
+        const node = nativeRef.current as Node;
+        return node?.__nativeTag;
+      },
+      addEventListener: proxy(nativeRef, 'addEventListener'),
+      animate: proxy(nativeRef, 'animate'),
+      blur: proxy(nativeRef, 'blur'),
+      click: proxy(nativeRef, 'click'),
+      get complete() {
+        if (tagName === 'img') {
+          const node = nativeRef.current as Node;
+          if (node?.complete == null) {
+            // Assume images are never pre-loaded in React Native
+            return false;
+          } else {
+            return node.complete;
           }
-          const getBoundingRectConst = getBoundingClientRect;
-          node.getBoundingClientRect = function () {
-            const rect = getBoundingRectConst.call(node);
-
+        }
+      },
+      contains: proxy(nativeRef, 'contains'),
+      dispatchEvent: proxy(nativeRef, 'dispatchEvent'),
+      focus: proxy(nativeRef, 'focus'),
+      getAttribute: proxy(nativeRef, 'getAttribute'),
+      getBoundingClientRect() {
+        const node = nativeRef.current as Node;
+        const getBoundingClientRect =
+          node?.getBoundingClientRect ?? node?.unstable_getBoundingClientRect;
+        if (getBoundingClientRect) {
+          const rect = getBoundingClientRect.call(node);
+          if (viewportScale !== 1) {
             return new DOMRect(
               rect.x / viewportScale,
               rect.y / viewportScale,
               rect.width / viewportScale,
               rect.height / viewportScale
             );
-          };
-        }
-
-        const { getRootNode } = node;
-        if (getRootNode == null) {
-          node.getRootNode = () => errorUnimplemented('getRootNode');
-        }
-
-        const { hasPointerCapture } = node;
-        if (hasPointerCapture == null) {
-          node.hasPointerCapture = () =>
-            errorUnimplemented('hasPointerCapture');
-        }
-
-        const { releasePointerCapture } = node;
-        if (releasePointerCapture == null) {
-          node.releasePointerCapture = () =>
-            errorUnimplemented('releasePointerCapture');
-        }
-
-        const { removeEventListener } = node;
-        if (removeEventListener == null) {
-          node.removeEventListener = () =>
-            errorUnimplemented('removeEventListener');
-        }
-
-        const { scroll } = node;
-        if (scroll == null) {
-          node.scroll = () => errorUnimplemented('scroll');
-        }
-
-        const { scrollBy } = node;
-        if (scrollBy == null) {
-          node.scrollBy = () => errorUnimplemented('scrollBy');
-        }
-
-        const { scrollIntoView } = node;
-        if (scrollIntoView == null) {
-          node.scrollIntoView = () => errorUnimplemented('scrollIntoView');
-        }
-
-        const { scrollTo } = node;
-        if (scrollTo == null) {
-          node.scrollTo = () => errorUnimplemented('scrollTo');
-        }
-
-        const { setPointerCapture } = node;
-        if (setPointerCapture == null) {
-          node.setPointerCapture = () =>
-            errorUnimplemented('setPointerCapture');
-        }
-
-        if (tagName === 'input' || tagName === 'textarea') {
-          const { select } = node;
-          if (select == null) {
-            node.select = () => errorUnimplemented('select');
-          }
-
-          const { setSelectionRange } = node;
-          if (setSelectionRange == null) {
-            node.setSelectionRange = () =>
-              errorUnimplemented('setSelectionRange');
-          }
-        }
-        if (tagName === 'input') {
-          const { showPicker } = node;
-          if (showPicker == null) {
-            node.showPicker = () => errorUnimplemented('showPicker');
-          }
-        }
-        if (tagName === 'img') {
-          if (node.complete == null) {
-            // Assume images are never pre-loaded in React Native
-            node.complete = false;
           }
+          return rect;
         }
+        return errorUnimplemented('getBoundingClientRect');
       },
-      [tagName, viewportScale]
-    )
-  );
-
-  return elementCallback;
+      getRootNode: proxy(nativeRef, 'getRootNode'),
+      hasPointerCapture: proxy(nativeRef, 'hasPointerCapture'),
+      nodeName: tagName.toUpperCase(),
+      releasePointerCapture: proxy(nativeRef, 'releasePointerCapture'),
+      removeEventListener: proxy(nativeRef, 'removeEventListener'),
+      scroll: proxy(nativeRef, 'scroll'),
+      scrollBy: proxy(nativeRef, 'scrollBy'),
+      scrollIntoView: proxy(nativeRef, 'scrollIntoView'),
+      scrollTo: proxy(nativeRef, 'scrollTo'),
+      select: proxy(nativeRef, 'select'),
+      setSelectionRange: proxy(nativeRef, 'setSelectionRange'),
+      setPointerCapture: proxy(nativeRef, 'setPointerCapture'),
+      showPicker: proxy(nativeRef, 'showPicker')
+    };
+  }, [tagName, viewportScale]);
+
+  return nativeRef;
 }
diff --git a/packages/react-strict-dom/src/types/react.js b/packages/react-strict-dom/src/types/react.js
index fbda1e76..fdbf4aa8 100644
--- a/packages/react-strict-dom/src/types/react.js
+++ b/packages/react-strict-dom/src/types/react.js
@@ -7,6 +7,8 @@
  * @flow strict
  */
 
+import * as React from 'react';
+
 export type CallbackRef<T> = (node: T | null) => mixed;
 export type ObjectRef<T> = { -current: T, ... };
-export type Ref<T> = CallbackRef<T> | ObjectRef<T | null>;
+export type Ref<T> = CallbackRef<T> | ObjectRef<T | null> | React.RefObject<T>;
diff --git a/packages/react-strict-dom/tests/__snapshots__/compat-test.native.js.snap-native b/packages/react-strict-dom/tests/__snapshots__/compat-test.native.js.snap-native
index 49a90201..9dbe41f1 100644
--- a/packages/react-strict-dom/tests/__snapshots__/compat-test.native.js.snap-native
+++ b/packages/react-strict-dom/tests/__snapshots__/compat-test.native.js.snap-native
@@ -3,7 +3,11 @@
 exports[`<compat.native> "as" equals "image": as=image 1`] = `
 <Image
   accessibilityLabel="label"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   srcSet="1x.img, 2x.img 2x"
   style={
     {
@@ -19,7 +23,11 @@ exports[`<compat.native> "as" equals "input": as=input 1`] = `
 <TextInput
   accessibilityLabel="label"
   placeholderTextColor="green"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   secureTextEntry={true}
   style={
     {
@@ -34,7 +42,11 @@ exports[`<compat.native> "as" equals "text": as=text 1`] = `
 <Text
   accessibilityLabel="label"
   numberOfLines={3}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -51,7 +63,11 @@ exports[`<compat.native> "as" equals "textarea": as=textarea 1`] = `
   accessibilityLabel="label"
   multiline={true}
   numberOfLines={3}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -64,7 +80,11 @@ exports[`<compat.native> "as" equals "textarea": as=textarea 1`] = `
 exports[`<compat.native> "as" equals "view": as=view 1`] = `
 <View
   accessibilityLabel="label"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -78,7 +98,11 @@ exports[`<compat.native> "as" equals "view": as=view 1`] = `
 exports[`<compat.native> default: default 1`] = `
 <Pressable
   accessibilityLabel="label"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -92,7 +116,11 @@ exports[`<compat.native> default: default 1`] = `
 exports[`<compat.native> nested: nested 1`] = `
 <View
   accessibilityLabel="label"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -101,7 +129,11 @@ exports[`<compat.native> nested: nested 1`] = `
   }
 >
   <Text
-    ref={[Function]}
+    ref={
+      {
+        "current": null,
+      }
+    }
     style={
       {
         "boxSizing": "content-box",
diff --git a/packages/react-strict-dom/tests/__snapshots__/html-test.js.snap-native b/packages/react-strict-dom/tests/__snapshots__/html-test.js.snap-native
index 9dddc385..2bf4275a 100644
--- a/packages/react-strict-dom/tests/__snapshots__/html-test.js.snap-native
+++ b/packages/react-strict-dom/tests/__snapshots__/html-test.js.snap-native
@@ -2,7 +2,11 @@
 
 exports[`html "a" default rendering 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="link"
   style={
     {
@@ -17,7 +21,11 @@ exports[`html "a" default rendering 1`] = `
 
 exports[`html "a" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="link"
   style={
     {
@@ -33,7 +41,11 @@ exports[`html "a" ignores and warns about unsupported attributes 1`] = `
 exports[`html "a" supports additional anchor attributes 1`] = `
 <Text
   onPress={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="link"
   style={
     {
@@ -79,7 +91,11 @@ exports[`html "a" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -125,7 +141,11 @@ exports[`html "a" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="link"
   style={
     {
@@ -140,7 +160,11 @@ exports[`html "a" supports inline event handlers 1`] = `
 
 exports[`html "article" default rendering 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -152,7 +176,11 @@ exports[`html "article" default rendering 1`] = `
 
 exports[`html "article" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -195,7 +223,11 @@ exports[`html "article" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -246,7 +278,11 @@ exports[`html "article" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -258,7 +294,11 @@ exports[`html "article" supports inline event handlers 1`] = `
 
 exports[`html "aside" default rendering 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -270,7 +310,11 @@ exports[`html "aside" default rendering 1`] = `
 
 exports[`html "aside" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -313,7 +357,11 @@ exports[`html "aside" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -364,7 +412,11 @@ exports[`html "aside" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -376,7 +428,11 @@ exports[`html "aside" supports inline event handlers 1`] = `
 
 exports[`html "b" default rendering 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -389,7 +445,11 @@ exports[`html "b" default rendering 1`] = `
 
 exports[`html "b" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -433,7 +493,11 @@ exports[`html "b" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -478,7 +542,11 @@ exports[`html "b" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -491,7 +559,11 @@ exports[`html "b" supports inline event handlers 1`] = `
 
 exports[`html "bdi" default rendering 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -503,7 +575,11 @@ exports[`html "bdi" default rendering 1`] = `
 
 exports[`html "bdi" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -546,7 +622,11 @@ exports[`html "bdi" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -590,7 +670,11 @@ exports[`html "bdi" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -602,7 +686,11 @@ exports[`html "bdi" supports inline event handlers 1`] = `
 
 exports[`html "bdo" default rendering 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -614,7 +702,11 @@ exports[`html "bdo" default rendering 1`] = `
 
 exports[`html "bdo" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -657,7 +749,11 @@ exports[`html "bdo" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -701,7 +797,11 @@ exports[`html "bdo" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -713,7 +813,11 @@ exports[`html "bdo" supports inline event handlers 1`] = `
 
 exports[`html "blockquote" default rendering 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -725,7 +829,11 @@ exports[`html "blockquote" default rendering 1`] = `
 
 exports[`html "blockquote" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -768,7 +876,11 @@ exports[`html "blockquote" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -819,7 +931,11 @@ exports[`html "blockquote" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -831,7 +947,11 @@ exports[`html "blockquote" supports inline event handlers 1`] = `
 
 exports[`html "br" default rendering 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -846,7 +966,11 @@ exports[`html "br" default rendering 1`] = `
 
 exports[`html "br" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -892,7 +1016,11 @@ exports[`html "br" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -937,7 +1065,11 @@ exports[`html "br" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -952,7 +1084,11 @@ exports[`html "br" supports inline event handlers 1`] = `
 
 exports[`html "button" default rendering 1`] = `
 <Pressable
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="button"
   style={
     {
@@ -966,7 +1102,11 @@ exports[`html "button" default rendering 1`] = `
 
 exports[`html "button" ignores and warns about unsupported attributes 1`] = `
 <Pressable
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="button"
   style={
     {
@@ -982,7 +1122,11 @@ exports[`html "button" supports additional button attributes 1`] = `
 <Pressable
   disabled={true}
   focusable={false}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="button"
   style={
     {
@@ -1027,7 +1171,11 @@ exports[`html "button" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -1079,7 +1227,11 @@ exports[`html "button" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="button"
   style={
     {
@@ -1093,7 +1245,11 @@ exports[`html "button" supports inline event handlers 1`] = `
 
 exports[`html "code" default rendering 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1106,7 +1262,11 @@ exports[`html "code" default rendering 1`] = `
 
 exports[`html "code" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1150,7 +1310,11 @@ exports[`html "code" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -1195,7 +1359,11 @@ exports[`html "code" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1208,7 +1376,11 @@ exports[`html "code" supports inline event handlers 1`] = `
 
 exports[`html "del" default rendering 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1221,7 +1393,11 @@ exports[`html "del" default rendering 1`] = `
 
 exports[`html "del" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1265,7 +1441,11 @@ exports[`html "del" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -1310,7 +1490,11 @@ exports[`html "del" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1323,7 +1507,11 @@ exports[`html "del" supports inline event handlers 1`] = `
 
 exports[`html "div" default rendering 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1335,7 +1523,11 @@ exports[`html "div" default rendering 1`] = `
 
 exports[`html "div" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1378,7 +1570,11 @@ exports[`html "div" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -1429,7 +1625,11 @@ exports[`html "div" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1441,7 +1641,11 @@ exports[`html "div" supports inline event handlers 1`] = `
 
 exports[`html "em" default rendering 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1454,7 +1658,11 @@ exports[`html "em" default rendering 1`] = `
 
 exports[`html "em" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1498,7 +1706,11 @@ exports[`html "em" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -1543,7 +1755,11 @@ exports[`html "em" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1556,7 +1772,11 @@ exports[`html "em" supports inline event handlers 1`] = `
 
 exports[`html "fieldset" default rendering 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1568,7 +1788,11 @@ exports[`html "fieldset" default rendering 1`] = `
 
 exports[`html "fieldset" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1611,7 +1835,11 @@ exports[`html "fieldset" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -1662,7 +1890,11 @@ exports[`html "fieldset" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1674,7 +1906,11 @@ exports[`html "fieldset" supports inline event handlers 1`] = `
 
 exports[`html "footer" default rendering 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1686,7 +1922,11 @@ exports[`html "footer" default rendering 1`] = `
 
 exports[`html "footer" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1729,7 +1969,11 @@ exports[`html "footer" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -1780,7 +2024,11 @@ exports[`html "footer" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1792,7 +2040,11 @@ exports[`html "footer" supports inline event handlers 1`] = `
 
 exports[`html "form" default rendering 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1804,7 +2056,11 @@ exports[`html "form" default rendering 1`] = `
 
 exports[`html "form" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1847,7 +2103,11 @@ exports[`html "form" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -1898,7 +2158,11 @@ exports[`html "form" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1910,7 +2174,11 @@ exports[`html "form" supports inline event handlers 1`] = `
 
 exports[`html "h1" default rendering 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="heading"
   style={
     {
@@ -1925,7 +2193,11 @@ exports[`html "h1" default rendering 1`] = `
 
 exports[`html "h1" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="heading"
   style={
     {
@@ -1971,7 +2243,11 @@ exports[`html "h1" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -2017,7 +2293,11 @@ exports[`html "h1" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="heading"
   style={
     {
@@ -2032,7 +2312,11 @@ exports[`html "h1" supports inline event handlers 1`] = `
 
 exports[`html "h2" default rendering 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="heading"
   style={
     {
@@ -2047,7 +2331,11 @@ exports[`html "h2" default rendering 1`] = `
 
 exports[`html "h2" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="heading"
   style={
     {
@@ -2093,7 +2381,11 @@ exports[`html "h2" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -2139,7 +2431,11 @@ exports[`html "h2" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="heading"
   style={
     {
@@ -2154,7 +2450,11 @@ exports[`html "h2" supports inline event handlers 1`] = `
 
 exports[`html "h3" default rendering 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="heading"
   style={
     {
@@ -2169,7 +2469,11 @@ exports[`html "h3" default rendering 1`] = `
 
 exports[`html "h3" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="heading"
   style={
     {
@@ -2215,7 +2519,11 @@ exports[`html "h3" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -2261,7 +2569,11 @@ exports[`html "h3" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="heading"
   style={
     {
@@ -2276,7 +2588,11 @@ exports[`html "h3" supports inline event handlers 1`] = `
 
 exports[`html "h4" default rendering 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="heading"
   style={
     {
@@ -2291,7 +2607,11 @@ exports[`html "h4" default rendering 1`] = `
 
 exports[`html "h4" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="heading"
   style={
     {
@@ -2337,7 +2657,11 @@ exports[`html "h4" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -2383,7 +2707,11 @@ exports[`html "h4" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="heading"
   style={
     {
@@ -2398,7 +2726,11 @@ exports[`html "h4" supports inline event handlers 1`] = `
 
 exports[`html "h5" default rendering 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="heading"
   style={
     {
@@ -2413,7 +2745,11 @@ exports[`html "h5" default rendering 1`] = `
 
 exports[`html "h5" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="heading"
   style={
     {
@@ -2459,7 +2795,11 @@ exports[`html "h5" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -2505,8 +2845,12 @@ exports[`html "h5" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
-  role="heading"
+  ref={
+    {
+      "current": null,
+    }
+  }
+  role="heading"
   style={
     {
       "boxSizing": "content-box",
@@ -2520,7 +2864,11 @@ exports[`html "h5" supports inline event handlers 1`] = `
 
 exports[`html "h6" default rendering 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="heading"
   style={
     {
@@ -2535,7 +2883,11 @@ exports[`html "h6" default rendering 1`] = `
 
 exports[`html "h6" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="heading"
   style={
     {
@@ -2581,7 +2933,11 @@ exports[`html "h6" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -2627,7 +2983,11 @@ exports[`html "h6" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="heading"
   style={
     {
@@ -2642,7 +3002,11 @@ exports[`html "h6" supports inline event handlers 1`] = `
 
 exports[`html "header" default rendering 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="header"
   style={
     {
@@ -2655,7 +3019,11 @@ exports[`html "header" default rendering 1`] = `
 
 exports[`html "header" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="header"
   style={
     {
@@ -2699,7 +3067,11 @@ exports[`html "header" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -2750,7 +3122,11 @@ exports[`html "header" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="header"
   style={
     {
@@ -2763,7 +3139,11 @@ exports[`html "header" supports inline event handlers 1`] = `
 
 exports[`html "hr" default rendering 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "backgroundColor": "black",
@@ -2777,7 +3157,11 @@ exports[`html "hr" default rendering 1`] = `
 
 exports[`html "hr" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "backgroundColor": "black",
@@ -2822,7 +3206,11 @@ exports[`html "hr" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -2875,7 +3263,11 @@ exports[`html "hr" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "backgroundColor": "black",
@@ -2889,7 +3281,11 @@ exports[`html "hr" supports inline event handlers 1`] = `
 
 exports[`html "i" default rendering 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -2902,7 +3298,11 @@ exports[`html "i" default rendering 1`] = `
 
 exports[`html "i" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -2946,7 +3346,11 @@ exports[`html "i" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -2991,7 +3395,11 @@ exports[`html "i" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -3004,7 +3412,11 @@ exports[`html "i" supports inline event handlers 1`] = `
 
 exports[`html "img" default rendering 1`] = `
 <Image
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -3017,7 +3429,11 @@ exports[`html "img" default rendering 1`] = `
 
 exports[`html "img" ignores and warns about unsupported attributes 1`] = `
 <Image
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -3035,7 +3451,11 @@ exports[`html "img" supports additional image attributes 1`] = `
   height={100}
   onError={[Function]}
   onLoad={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   referrerPolicy="no-referrer"
   src="https://src.jpg"
   srcSet="https://srcSet-1x.jpg 1x, https://srcSet-2x.jpg 2x"
@@ -3086,7 +3506,11 @@ exports[`html "img" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -3130,7 +3554,11 @@ exports[`html "img" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -3143,7 +3571,11 @@ exports[`html "img" supports inline event handlers 1`] = `
 
 exports[`html "input" default rendering 1`] = `
 <TextInput
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -3156,7 +3588,11 @@ exports[`html "input" default rendering 1`] = `
 
 exports[`html "input" ignores and warns about unsupported attributes 1`] = `
 <TextInput
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -3176,7 +3612,11 @@ exports[`html "input" supports additional input attributes 1`] = `
   maxLength="10"
   onChange={[Function]}
   placeholder="Placeholder"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -3223,7 +3663,11 @@ exports[`html "input" supports global attributes 1`] = `
   importantForAccessibility="no-hide-descendants"
   inputMode="numeric"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   spellCheck={true}
   style={
@@ -3272,7 +3716,11 @@ exports[`html "input" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -3285,7 +3733,11 @@ exports[`html "input" supports inline event handlers 1`] = `
 
 exports[`html "ins" default rendering 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -3298,7 +3750,11 @@ exports[`html "ins" default rendering 1`] = `
 
 exports[`html "ins" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -3342,7 +3798,11 @@ exports[`html "ins" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -3387,7 +3847,11 @@ exports[`html "ins" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -3400,7 +3864,11 @@ exports[`html "ins" supports inline event handlers 1`] = `
 
 exports[`html "kbd" default rendering 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -3413,7 +3881,11 @@ exports[`html "kbd" default rendering 1`] = `
 
 exports[`html "kbd" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -3457,7 +3929,11 @@ exports[`html "kbd" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -3502,7 +3978,11 @@ exports[`html "kbd" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -3515,7 +3995,11 @@ exports[`html "kbd" supports inline event handlers 1`] = `
 
 exports[`html "label" default rendering 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -3527,7 +4011,11 @@ exports[`html "label" default rendering 1`] = `
 
 exports[`html "label" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -3539,7 +4027,11 @@ exports[`html "label" ignores and warns about unsupported attributes 1`] = `
 
 exports[`html "label" supports additional label attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -3582,7 +4074,11 @@ exports[`html "label" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -3626,7 +4122,11 @@ exports[`html "label" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -3638,7 +4138,11 @@ exports[`html "label" supports inline event handlers 1`] = `
 
 exports[`html "li" supports list item attributes 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="listitem"
   style={
     {
@@ -3651,7 +4155,11 @@ exports[`html "li" supports list item attributes 1`] = `
 
 exports[`html "main" default rendering 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -3663,7 +4171,11 @@ exports[`html "main" default rendering 1`] = `
 
 exports[`html "main" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -3706,7 +4218,11 @@ exports[`html "main" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -3757,7 +4273,11 @@ exports[`html "main" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -3769,7 +4289,11 @@ exports[`html "main" supports inline event handlers 1`] = `
 
 exports[`html "mark" default rendering 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "backgroundColor": "yellow",
@@ -3783,7 +4307,11 @@ exports[`html "mark" default rendering 1`] = `
 
 exports[`html "mark" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "backgroundColor": "yellow",
@@ -3828,7 +4356,11 @@ exports[`html "mark" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -3874,7 +4406,11 @@ exports[`html "mark" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "backgroundColor": "yellow",
@@ -3888,7 +4424,11 @@ exports[`html "mark" supports inline event handlers 1`] = `
 
 exports[`html "nav" default rendering 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -3900,7 +4440,11 @@ exports[`html "nav" default rendering 1`] = `
 
 exports[`html "nav" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -3943,7 +4487,11 @@ exports[`html "nav" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -3994,7 +4542,11 @@ exports[`html "nav" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -4006,7 +4558,11 @@ exports[`html "nav" supports inline event handlers 1`] = `
 
 exports[`html "ol" default rendering 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="list"
   style={
     {
@@ -4019,7 +4575,11 @@ exports[`html "ol" default rendering 1`] = `
 
 exports[`html "ol" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="list"
   style={
     {
@@ -4063,7 +4623,11 @@ exports[`html "ol" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -4114,7 +4678,11 @@ exports[`html "ol" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="list"
   style={
     {
@@ -4127,7 +4695,11 @@ exports[`html "ol" supports inline event handlers 1`] = `
 
 exports[`html "ol" supports list attributes 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="list"
   style={
     {
@@ -4140,7 +4712,11 @@ exports[`html "ol" supports list attributes 1`] = `
 
 exports[`html "optgroup" default rendering 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -4152,7 +4728,11 @@ exports[`html "optgroup" default rendering 1`] = `
 
 exports[`html "optgroup" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -4195,7 +4775,11 @@ exports[`html "optgroup" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -4246,7 +4830,11 @@ exports[`html "optgroup" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -4258,7 +4846,11 @@ exports[`html "optgroup" supports inline event handlers 1`] = `
 
 exports[`html "option" default rendering 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -4270,7 +4862,11 @@ exports[`html "option" default rendering 1`] = `
 
 exports[`html "option" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -4313,7 +4909,11 @@ exports[`html "option" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -4355,7 +4955,11 @@ exports[`html "option" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -4367,7 +4971,11 @@ exports[`html "option" supports inline event handlers 1`] = `
 
 exports[`html "option" supports input attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -4381,7 +4989,11 @@ exports[`html "option" supports input attributes 1`] = `
 
 exports[`html "p" default rendering 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -4393,7 +5005,11 @@ exports[`html "p" default rendering 1`] = `
 
 exports[`html "p" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -4436,7 +5052,11 @@ exports[`html "p" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -4480,7 +5100,11 @@ exports[`html "p" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -4492,7 +5116,11 @@ exports[`html "p" supports inline event handlers 1`] = `
 
 exports[`html "pre" default rendering 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -4505,7 +5133,11 @@ exports[`html "pre" default rendering 1`] = `
 
 exports[`html "pre" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -4549,7 +5181,11 @@ exports[`html "pre" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -4594,7 +5230,11 @@ exports[`html "pre" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -4607,7 +5247,11 @@ exports[`html "pre" supports inline event handlers 1`] = `
 
 exports[`html "s" default rendering 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -4620,7 +5264,11 @@ exports[`html "s" default rendering 1`] = `
 
 exports[`html "s" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -4664,7 +5312,11 @@ exports[`html "s" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -4709,7 +5361,11 @@ exports[`html "s" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -4722,7 +5378,11 @@ exports[`html "s" supports inline event handlers 1`] = `
 
 exports[`html "section" default rendering 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -4734,7 +5394,11 @@ exports[`html "section" default rendering 1`] = `
 
 exports[`html "section" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -4777,7 +5441,11 @@ exports[`html "section" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -4828,7 +5496,11 @@ exports[`html "section" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -4840,7 +5512,11 @@ exports[`html "section" supports inline event handlers 1`] = `
 
 exports[`html "select" default rendering 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -4852,7 +5528,11 @@ exports[`html "select" default rendering 1`] = `
 
 exports[`html "select" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -4864,7 +5544,11 @@ exports[`html "select" ignores and warns about unsupported attributes 1`] = `
 
 exports[`html "select" supports additional select attributes 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -4907,7 +5591,11 @@ exports[`html "select" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -4958,7 +5646,11 @@ exports[`html "select" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -4970,7 +5662,11 @@ exports[`html "select" supports inline event handlers 1`] = `
 
 exports[`html "span" default rendering 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -4982,7 +5678,11 @@ exports[`html "span" default rendering 1`] = `
 
 exports[`html "span" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -5025,7 +5725,11 @@ exports[`html "span" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -5069,7 +5773,11 @@ exports[`html "span" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -5081,7 +5789,11 @@ exports[`html "span" supports inline event handlers 1`] = `
 
 exports[`html "strong" default rendering 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -5094,7 +5806,11 @@ exports[`html "strong" default rendering 1`] = `
 
 exports[`html "strong" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -5138,7 +5854,11 @@ exports[`html "strong" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -5183,7 +5903,11 @@ exports[`html "strong" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -5196,7 +5920,11 @@ exports[`html "strong" supports inline event handlers 1`] = `
 
 exports[`html "sub" default rendering 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -5208,7 +5936,11 @@ exports[`html "sub" default rendering 1`] = `
 
 exports[`html "sub" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -5251,7 +5983,11 @@ exports[`html "sub" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -5295,7 +6031,11 @@ exports[`html "sub" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -5307,7 +6047,11 @@ exports[`html "sub" supports inline event handlers 1`] = `
 
 exports[`html "sup" default rendering 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -5319,7 +6063,11 @@ exports[`html "sup" default rendering 1`] = `
 
 exports[`html "sup" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -5362,7 +6110,11 @@ exports[`html "sup" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -5406,7 +6158,11 @@ exports[`html "sup" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -5419,7 +6175,11 @@ exports[`html "sup" supports inline event handlers 1`] = `
 exports[`html "textarea" default rendering 1`] = `
 <TextInput
   multiline={true}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -5434,7 +6194,11 @@ exports[`html "textarea" default rendering 1`] = `
 exports[`html "textarea" ignores and warns about unsupported attributes 1`] = `
 <TextInput
   multiline={true}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -5457,7 +6221,11 @@ exports[`html "textarea" supports additional textarea attributes 1`] = `
   numberOfLines={3}
   onChange={[Function]}
   placeholder="Placeholder"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -5505,7 +6273,11 @@ exports[`html "textarea" supports global attributes 1`] = `
   importantForAccessibility="no-hide-descendants"
   multiline={true}
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   spellCheck={true}
   style={
@@ -5556,7 +6328,11 @@ exports[`html "textarea" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -5570,7 +6346,11 @@ exports[`html "textarea" supports inline event handlers 1`] = `
 
 exports[`html "u" default rendering 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -5583,7 +6363,11 @@ exports[`html "u" default rendering 1`] = `
 
 exports[`html "u" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -5627,7 +6411,11 @@ exports[`html "u" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -5672,7 +6460,11 @@ exports[`html "u" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -5685,7 +6477,11 @@ exports[`html "u" supports inline event handlers 1`] = `
 
 exports[`html "ul" default rendering 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="list"
   style={
     {
@@ -5698,7 +6494,11 @@ exports[`html "ul" default rendering 1`] = `
 
 exports[`html "ul" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="list"
   style={
     {
@@ -5742,7 +6542,11 @@ exports[`html "ul" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="article"
   style={
     {
@@ -5793,7 +6597,11 @@ exports[`html "ul" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="list"
   style={
     {
@@ -5806,7 +6614,11 @@ exports[`html "ul" supports inline event handlers 1`] = `
 
 exports[`html "ul" supports list attributes 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   role="list"
   style={
     {
@@ -5819,7 +6631,11 @@ exports[`html "ul" supports list attributes 1`] = `
 
 exports[`html temporary data-* props support 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
diff --git a/packages/react-strict-dom/tests/__snapshots__/html-test.native.js.snap-native b/packages/react-strict-dom/tests/__snapshots__/html-test.native.js.snap-native
index 425321f4..22eca76b 100644
--- a/packages/react-strict-dom/tests/__snapshots__/html-test.native.js.snap-native
+++ b/packages/react-strict-dom/tests/__snapshots__/html-test.native.js.snap-native
@@ -2,7 +2,11 @@
 
 exports[`<html.*> auto-wraps raw strings: auto-wrap raw strings 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -24,7 +28,11 @@ exports[`<html.*> auto-wraps raw strings: auto-wrap raw strings 1`] = `
 
 exports[`<html.*> block layout override of flex layout: block layout override of flex 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "alignItems": "stretch",
@@ -40,7 +48,11 @@ exports[`<html.*> block layout override of flex layout: block layout override of
   }
 >
   <ViewNativeComponent
-    ref={[Function]}
+    ref={
+      {
+        "current": null,
+      }
+    }
     style={
       {
         "boxSizing": "content-box",
@@ -53,7 +65,11 @@ exports[`<html.*> block layout override of flex layout: block layout override of
 
 exports[`<html.*> default block layout: block layout 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -65,7 +81,11 @@ exports[`<html.*> default block layout: block layout 1`] = `
 
 exports[`<html.*> default flex layout: flex layout 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "alignContent": "stretch",
@@ -82,7 +102,11 @@ exports[`<html.*> default flex layout: flex layout 1`] = `
   }
 >
   <ViewNativeComponent
-    ref={[Function]}
+    ref={
+      {
+        "current": null,
+      }
+    }
     style={
       {
         "boxSizing": "content-box",
@@ -92,7 +116,11 @@ exports[`<html.*> default flex layout: flex layout 1`] = `
     }
   />
   <ViewNativeComponent
-    ref={[Function]}
+    ref={
+      {
+        "current": null,
+      }
+    }
     style={
       {
         "boxSizing": "content-box",
@@ -109,7 +137,11 @@ exports[`<html.*> opt in to strict layout conformance: strict layout 1`] = `
   mode="strict"
 >
   <ViewNativeComponent
-    ref={[Function]}
+    ref={
+      {
+        "current": null,
+      }
+    }
     style={
       {
         "boxSizing": "content-box",
@@ -123,7 +155,11 @@ exports[`<html.*> opt in to strict layout conformance: strict layout 1`] = `
 exports[`<html.*> prop polyfills <img> "src" prop with loading props 1`] = `
 <Image
   crossOrigin="use-credentials"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   referrerPolicy="no-referrer"
   src="https://src.jpg"
   style={
@@ -139,7 +175,11 @@ exports[`<html.*> prop polyfills <img> "src" prop with loading props 1`] = `
 exports[`<html.*> prop polyfills <img> "srcSet" prop with loading props 1`] = `
 <Image
   crossOrigin="use-credentials"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   referrerPolicy="no-referrer"
   srcSet="https://src.jpg 1x, https://srcx2.jpg 2x"
   style={
@@ -155,7 +195,11 @@ exports[`<html.*> prop polyfills <img> "srcSet" prop with loading props 1`] = `
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "additional-name" 1`] = `
 <TextInput
   autoComplete="additional-name"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -169,7 +213,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "additional-name"
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "address-line1" 1`] = `
 <TextInput
   autoComplete="address-line1"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -183,7 +231,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "address-line1" 1`
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "address-line2" 1`] = `
 <TextInput
   autoComplete="address-line2"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -197,7 +249,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "address-line2" 1`
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "bday" 1`] = `
 <TextInput
   autoComplete="bday"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -211,7 +267,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "bday" 1`] = `
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "bday-day" 1`] = `
 <TextInput
   autoComplete="bday-day"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -225,7 +285,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "bday-day" 1`] = `
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "bday-month" 1`] = `
 <TextInput
   autoComplete="bday-month"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -239,7 +303,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "bday-month" 1`] =
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "bday-year" 1`] = `
 <TextInput
   autoComplete="bday-year"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -253,7 +321,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "bday-year" 1`] =
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "cc-csc" 1`] = `
 <TextInput
   autoComplete="cc-csc"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -267,7 +339,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "cc-csc" 1`] = `
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "cc-exp" 1`] = `
 <TextInput
   autoComplete="cc-exp"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -281,7 +357,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "cc-exp" 1`] = `
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "cc-exp-month" 1`] = `
 <TextInput
   autoComplete="cc-exp-month"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -295,7 +375,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "cc-exp-month" 1`]
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "cc-exp-year" 1`] = `
 <TextInput
   autoComplete="cc-exp-year"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -309,7 +393,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "cc-exp-year" 1`]
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "cc-number" 1`] = `
 <TextInput
   autoComplete="cc-number"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -323,7 +411,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "cc-number" 1`] =
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "country" 1`] = `
 <TextInput
   autoComplete="country"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -337,7 +429,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "country" 1`] = `
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "current-password" 1`] = `
 <TextInput
   autoComplete="current-password"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -351,7 +447,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "current-password"
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "email" 1`] = `
 <TextInput
   autoComplete="email"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -365,7 +465,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "email" 1`] = `
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "family-name" 1`] = `
 <TextInput
   autoComplete="family-name"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -379,7 +483,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "family-name" 1`]
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "given-name" 1`] = `
 <TextInput
   autoComplete="given-name"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -393,7 +501,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "given-name" 1`] =
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "honorific-prefix" 1`] = `
 <TextInput
   autoComplete="honorific-prefix"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -407,7 +519,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "honorific-prefix"
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "honorific-suffix" 1`] = `
 <TextInput
   autoComplete="honorific-suffix"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -421,7 +537,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "honorific-suffix"
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "name" 1`] = `
 <TextInput
   autoComplete="name"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -435,7 +555,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "name" 1`] = `
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "new-password" 1`] = `
 <TextInput
   autoComplete="new-password"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -449,7 +573,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "new-password" 1`]
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "nickname" 1`] = `
 <TextInput
   autoComplete="nickname"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -463,7 +591,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "nickname" 1`] = `
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "off" 1`] = `
 <TextInput
   autoComplete="off"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -477,7 +609,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "off" 1`] = `
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "on" 1`] = `
 <TextInput
   autoComplete="on"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -491,7 +627,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "on" 1`] = `
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "one-time-code" 1`] = `
 <TextInput
   autoComplete="one-time-code"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -505,7 +645,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "one-time-code" 1`
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "organization" 1`] = `
 <TextInput
   autoComplete="organization"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -519,7 +663,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "organization" 1`]
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "organization-title" 1`] = `
 <TextInput
   autoComplete="organization-title"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -533,7 +681,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "organization-titl
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "postal-code" 1`] = `
 <TextInput
   autoComplete="postal-code"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -547,7 +699,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "postal-code" 1`]
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "sex" 1`] = `
 <TextInput
   autoComplete="sex"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -561,7 +717,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "sex" 1`] = `
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "street-address" 1`] = `
 <TextInput
   autoComplete="street-address"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -575,7 +735,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "street-address" 1
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "tel" 1`] = `
 <TextInput
   autoComplete="tel"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -589,7 +753,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "tel" 1`] = `
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "tel-country-code" 1`] = `
 <TextInput
   autoComplete="tel-country-code"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -603,7 +771,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "tel-country-code"
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "tel-national" 1`] = `
 <TextInput
   autoComplete="tel-national"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -617,7 +789,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "tel-national" 1`]
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "url" 1`] = `
 <TextInput
   autoComplete="url"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -631,7 +807,11 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "url" 1`] = `
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "username" 1`] = `
 <TextInput
   autoComplete="username"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -647,7 +827,11 @@ exports[`<html.*> prop polyfills <input> "disabled" prop 1`] = `
   disabled={true}
   editable={false}
   focusable={false}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -661,7 +845,11 @@ exports[`<html.*> prop polyfills <input> "disabled" prop 1`] = `
 exports[`<html.*> prop polyfills <input> "style" prop 1`] = `
 <TextInput
   placeholderTextColor="pink"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -677,7 +865,11 @@ exports[`<html.*> prop polyfills <input> "style" prop 1`] = `
 exports[`<html.*> prop polyfills <input> "type" prop: "email" 1`] = `
 <TextInput
   inputMode="email"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -691,7 +883,11 @@ exports[`<html.*> prop polyfills <input> "type" prop: "email" 1`] = `
 exports[`<html.*> prop polyfills <input> "type" prop: "number" 1`] = `
 <TextInput
   inputMode="numeric"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -704,7 +900,11 @@ exports[`<html.*> prop polyfills <input> "type" prop: "number" 1`] = `
 
 exports[`<html.*> prop polyfills <input> "type" prop: "password" 1`] = `
 <TextInput
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   secureTextEntry={true}
   style={
     {
@@ -719,7 +919,11 @@ exports[`<html.*> prop polyfills <input> "type" prop: "password" 1`] = `
 exports[`<html.*> prop polyfills <input> "type" prop: "search" 1`] = `
 <TextInput
   inputMode="search"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -733,7 +937,11 @@ exports[`<html.*> prop polyfills <input> "type" prop: "search" 1`] = `
 exports[`<html.*> prop polyfills <input> "type" prop: "tel" 1`] = `
 <TextInput
   inputMode="tel"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -747,7 +955,11 @@ exports[`<html.*> prop polyfills <input> "type" prop: "tel" 1`] = `
 exports[`<html.*> prop polyfills <input> "type" prop: "url" 1`] = `
 <TextInput
   inputMode="url"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -764,7 +976,11 @@ exports[`<html.*> prop polyfills <textarea> "disabled" prop 1`] = `
   editable={false}
   focusable={false}
   multiline={true}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -780,7 +996,11 @@ exports[`<html.*> prop polyfills <textarea> "rows" prop 1`] = `
 <TextInput
   multiline={true}
   numberOfLines={5}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -794,7 +1014,11 @@ exports[`<html.*> prop polyfills <textarea> "rows" prop 1`] = `
 
 exports[`<html.*> prop polyfills global "dir" prop: "auto" block 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -806,7 +1030,11 @@ exports[`<html.*> prop polyfills global "dir" prop: "auto" block 1`] = `
 
 exports[`<html.*> prop polyfills global "dir" prop: "auto" text 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -819,7 +1047,11 @@ exports[`<html.*> prop polyfills global "dir" prop: "auto" text 1`] = `
 
 exports[`<html.*> prop polyfills global "dir" prop: "ltr" block 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -832,7 +1064,11 @@ exports[`<html.*> prop polyfills global "dir" prop: "ltr" block 1`] = `
 
 exports[`<html.*> prop polyfills global "dir" prop: "ltr" text 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -846,7 +1082,11 @@ exports[`<html.*> prop polyfills global "dir" prop: "ltr" text 1`] = `
 
 exports[`<html.*> prop polyfills global "dir" prop: "rtl" block 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -859,7 +1099,11 @@ exports[`<html.*> prop polyfills global "dir" prop: "rtl" block 1`] = `
 
 exports[`<html.*> prop polyfills global "dir" prop: "rtl" text 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -873,7 +1117,11 @@ exports[`<html.*> prop polyfills global "dir" prop: "rtl" text 1`] = `
 
 exports[`<html.*> prop polyfills global "hidden" prop 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -886,7 +1134,11 @@ exports[`<html.*> prop polyfills global "hidden" prop 1`] = `
 
 exports[`<html.*> prop polyfills global "hidden" prop: "false" 1`] = `
 <TextInput
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -899,7 +1151,11 @@ exports[`<html.*> prop polyfills global "hidden" prop: "false" 1`] = `
 
 exports[`<html.*> prop polyfills global "hidden" prop: "false" 2`] = `
 <TextInput
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -913,7 +1169,11 @@ exports[`<html.*> prop polyfills global "hidden" prop: "false" 2`] = `
 
 exports[`<html.*> prop polyfills global "hidden" prop: "hidden" 1`] = `
 <TextInput
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -927,7 +1187,11 @@ exports[`<html.*> prop polyfills global "hidden" prop: "hidden" 1`] = `
 
 exports[`<html.*> prop polyfills global "hidden" prop: "true" 1`] = `
 <TextInput
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -941,7 +1205,11 @@ exports[`<html.*> prop polyfills global "hidden" prop: "true" 1`] = `
 
 exports[`<html.*> prop polyfills global "hidden" prop: "true" 2`] = `
 <TextInput
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -955,7 +1223,11 @@ exports[`<html.*> prop polyfills global "hidden" prop: "true" 2`] = `
 
 exports[`<html.*> prop polyfills global "hidden" prop: "until-found" 1`] = `
 <TextInput
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -968,7 +1240,11 @@ exports[`<html.*> prop polyfills global "hidden" prop: "until-found" 1`] = `
 
 exports[`<html.*> prop polyfills global "hidden" prop: display set 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "alignContent": "stretch",
@@ -989,7 +1265,11 @@ exports[`<html.*> prop polyfills global "hidden" prop: display set 1`] = `
 exports[`<html.*> prop polyfills global "inputMode" prop: "decimal" 1`] = `
 <TextInput
   inputMode="decimal"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -1003,7 +1283,11 @@ exports[`<html.*> prop polyfills global "inputMode" prop: "decimal" 1`] = `
 exports[`<html.*> prop polyfills global "inputMode" prop: "email" 1`] = `
 <TextInput
   inputMode="email"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -1017,7 +1301,11 @@ exports[`<html.*> prop polyfills global "inputMode" prop: "email" 1`] = `
 exports[`<html.*> prop polyfills global "inputMode" prop: "numeric" 1`] = `
 <TextInput
   inputMode="numeric"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -1031,7 +1319,11 @@ exports[`<html.*> prop polyfills global "inputMode" prop: "numeric" 1`] = `
 exports[`<html.*> prop polyfills global "inputMode" prop: "search" 1`] = `
 <TextInput
   inputMode="search"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -1045,7 +1337,11 @@ exports[`<html.*> prop polyfills global "inputMode" prop: "search" 1`] = `
 exports[`<html.*> prop polyfills global "inputMode" prop: "tel" 1`] = `
 <TextInput
   inputMode="tel"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -1059,7 +1355,11 @@ exports[`<html.*> prop polyfills global "inputMode" prop: "tel" 1`] = `
 exports[`<html.*> prop polyfills global "inputMode" prop: "url" 1`] = `
 <TextInput
   inputMode="url"
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -1073,7 +1373,11 @@ exports[`<html.*> prop polyfills global "inputMode" prop: "url" 1`] = `
 exports[`<html.*> prop polyfills global "tabIndex" prop 1`] = `
 <TextInput
   focusable={false}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 1,
@@ -1087,7 +1391,11 @@ exports[`<html.*> prop polyfills global "tabIndex" prop 1`] = `
 exports[`<html.*> style polyfills "transition" properties  backgroundColor transition: end 1`] = `
 <Animated.View
   animated={true}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "backgroundColor": {
@@ -1110,7 +1418,11 @@ exports[`<html.*> style polyfills "transition" properties  backgroundColor trans
 exports[`<html.*> style polyfills "transition" properties  backgroundColor transition: start 1`] = `
 <Animated.View
   animated={true}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "backgroundColor": "rgba(0,0,0,0.1)",
@@ -1124,7 +1436,11 @@ exports[`<html.*> style polyfills "transition" properties  backgroundColor trans
 exports[`<html.*> style polyfills "transition" properties  cubic-bezier() timing function: end 1`] = `
 <Animated.View
   animated={true}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1147,7 +1463,11 @@ exports[`<html.*> style polyfills "transition" properties  cubic-bezier() timing
 exports[`<html.*> style polyfills "transition" properties  cubic-bezier() timing function: start 1`] = `
 <Animated.View
   animated={true}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1160,7 +1480,11 @@ exports[`<html.*> style polyfills "transition" properties  cubic-bezier() timing
 
 exports[`<html.*> style polyfills "transition" properties  default: default 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "backgroundColor": "red",
@@ -1174,7 +1498,11 @@ exports[`<html.*> style polyfills "transition" properties  default: default 1`]
 exports[`<html.*> style polyfills "transition" properties  opacity transition: end 1`] = `
 <Animated.View
   animated={true}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1197,7 +1525,11 @@ exports[`<html.*> style polyfills "transition" properties  opacity transition: e
 exports[`<html.*> style polyfills "transition" properties  opacity transition: start 1`] = `
 <Animated.View
   animated={true}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1213,7 +1545,11 @@ exports[`<html.*> style polyfills "transition" properties  other element types 1
 exports[`<html.*> style polyfills "transition" properties  other transforms: rotate 1`] = `
 <Animated.View
   animated={true}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1276,7 +1612,11 @@ exports[`<html.*> style polyfills "transition" properties  other transforms: rot
 exports[`<html.*> style polyfills "transition" properties  other transforms: scale 1`] = `
 <Animated.View
   animated={true}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1339,7 +1679,11 @@ exports[`<html.*> style polyfills "transition" properties  other transforms: sca
 exports[`<html.*> style polyfills "transition" properties  other transforms: skew 1`] = `
 <Animated.View
   animated={true}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1378,7 +1722,11 @@ exports[`<html.*> style polyfills "transition" properties  other transforms: ske
 exports[`<html.*> style polyfills "transition" properties  other transforms: translate 1`] = `
 <Animated.View
   animated={true}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1417,7 +1765,11 @@ exports[`<html.*> style polyfills "transition" properties  other transforms: tra
 exports[`<html.*> style polyfills "transition" properties  spring() timing function: end 1`] = `
 <Animated.View
   animated={true}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1440,7 +1792,11 @@ exports[`<html.*> style polyfills "transition" properties  spring() timing funct
 exports[`<html.*> style polyfills "transition" properties  spring() timing function: start 1`] = `
 <Animated.View
   animated={true}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1454,7 +1810,11 @@ exports[`<html.*> style polyfills "transition" properties  spring() timing funct
 exports[`<html.*> style polyfills "transition" properties  transform transition: end 1`] = `
 <Animated.View
   animated={true}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1493,7 +1853,11 @@ exports[`<html.*> style polyfills "transition" properties  transform transition:
 exports[`<html.*> style polyfills "transition" properties  transform transition: start 1`] = `
 <Animated.View
   animated={true}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1514,7 +1878,11 @@ exports[`<html.*> style polyfills "transition" properties  transform transition:
 exports[`<html.*> style polyfills "transition" properties  transition all properties (opacity and transform): end 1`] = `
 <Animated.View
   animated={true}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1575,7 +1943,11 @@ exports[`<html.*> style polyfills "transition" properties  transition all proper
 exports[`<html.*> style polyfills "transition" properties  transition all properties (opacity and transform): start 1`] = `
 <Animated.View
   animated={true}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1600,7 +1972,11 @@ exports[`<html.*> style polyfills "transition" properties  transition all proper
 exports[`<html.*> style polyfills "transition" properties  transition multiple properties: end 1`] = `
 <Animated.View
   animated={true}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "backgroundColor": {
@@ -1638,7 +2014,11 @@ exports[`<html.*> style polyfills "transition" properties  transition multiple p
 exports[`<html.*> style polyfills "transition" properties  transition multiple properties: start 1`] = `
 <Animated.View
   animated={true}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "backgroundColor": "red",
@@ -1658,7 +2038,11 @@ exports[`<html.*> style polyfills "transition" properties  transition multiple p
 exports[`<html.*> style polyfills "transition" properties  transition with missing properties 1`] = `
 <Animated.View
   animated={true}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1671,7 +2055,11 @@ exports[`<html.*> style polyfills "transition" properties  transition with missi
 exports[`<html.*> style polyfills "transition" properties  transition with missing properties 2`] = `
 <Animated.View
   animated={true}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1692,7 +2080,11 @@ exports[`<html.*> style polyfills "transition" properties  transition with missi
 exports[`<html.*> style polyfills "transition" properties  update triggers transition: green to blue 1`] = `
 <Animated.View
   animated={true}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "backgroundColor": {
@@ -1715,7 +2107,11 @@ exports[`<html.*> style polyfills "transition" properties  update triggers trans
 exports[`<html.*> style polyfills "transition" properties  update triggers transition: red to green 1`] = `
 <Animated.View
   animated={true}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "backgroundColor": {
@@ -1738,7 +2134,11 @@ exports[`<html.*> style polyfills "transition" properties  update triggers trans
 exports[`<html.*> style polyfills "transition" properties  width transition: end 1`] = `
 <Animated.View
   animated={true}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1761,7 +2161,11 @@ exports[`<html.*> style polyfills "transition" properties  width transition: end
 exports[`<html.*> style polyfills "transition" properties  width transition: start 1`] = `
 <Animated.View
   animated={true}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1774,7 +2178,11 @@ exports[`<html.*> style polyfills "transition" properties  width transition: sta
 
 exports[`<html.*> style polyfills inherited styles 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderColor": "red",
@@ -1784,7 +2192,11 @@ exports[`<html.*> style polyfills inherited styles 1`] = `
   }
 >
   <ViewNativeComponent
-    ref={[Function]}
+    ref={
+      {
+        "current": null,
+      }
+    }
     style={
       {
         "boxSizing": "content-box",
@@ -1793,7 +2205,11 @@ exports[`<html.*> style polyfills inherited styles 1`] = `
     }
   >
     <Text
-      ref={[Function]}
+      ref={
+        {
+          "current": null,
+        }
+      }
       style={
         {
           "boxSizing": "content-box",
@@ -1819,7 +2235,11 @@ exports[`<html.*> style polyfills inherited styles 1`] = `
     </Text>
     <TextInput
       placeholder="Does not inherit text styles"
-      ref={[Function]}
+      ref={
+        {
+          "current": null,
+        }
+      }
       style={
         {
           "borderWidth": 1,
@@ -1834,7 +2254,11 @@ exports[`<html.*> style polyfills inherited styles 1`] = `
 
 exports[`<html.*> style polyfills inherited styles for auto-fix of raw strings 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -1843,7 +2267,11 @@ exports[`<html.*> style polyfills inherited styles for auto-fix of raw strings 1
   }
 >
   <ViewNativeComponent
-    ref={[Function]}
+    ref={
+      {
+        "current": null,
+      }
+    }
     style={
       {
         "boxSizing": "content-box",
@@ -1869,7 +2297,11 @@ exports[`<html.*> style polyfills inherited styles for auto-fix of raw strings 1
 exports[`<html.*> style polyfills inherited themes 1`] = `
 [
   <Text
-    ref={[Function]}
+    ref={
+      {
+        "current": null,
+      }
+    }
     style={
       {
         "backgroundColor": "pink",
@@ -1882,7 +2314,11 @@ exports[`<html.*> style polyfills inherited themes 1`] = `
     Expect color:red
   </Text>,
   <Text
-    ref={[Function]}
+    ref={
+      {
+        "current": null,
+      }
+    }
     style={
       {
         "backgroundColor": "pink",
@@ -1897,7 +2333,11 @@ exports[`<html.*> style polyfills inherited themes 1`] = `
   <TextInput
     placeholder="Expect placeholderTextColor:green"
     placeholderTextColor="green"
-    ref={[Function]}
+    ref={
+      {
+        "current": null,
+      }
+    }
     style={
       {
         "borderWidth": 1,
@@ -1907,7 +2347,11 @@ exports[`<html.*> style polyfills inherited themes 1`] = `
     }
   />,
   <ViewNativeComponent
-    ref={[Function]}
+    ref={
+      {
+        "current": null,
+      }
+    }
     style={
       {
         "boxSizing": "content-box",
@@ -1916,7 +2360,11 @@ exports[`<html.*> style polyfills inherited themes 1`] = `
     }
   >
     <Text
-      ref={[Function]}
+      ref={
+        {
+          "current": null,
+        }
+      }
       style={
         {
           "backgroundColor": "pink",
@@ -1931,7 +2379,11 @@ exports[`<html.*> style polyfills inherited themes 1`] = `
     <TextInput
       placeholder="Expect placeholderTextColor:green"
       placeholderTextColor="green"
-      ref={[Function]}
+      ref={
+        {
+          "current": null,
+        }
+      }
       style={
         {
           "borderWidth": 1,
@@ -1941,7 +2393,11 @@ exports[`<html.*> style polyfills inherited themes 1`] = `
       }
     />
     <ViewNativeComponent
-      ref={[Function]}
+      ref={
+        {
+          "current": null,
+        }
+      }
       style={
         {
           "boxSizing": "content-box",
@@ -1950,7 +2406,11 @@ exports[`<html.*> style polyfills inherited themes 1`] = `
       }
     >
       <Text
-        ref={[Function]}
+        ref={
+          {
+            "current": null,
+          }
+        }
         style={
           {
             "backgroundColor": "pink",
@@ -1965,7 +2425,11 @@ exports[`<html.*> style polyfills inherited themes 1`] = `
       <TextInput
         placeholder="Expect placeholderTextColor:blue"
         placeholderTextColor="blue"
-        ref={[Function]}
+        ref={
+          {
+            "current": null,
+          }
+        }
         style={
           {
             "borderWidth": 1,
@@ -1977,7 +2441,11 @@ exports[`<html.*> style polyfills inherited themes 1`] = `
     </ViewNativeComponent>
   </ViewNativeComponent>,
   <Text
-    ref={[Function]}
+    ref={
+      {
+        "current": null,
+      }
+    }
     style={
       {
         "backgroundColor": "pink",
@@ -1994,7 +2462,11 @@ exports[`<html.*> style polyfills inherited themes 1`] = `
 
 exports[`<html.*> style polyfills legacy: ThemeProvider 1`] = `
 <Text
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -2010,7 +2482,11 @@ exports[`<html.*> style polyfills legacy: ThemeProvider 1`] = `
 exports[`<html.*> style polyfills lineClamp workaround for Android 1`] = `
 <Text
   numberOfLines={3}
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "boxSizing": "content-box",
@@ -2025,7 +2501,11 @@ exports[`<html.*> style polyfills lineClamp workaround for Android 1`] = `
 
 exports[`<html.*> viewport width lengths are scaled according to viewport width: scaled lengths 1`] = `
 <ViewNativeComponent
-  ref={[Function]}
+  ref={
+    {
+      "current": null,
+    }
+  }
   style={
     {
       "borderWidth": 0.75,
@@ -2047,7 +2527,11 @@ exports[`<html.*> viewport width lengths are scaled according to viewport width:
   }
 >
   <Text
-    ref={[Function]}
+    ref={
+      {
+        "current": null,
+      }
+    }
     style={
       {
         "boxSizing": "content-box",
@@ -2060,7 +2544,11 @@ exports[`<html.*> viewport width lengths are scaled according to viewport width:
     Scaled content
   </Text>
   <Text
-    ref={[Function]}
+    ref={
+      {
+        "current": null,
+      }
+    }
     style={
       {
         "boxSizing": "content-box",

From b1a372e1d7f7f89d13d455c0cc81385192855832 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Wed, 30 Jul 2025 11:03:35 -0700
Subject: [PATCH 19/24] Optimize useCustomProperties on native

Prevent unnecessary object creation and merging when dependencies
haven't changed.
---
 .../native/modules/ContextCustomProperties.js | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/react-strict-dom/src/native/modules/ContextCustomProperties.js b/packages/react-strict-dom/src/native/modules/ContextCustomProperties.js
index 92077163..eaeee5a1 100644
--- a/packages/react-strict-dom/src/native/modules/ContextCustomProperties.js
+++ b/packages/react-strict-dom/src/native/modules/ContextCustomProperties.js
@@ -26,14 +26,14 @@ export function useCustomProperties(
   customPropertiesFromThemes: ?CustomProperties
 ): CustomProperties {
   const inheritedCustomProperties = React.useContext(ContextCustomProperties);
-  if (customPropertiesFromThemes == null) {
-    return inheritedCustomProperties;
-  }
-  // TODO: optimize
-  const customProperties = Object.assign(
-    {},
-    inheritedCustomProperties,
-    customPropertiesFromThemes
-  );
-  return customProperties;
+  return React.useMemo(() => {
+    if (customPropertiesFromThemes == null) {
+      return inheritedCustomProperties;
+    }
+    return Object.assign(
+      {},
+      inheritedCustomProperties,
+      customPropertiesFromThemes
+    );
+  }, [inheritedCustomProperties, customPropertiesFromThemes]);
 }

From 57cc38cd673799f75ab615753dcecce8a31d2ee2 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Wed, 30 Jul 2025 12:05:52 -0700
Subject: [PATCH 20/24] Optimize processStyle for native

`Set`-based property lookups (O(1) instead of O(n))
---
 .../src/native/css/processStyle.js            | 73 +++++++++++--------
 1 file changed, 42 insertions(+), 31 deletions(-)

diff --git a/packages/react-strict-dom/src/native/css/processStyle.js b/packages/react-strict-dom/src/native/css/processStyle.js
index a6144356..be45fe2a 100644
--- a/packages/react-strict-dom/src/native/css/processStyle.js
+++ b/packages/react-strict-dom/src/native/css/processStyle.js
@@ -18,7 +18,34 @@ import { parseTimeValue } from './parseTimeValue';
 import { parseTransform } from './parseTransform';
 import { stringContainsVariables } from './customProperties';
 
-const validPlaceContentValues = new Set<string>([
+// Keys that should be excluded from inherit/unset processing
+const excludedFromInherit = new Set<string>([
+  ':active',
+  ':focus',
+  ':hover',
+  'default'
+]);
+
+const inheritedProperties = new Set<string>([
+  'color',
+  'cursor',
+  'fontFamily',
+  'fontSize',
+  'fontStyle',
+  'fontVariant',
+  'fontWeight',
+  'letterSpacing',
+  'lineHeight',
+  'textAlign',
+  'textDecorationColor',
+  'textDecorationLine',
+  'textDecorationStyle',
+  'textIndent',
+  'textTransform',
+  'whiteSpace'
+]);
+
+const placeContentValidValues = new Set<string>([
   'center',
   'flex-end',
   'flex-start',
@@ -28,6 +55,15 @@ const validPlaceContentValues = new Set<string>([
   'space-evenly'
 ]);
 
+const timeValuedProperties = new Set<string>([
+  'animationDelay',
+  'animationDuration',
+  'transitionDelay',
+  'transitionDuration'
+]);
+
+const unsupportedValues = new Set<string>(['currentcolor', 'initial']);
+
 export function processStyle(
   style: { +[string]: mixed },
   skipValidation?: boolean
@@ -105,7 +141,7 @@ export function processStyle(
       // Polyfill placeContent
       else if (propName === 'placeContent') {
         // None of these values are supported in RN for both properties.
-        if (!validPlaceContentValues.has(styleValue)) {
+        if (!placeContentValidValues.has(styleValue)) {
           if (__DEV__) {
             warnMsg(
               `unsupported style value in "${propName}:${String(styleValue)}"`
@@ -151,12 +187,7 @@ export function processStyle(
         continue;
       }
       // Polyfill time-valued string values (e.g., '1000ms' => 1000)
-      else if (
-        propName === 'animationDelay' ||
-        propName === 'animationDuration' ||
-        propName === 'transitionDelay' ||
-        propName === 'transitionDuration'
-      ) {
+      else if (timeValuedProperties.has(propName)) {
         result[propName] = parseTimeValue(styleValue);
         continue;
       }
@@ -174,27 +205,8 @@ export function processStyle(
         }
         // inherited properties polyfill 'inherit' in useStyleProps
         else if (
-          propName !== ':active' &&
-          propName !== ':focus' &&
-          propName !== ':hover' &&
-          propName !== 'default' &&
-          propName !== 'color' &&
-          propName !== 'cursor' &&
-          propName !== 'fontFamily' &&
-          propName !== 'fontSize' &&
-          propName !== 'fontStyle' &&
-          propName !== 'fontVariant' &&
-          propName !== 'fontWeight' &&
-          propName !== 'letterSpacing' &&
-          propName !== 'lineHeight' &&
-          propName !== 'textAlign' &&
-          propName !== 'textDecorationColor' &&
-          propName !== 'textDecorationLine' &&
-          propName !== 'textDecorationStyle' &&
-          propName !== 'textAlign' &&
-          propName !== 'textIndent' &&
-          propName !== 'textTransform' &&
-          propName !== 'whiteSpace'
+          !excludedFromInherit.has(propName) &&
+          !inheritedProperties.has(propName)
         ) {
           if (__DEV__) {
             warnMsg(
@@ -204,8 +216,7 @@ export function processStyle(
           continue;
         }
       } else if (
-        styleValue === 'currentcolor' ||
-        styleValue === 'initial' ||
+        unsupportedValues.has(styleValue) ||
         styleValue.includes('calc(')
       ) {
         if (__DEV__) {

From 286238f4c58d9d76dea62e9a78f3ed103b2cbd84 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Wed, 30 Jul 2025 12:37:11 -0700
Subject: [PATCH 21/24] Optimize useStyleProps for native

---
 .../src/native/modules/useStyleProps.js       | 128 ++++++++++--------
 1 file changed, 71 insertions(+), 57 deletions(-)

diff --git a/packages/react-strict-dom/src/native/modules/useStyleProps.js b/packages/react-strict-dom/src/native/modules/useStyleProps.js
index 58ed7884..cb64c9fd 100644
--- a/packages/react-strict-dom/src/native/modules/useStyleProps.js
+++ b/packages/react-strict-dom/src/native/modules/useStyleProps.js
@@ -8,10 +8,8 @@
  */
 
 import type { CustomProperties, Styles, Style } from '../../types/styles';
-import type {
-  ReactNativeProps,
-  ReactNativeStyle
-} from '../../types/renderer.native';
+import type { ReactNativeProps } from '../../types/renderer.native';
+import type { ReactNativeStyle } from '../../types/renderer.native';
 
 import * as css from '../css';
 import * as ReactNative from '../react-native';
@@ -22,6 +20,38 @@ import { usePseudoStates } from './usePseudoStates';
 import { useStyleTransition } from './useStyleTransition';
 import { useViewportScale } from './ContextViewportScale';
 
+const inheritedProperties = [
+  'color',
+  'cursor',
+  'fontFamily',
+  'fontSize',
+  'fontStyle',
+  'fontVariant',
+  'fontWeight',
+  'letterSpacing',
+  'lineHeight',
+  'textAlign',
+  'textDecorationColor',
+  'textDecorationLine',
+  'textDecorationStyle',
+  'textIndent',
+  'textTransform',
+  'whiteSpace',
+  'writingDirection'
+];
+
+const eventHandlerNames = [
+  'onBlur',
+  'onFocus',
+  'onMouseEnter',
+  'onMouseLeave',
+  'onPointerCancel',
+  'onPointerDown',
+  'onPointerEnter',
+  'onPointerLeave',
+  'onPointerUp'
+];
+
 type StyleOptions = {
   customProperties: ?CustomProperties,
   provideInheritableStyle: boolean,
@@ -113,19 +143,10 @@ export function useStyleProps(
   );
 
   if (handlers != null) {
-    for (const handler of [
-      'onBlur',
-      'onFocus',
-      'onMouseEnter',
-      'onMouseLeave',
-      'onPointerCancel',
-      'onPointerDown',
-      'onPointerEnter',
-      'onPointerLeave',
-      'onPointerUp'
-    ]) {
-      if (handler != null) {
-        styleProps[handler] = handlers[handler];
+    for (const handler of eventHandlerNames) {
+      const handlerValue = handlers[handler];
+      if (handlerValue != null) {
+        styleProps[handler] = handlerValue;
       }
     }
   }
@@ -146,48 +167,34 @@ export function useStyleProps(
     styleProps.style = styleWithAnimations;
   }
 
-  const {
-    color,
-    cursor,
-    fontFamily,
-    fontSize,
-    fontStyle,
-    fontVariant,
-    fontWeight,
-    letterSpacing,
-    lineHeight,
-    textAlign,
-    textDecorationColor,
-    textDecorationLine,
-    textDecorationStyle,
-    textIndent,
-    textTransform,
-    whiteSpace,
-    writingDirection,
-    ...viewStyle
-  } = styleProps.style;
+  // Create inherited values lookup for performance
+  const inheritedValues = {
+    color: inheritedColor,
+    cursor: inheritedCursor,
+    fontFamily: inheritedFontFamily,
+    fontSize: inheritedFontSize,
+    fontStyle: inheritedFontStyle,
+    fontVariant: inheritedFontVariant,
+    fontWeight: inheritedFontWeight,
+    letterSpacing: inheritedLetterSpacing,
+    lineHeight: inheritedLineHeight,
+    textAlign: inheritedTextAlign,
+    textDecorationColor: inheritedTextDecorationColor,
+    textDecorationLine: inheritedTextDecorationLine,
+    textDecorationStyle: inheritedTextDecorationStyle,
+    textIndent: inheritedTextIndent,
+    textTransform: inheritedTextTransform,
+    whiteSpace: inheritedWhiteSpace,
+    writingDirection: inheritedWritingDirection
+  };
 
   const inheritableStyle = {} as $FlowFixMe;
+  const viewStyle = {} as $FlowFixMe;
+
+  for (const key of inheritedProperties) {
+    const value = styleProps.style[key];
+    const inheritedValue = inheritedValues[key];
 
-  [
-    ['color', color, inheritedColor],
-    ['cursor', cursor, inheritedCursor],
-    ['fontFamily', fontFamily, inheritedFontFamily],
-    ['fontSize', fontSize, inheritedFontSize],
-    ['fontStyle', fontStyle, inheritedFontStyle],
-    ['fontVariant', fontVariant, inheritedFontVariant],
-    ['fontWeight', fontWeight, inheritedFontWeight],
-    ['letterSpacing', letterSpacing, inheritedLetterSpacing],
-    ['lineHeight', lineHeight, inheritedLineHeight],
-    ['textAlign', textAlign, inheritedTextAlign],
-    ['textDecorationColor', textDecorationColor, inheritedTextDecorationColor],
-    ['textDecorationLine', textDecorationLine, inheritedTextDecorationLine],
-    ['textDecorationStyle', textDecorationStyle, inheritedTextDecorationStyle],
-    ['textIndent', textIndent, inheritedTextIndent],
-    ['textTransform', textTransform, inheritedTextTransform],
-    ['whiteSpace', whiteSpace, inheritedWhiteSpace],
-    ['writingDirection', writingDirection, inheritedWritingDirection]
-  ].forEach(([key, value, inheritedValue]) => {
     let val = value;
     if (
       (withInheritedStyle && value == null) ||
@@ -200,7 +207,14 @@ export function useStyleProps(
       inheritableStyle[key] = val;
       styleProps.style[key] = val;
     }
-  });
+  }
+
+  // Copy non-inherited properties to viewStyle
+  for (const key in styleProps.style) {
+    if (!inheritedValues.hasOwnProperty(key)) {
+      viewStyle[key] = styleProps.style[key];
+    }
+  }
 
   if (withTextStyle === true) {
     const textStyle =

From bcb65346644d52c2917565fdca76e4807c0be178 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Sun, 3 Aug 2025 21:03:36 -0700
Subject: [PATCH 22/24] 0.0.44

---
 CHANGELOG.md                           | 10 ++++++++++
 package-lock.json                      |  2 +-
 packages/react-strict-dom/package.json |  2 +-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f1c2c5da..32b0ccda 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.0.44 (Aug 3, 2025)
+
+### Fixes
+
+* [Native] Optimize `useStyleProps` internals.
+* [Native] Optimize `processStyle` internals.
+* [Native] Optimize `useCustomProperties` internals.
+* [Native] Don't overwrite `getBoundingClientRect`.
+* [Native] Fix viewport scaling of numeric `fontSize`.
+
 ## 0.0.43 (Jul 27, 2025)
 
 ### New features
diff --git a/package-lock.json b/package-lock.json
index d6b0f9e9..50fe0cb6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31218,7 +31218,7 @@
       }
     },
     "packages/react-strict-dom": {
-      "version": "0.0.43",
+      "version": "0.0.44",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-imports": "^7.24.7",
diff --git a/packages/react-strict-dom/package.json b/packages/react-strict-dom/package.json
index 326cdb01..4b186255 100644
--- a/packages/react-strict-dom/package.json
+++ b/packages/react-strict-dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-strict-dom",
-  "version": "0.0.43",
+  "version": "0.0.44",
   "description": "React Strict DOM",
   "exports": {
     ".": {

From d9f8e39a1b4bfa5b4d589f52fa307fb2872ec8eb Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Mon, 4 Aug 2025 16:55:17 -0700
Subject: [PATCH 23/24] Go back to using ref callback instead of
 useImperativeHandle

We shouldn't create an object if the underlying node is null, as this
handle is meant to emulate the node but can't proxy methods if none
exist. Since useImperativeHandle isn't reset when the underlying node
changes, we go back to using ref callbacks. Rather than mutating the
underling node, we create a new object that wraps the relevant fields.
---
 .../src/native/modules/useStrictDOMElement.js |  110 +-
 .../compat-test.native.js.snap-native         |   48 +-
 .../__snapshots__/html-test.js.snap-native    | 1224 +++--------------
 .../html-test.native.js.snap-native           |  732 ++--------
 .../tests/html-test.native.js                 |   14 +
 5 files changed, 423 insertions(+), 1705 deletions(-)

diff --git a/packages/react-strict-dom/src/native/modules/useStrictDOMElement.js b/packages/react-strict-dom/src/native/modules/useStrictDOMElement.js
index 29d2fbef..8df9be26 100644
--- a/packages/react-strict-dom/src/native/modules/useStrictDOMElement.js
+++ b/packages/react-strict-dom/src/native/modules/useStrictDOMElement.js
@@ -7,9 +7,12 @@
  * @flow strict-local
  */
 
+import type { CallbackRef } from '../../types/react';
+
 import * as React from 'react';
 
 import { errorMsg } from '../../shared/logUtils';
+import { useElementCallback } from '../../shared/useElementCallback';
 import { useViewportScale } from './ContextViewportScale';
 
 type Options = {
@@ -25,9 +28,8 @@ function errorUnimplemented(name: string) {
   }
 }
 
-function proxy(nativeRef: React.RefObject<Node>, name: string) {
+function proxy(node: Node, name: string) {
   return (...args: Array<mixed>) => {
-    const node = nativeRef.current;
     if (node?.[name]) {
       return node[name](...args);
     }
@@ -35,26 +37,27 @@ function proxy(nativeRef: React.RefObject<Node>, name: string) {
   };
 }
 
-export function useStrictDOMElement<T>(
-  ref: React.RefSetter<Node>,
-  { tagName }: Options
-): React.RefObject<T | null> {
-  const nativeRef = React.useRef<T | null>(null);
-  const { scale: viewportScale } = useViewportScale();
+const memoizedStrictRefs: WeakMap<Node, mixed> = new WeakMap();
 
-  React.useImperativeHandle(ref, () => {
-    return {
+function getOrCreateStrictRef(
+  node: Node,
+  tagName: string,
+  viewportScale: number
+) {
+  const ref = memoizedStrictRefs.get(node);
+  if (ref != null) {
+    return ref;
+  } else {
+    const strictRef = {
       get __nativeTag() {
-        const node = nativeRef.current as Node;
         return node?.__nativeTag;
       },
-      addEventListener: proxy(nativeRef, 'addEventListener'),
-      animate: proxy(nativeRef, 'animate'),
-      blur: proxy(nativeRef, 'blur'),
-      click: proxy(nativeRef, 'click'),
+      addEventListener: proxy(node, 'addEventListener'),
+      animate: proxy(node, 'animate'),
+      blur: proxy(node, 'blur'),
+      click: proxy(node, 'click'),
       get complete() {
         if (tagName === 'img') {
-          const node = nativeRef.current as Node;
           if (node?.complete == null) {
             // Assume images are never pre-loaded in React Native
             return false;
@@ -63,12 +66,11 @@ export function useStrictDOMElement<T>(
           }
         }
       },
-      contains: proxy(nativeRef, 'contains'),
-      dispatchEvent: proxy(nativeRef, 'dispatchEvent'),
-      focus: proxy(nativeRef, 'focus'),
-      getAttribute: proxy(nativeRef, 'getAttribute'),
+      contains: proxy(node, 'contains'),
+      dispatchEvent: proxy(node, 'dispatchEvent'),
+      focus: proxy(node, 'focus'),
+      getAttribute: proxy(node, 'getAttribute'),
       getBoundingClientRect() {
-        const node = nativeRef.current as Node;
         const getBoundingClientRect =
           node?.getBoundingClientRect ?? node?.unstable_getBoundingClientRect;
         if (getBoundingClientRect) {
@@ -85,21 +87,59 @@ export function useStrictDOMElement<T>(
         }
         return errorUnimplemented('getBoundingClientRect');
       },
-      getRootNode: proxy(nativeRef, 'getRootNode'),
-      hasPointerCapture: proxy(nativeRef, 'hasPointerCapture'),
+      getRootNode: proxy(node, 'getRootNode'),
+      hasPointerCapture: proxy(node, 'hasPointerCapture'),
       nodeName: tagName.toUpperCase(),
-      releasePointerCapture: proxy(nativeRef, 'releasePointerCapture'),
-      removeEventListener: proxy(nativeRef, 'removeEventListener'),
-      scroll: proxy(nativeRef, 'scroll'),
-      scrollBy: proxy(nativeRef, 'scrollBy'),
-      scrollIntoView: proxy(nativeRef, 'scrollIntoView'),
-      scrollTo: proxy(nativeRef, 'scrollTo'),
-      select: proxy(nativeRef, 'select'),
-      setSelectionRange: proxy(nativeRef, 'setSelectionRange'),
-      setPointerCapture: proxy(nativeRef, 'setPointerCapture'),
-      showPicker: proxy(nativeRef, 'showPicker')
+      releasePointerCapture: proxy(node, 'releasePointerCapture'),
+      removeEventListener: proxy(node, 'removeEventListener'),
+      scroll: proxy(node, 'scroll'),
+      scrollBy: proxy(node, 'scrollBy'),
+      scrollIntoView: proxy(node, 'scrollIntoView'),
+      scrollTo: proxy(node, 'scrollTo'),
+      select: proxy(node, 'select'),
+      setSelectionRange: proxy(node, 'setSelectionRange'),
+      setPointerCapture: proxy(node, 'setPointerCapture'),
+      showPicker: proxy(node, 'showPicker')
     };
-  }, [tagName, viewportScale]);
 
-  return nativeRef;
+    memoizedStrictRefs.set(node, strictRef);
+    return strictRef;
+  }
+}
+
+export function useStrictDOMElement<T>(
+  ref: React.RefSetter<Node>,
+  { tagName }: Options
+): CallbackRef<T> {
+  const { scale: viewportScale } = useViewportScale();
+
+  const elementCallback = useElementCallback(
+    React.useCallback(
+      // $FlowFixMe[unclear-type]
+      (node: any) => {
+        if (ref == null) {
+          return undefined;
+        } else {
+          const strictRef = getOrCreateStrictRef(node, tagName, viewportScale);
+          if (typeof ref === 'function') {
+            // $FlowFixMe[incompatible-type] - Flow does not understand ref cleanup.
+            const cleanup: void | (() => void) = ref(strictRef);
+            return typeof cleanup === 'function'
+              ? cleanup
+              : () => {
+                  ref(null);
+                };
+          } else {
+            ref.current = strictRef;
+            return () => {
+              ref.current = null;
+            };
+          }
+        }
+      },
+      [ref, tagName, viewportScale]
+    )
+  );
+
+  return elementCallback;
 }
diff --git a/packages/react-strict-dom/tests/__snapshots__/compat-test.native.js.snap-native b/packages/react-strict-dom/tests/__snapshots__/compat-test.native.js.snap-native
index 9dbe41f1..49a90201 100644
--- a/packages/react-strict-dom/tests/__snapshots__/compat-test.native.js.snap-native
+++ b/packages/react-strict-dom/tests/__snapshots__/compat-test.native.js.snap-native
@@ -3,11 +3,7 @@
 exports[`<compat.native> "as" equals "image": as=image 1`] = `
 <Image
   accessibilityLabel="label"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   srcSet="1x.img, 2x.img 2x"
   style={
     {
@@ -23,11 +19,7 @@ exports[`<compat.native> "as" equals "input": as=input 1`] = `
 <TextInput
   accessibilityLabel="label"
   placeholderTextColor="green"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   secureTextEntry={true}
   style={
     {
@@ -42,11 +34,7 @@ exports[`<compat.native> "as" equals "text": as=text 1`] = `
 <Text
   accessibilityLabel="label"
   numberOfLines={3}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -63,11 +51,7 @@ exports[`<compat.native> "as" equals "textarea": as=textarea 1`] = `
   accessibilityLabel="label"
   multiline={true}
   numberOfLines={3}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -80,11 +64,7 @@ exports[`<compat.native> "as" equals "textarea": as=textarea 1`] = `
 exports[`<compat.native> "as" equals "view": as=view 1`] = `
 <View
   accessibilityLabel="label"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -98,11 +78,7 @@ exports[`<compat.native> "as" equals "view": as=view 1`] = `
 exports[`<compat.native> default: default 1`] = `
 <Pressable
   accessibilityLabel="label"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -116,11 +92,7 @@ exports[`<compat.native> default: default 1`] = `
 exports[`<compat.native> nested: nested 1`] = `
 <View
   accessibilityLabel="label"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -129,11 +101,7 @@ exports[`<compat.native> nested: nested 1`] = `
   }
 >
   <Text
-    ref={
-      {
-        "current": null,
-      }
-    }
+    ref={[Function]}
     style={
       {
         "boxSizing": "content-box",
diff --git a/packages/react-strict-dom/tests/__snapshots__/html-test.js.snap-native b/packages/react-strict-dom/tests/__snapshots__/html-test.js.snap-native
index 2bf4275a..9dddc385 100644
--- a/packages/react-strict-dom/tests/__snapshots__/html-test.js.snap-native
+++ b/packages/react-strict-dom/tests/__snapshots__/html-test.js.snap-native
@@ -2,11 +2,7 @@
 
 exports[`html "a" default rendering 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="link"
   style={
     {
@@ -21,11 +17,7 @@ exports[`html "a" default rendering 1`] = `
 
 exports[`html "a" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="link"
   style={
     {
@@ -41,11 +33,7 @@ exports[`html "a" ignores and warns about unsupported attributes 1`] = `
 exports[`html "a" supports additional anchor attributes 1`] = `
 <Text
   onPress={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="link"
   style={
     {
@@ -91,11 +79,7 @@ exports[`html "a" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -141,11 +125,7 @@ exports[`html "a" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="link"
   style={
     {
@@ -160,11 +140,7 @@ exports[`html "a" supports inline event handlers 1`] = `
 
 exports[`html "article" default rendering 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -176,11 +152,7 @@ exports[`html "article" default rendering 1`] = `
 
 exports[`html "article" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -223,11 +195,7 @@ exports[`html "article" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -278,11 +246,7 @@ exports[`html "article" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -294,11 +258,7 @@ exports[`html "article" supports inline event handlers 1`] = `
 
 exports[`html "aside" default rendering 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -310,11 +270,7 @@ exports[`html "aside" default rendering 1`] = `
 
 exports[`html "aside" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -357,11 +313,7 @@ exports[`html "aside" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -412,11 +364,7 @@ exports[`html "aside" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -428,11 +376,7 @@ exports[`html "aside" supports inline event handlers 1`] = `
 
 exports[`html "b" default rendering 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -445,11 +389,7 @@ exports[`html "b" default rendering 1`] = `
 
 exports[`html "b" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -493,11 +433,7 @@ exports[`html "b" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -542,11 +478,7 @@ exports[`html "b" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -559,11 +491,7 @@ exports[`html "b" supports inline event handlers 1`] = `
 
 exports[`html "bdi" default rendering 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -575,11 +503,7 @@ exports[`html "bdi" default rendering 1`] = `
 
 exports[`html "bdi" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -622,11 +546,7 @@ exports[`html "bdi" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -670,11 +590,7 @@ exports[`html "bdi" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -686,11 +602,7 @@ exports[`html "bdi" supports inline event handlers 1`] = `
 
 exports[`html "bdo" default rendering 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -702,11 +614,7 @@ exports[`html "bdo" default rendering 1`] = `
 
 exports[`html "bdo" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -749,11 +657,7 @@ exports[`html "bdo" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -797,11 +701,7 @@ exports[`html "bdo" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -813,11 +713,7 @@ exports[`html "bdo" supports inline event handlers 1`] = `
 
 exports[`html "blockquote" default rendering 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -829,11 +725,7 @@ exports[`html "blockquote" default rendering 1`] = `
 
 exports[`html "blockquote" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -876,11 +768,7 @@ exports[`html "blockquote" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -931,11 +819,7 @@ exports[`html "blockquote" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -947,11 +831,7 @@ exports[`html "blockquote" supports inline event handlers 1`] = `
 
 exports[`html "br" default rendering 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -966,11 +846,7 @@ exports[`html "br" default rendering 1`] = `
 
 exports[`html "br" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1016,11 +892,7 @@ exports[`html "br" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -1065,11 +937,7 @@ exports[`html "br" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1084,11 +952,7 @@ exports[`html "br" supports inline event handlers 1`] = `
 
 exports[`html "button" default rendering 1`] = `
 <Pressable
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="button"
   style={
     {
@@ -1102,11 +966,7 @@ exports[`html "button" default rendering 1`] = `
 
 exports[`html "button" ignores and warns about unsupported attributes 1`] = `
 <Pressable
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="button"
   style={
     {
@@ -1122,11 +982,7 @@ exports[`html "button" supports additional button attributes 1`] = `
 <Pressable
   disabled={true}
   focusable={false}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="button"
   style={
     {
@@ -1171,11 +1027,7 @@ exports[`html "button" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -1227,11 +1079,7 @@ exports[`html "button" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="button"
   style={
     {
@@ -1245,11 +1093,7 @@ exports[`html "button" supports inline event handlers 1`] = `
 
 exports[`html "code" default rendering 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1262,11 +1106,7 @@ exports[`html "code" default rendering 1`] = `
 
 exports[`html "code" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1310,11 +1150,7 @@ exports[`html "code" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -1359,11 +1195,7 @@ exports[`html "code" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1376,11 +1208,7 @@ exports[`html "code" supports inline event handlers 1`] = `
 
 exports[`html "del" default rendering 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1393,11 +1221,7 @@ exports[`html "del" default rendering 1`] = `
 
 exports[`html "del" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1441,11 +1265,7 @@ exports[`html "del" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -1490,11 +1310,7 @@ exports[`html "del" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1507,11 +1323,7 @@ exports[`html "del" supports inline event handlers 1`] = `
 
 exports[`html "div" default rendering 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1523,11 +1335,7 @@ exports[`html "div" default rendering 1`] = `
 
 exports[`html "div" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1570,11 +1378,7 @@ exports[`html "div" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -1625,11 +1429,7 @@ exports[`html "div" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1641,11 +1441,7 @@ exports[`html "div" supports inline event handlers 1`] = `
 
 exports[`html "em" default rendering 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1658,11 +1454,7 @@ exports[`html "em" default rendering 1`] = `
 
 exports[`html "em" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1706,11 +1498,7 @@ exports[`html "em" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -1755,11 +1543,7 @@ exports[`html "em" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1772,11 +1556,7 @@ exports[`html "em" supports inline event handlers 1`] = `
 
 exports[`html "fieldset" default rendering 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1788,11 +1568,7 @@ exports[`html "fieldset" default rendering 1`] = `
 
 exports[`html "fieldset" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1835,11 +1611,7 @@ exports[`html "fieldset" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -1890,11 +1662,7 @@ exports[`html "fieldset" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1906,11 +1674,7 @@ exports[`html "fieldset" supports inline event handlers 1`] = `
 
 exports[`html "footer" default rendering 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1922,11 +1686,7 @@ exports[`html "footer" default rendering 1`] = `
 
 exports[`html "footer" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1969,11 +1729,7 @@ exports[`html "footer" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -2024,11 +1780,7 @@ exports[`html "footer" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -2040,11 +1792,7 @@ exports[`html "footer" supports inline event handlers 1`] = `
 
 exports[`html "form" default rendering 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -2056,11 +1804,7 @@ exports[`html "form" default rendering 1`] = `
 
 exports[`html "form" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -2103,11 +1847,7 @@ exports[`html "form" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -2158,11 +1898,7 @@ exports[`html "form" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -2174,11 +1910,7 @@ exports[`html "form" supports inline event handlers 1`] = `
 
 exports[`html "h1" default rendering 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="heading"
   style={
     {
@@ -2193,11 +1925,7 @@ exports[`html "h1" default rendering 1`] = `
 
 exports[`html "h1" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="heading"
   style={
     {
@@ -2243,11 +1971,7 @@ exports[`html "h1" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -2293,11 +2017,7 @@ exports[`html "h1" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="heading"
   style={
     {
@@ -2312,11 +2032,7 @@ exports[`html "h1" supports inline event handlers 1`] = `
 
 exports[`html "h2" default rendering 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="heading"
   style={
     {
@@ -2331,11 +2047,7 @@ exports[`html "h2" default rendering 1`] = `
 
 exports[`html "h2" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="heading"
   style={
     {
@@ -2381,11 +2093,7 @@ exports[`html "h2" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -2431,11 +2139,7 @@ exports[`html "h2" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="heading"
   style={
     {
@@ -2450,11 +2154,7 @@ exports[`html "h2" supports inline event handlers 1`] = `
 
 exports[`html "h3" default rendering 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="heading"
   style={
     {
@@ -2469,11 +2169,7 @@ exports[`html "h3" default rendering 1`] = `
 
 exports[`html "h3" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="heading"
   style={
     {
@@ -2519,11 +2215,7 @@ exports[`html "h3" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -2569,11 +2261,7 @@ exports[`html "h3" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="heading"
   style={
     {
@@ -2588,11 +2276,7 @@ exports[`html "h3" supports inline event handlers 1`] = `
 
 exports[`html "h4" default rendering 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="heading"
   style={
     {
@@ -2607,11 +2291,7 @@ exports[`html "h4" default rendering 1`] = `
 
 exports[`html "h4" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="heading"
   style={
     {
@@ -2657,11 +2337,7 @@ exports[`html "h4" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -2707,11 +2383,7 @@ exports[`html "h4" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="heading"
   style={
     {
@@ -2726,11 +2398,7 @@ exports[`html "h4" supports inline event handlers 1`] = `
 
 exports[`html "h5" default rendering 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="heading"
   style={
     {
@@ -2745,11 +2413,7 @@ exports[`html "h5" default rendering 1`] = `
 
 exports[`html "h5" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="heading"
   style={
     {
@@ -2795,11 +2459,7 @@ exports[`html "h5" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -2845,11 +2505,7 @@ exports[`html "h5" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="heading"
   style={
     {
@@ -2864,11 +2520,7 @@ exports[`html "h5" supports inline event handlers 1`] = `
 
 exports[`html "h6" default rendering 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="heading"
   style={
     {
@@ -2883,11 +2535,7 @@ exports[`html "h6" default rendering 1`] = `
 
 exports[`html "h6" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="heading"
   style={
     {
@@ -2933,11 +2581,7 @@ exports[`html "h6" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -2983,11 +2627,7 @@ exports[`html "h6" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="heading"
   style={
     {
@@ -3002,11 +2642,7 @@ exports[`html "h6" supports inline event handlers 1`] = `
 
 exports[`html "header" default rendering 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="header"
   style={
     {
@@ -3019,11 +2655,7 @@ exports[`html "header" default rendering 1`] = `
 
 exports[`html "header" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="header"
   style={
     {
@@ -3067,11 +2699,7 @@ exports[`html "header" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -3122,11 +2750,7 @@ exports[`html "header" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="header"
   style={
     {
@@ -3139,11 +2763,7 @@ exports[`html "header" supports inline event handlers 1`] = `
 
 exports[`html "hr" default rendering 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "backgroundColor": "black",
@@ -3157,11 +2777,7 @@ exports[`html "hr" default rendering 1`] = `
 
 exports[`html "hr" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "backgroundColor": "black",
@@ -3206,11 +2822,7 @@ exports[`html "hr" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -3263,11 +2875,7 @@ exports[`html "hr" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "backgroundColor": "black",
@@ -3281,11 +2889,7 @@ exports[`html "hr" supports inline event handlers 1`] = `
 
 exports[`html "i" default rendering 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -3298,11 +2902,7 @@ exports[`html "i" default rendering 1`] = `
 
 exports[`html "i" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -3346,11 +2946,7 @@ exports[`html "i" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -3395,11 +2991,7 @@ exports[`html "i" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -3412,11 +3004,7 @@ exports[`html "i" supports inline event handlers 1`] = `
 
 exports[`html "img" default rendering 1`] = `
 <Image
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -3429,11 +3017,7 @@ exports[`html "img" default rendering 1`] = `
 
 exports[`html "img" ignores and warns about unsupported attributes 1`] = `
 <Image
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -3451,11 +3035,7 @@ exports[`html "img" supports additional image attributes 1`] = `
   height={100}
   onError={[Function]}
   onLoad={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   referrerPolicy="no-referrer"
   src="https://src.jpg"
   srcSet="https://srcSet-1x.jpg 1x, https://srcSet-2x.jpg 2x"
@@ -3506,11 +3086,7 @@ exports[`html "img" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -3554,11 +3130,7 @@ exports[`html "img" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -3571,11 +3143,7 @@ exports[`html "img" supports inline event handlers 1`] = `
 
 exports[`html "input" default rendering 1`] = `
 <TextInput
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -3588,11 +3156,7 @@ exports[`html "input" default rendering 1`] = `
 
 exports[`html "input" ignores and warns about unsupported attributes 1`] = `
 <TextInput
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -3612,11 +3176,7 @@ exports[`html "input" supports additional input attributes 1`] = `
   maxLength="10"
   onChange={[Function]}
   placeholder="Placeholder"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -3663,11 +3223,7 @@ exports[`html "input" supports global attributes 1`] = `
   importantForAccessibility="no-hide-descendants"
   inputMode="numeric"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   spellCheck={true}
   style={
@@ -3716,11 +3272,7 @@ exports[`html "input" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -3733,11 +3285,7 @@ exports[`html "input" supports inline event handlers 1`] = `
 
 exports[`html "ins" default rendering 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -3750,11 +3298,7 @@ exports[`html "ins" default rendering 1`] = `
 
 exports[`html "ins" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -3798,11 +3342,7 @@ exports[`html "ins" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -3847,11 +3387,7 @@ exports[`html "ins" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -3864,11 +3400,7 @@ exports[`html "ins" supports inline event handlers 1`] = `
 
 exports[`html "kbd" default rendering 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -3881,11 +3413,7 @@ exports[`html "kbd" default rendering 1`] = `
 
 exports[`html "kbd" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -3929,11 +3457,7 @@ exports[`html "kbd" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -3978,11 +3502,7 @@ exports[`html "kbd" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -3995,11 +3515,7 @@ exports[`html "kbd" supports inline event handlers 1`] = `
 
 exports[`html "label" default rendering 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -4011,11 +3527,7 @@ exports[`html "label" default rendering 1`] = `
 
 exports[`html "label" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -4027,11 +3539,7 @@ exports[`html "label" ignores and warns about unsupported attributes 1`] = `
 
 exports[`html "label" supports additional label attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -4074,11 +3582,7 @@ exports[`html "label" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -4122,11 +3626,7 @@ exports[`html "label" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -4138,11 +3638,7 @@ exports[`html "label" supports inline event handlers 1`] = `
 
 exports[`html "li" supports list item attributes 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="listitem"
   style={
     {
@@ -4155,11 +3651,7 @@ exports[`html "li" supports list item attributes 1`] = `
 
 exports[`html "main" default rendering 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -4171,11 +3663,7 @@ exports[`html "main" default rendering 1`] = `
 
 exports[`html "main" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -4218,11 +3706,7 @@ exports[`html "main" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -4273,11 +3757,7 @@ exports[`html "main" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -4289,11 +3769,7 @@ exports[`html "main" supports inline event handlers 1`] = `
 
 exports[`html "mark" default rendering 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "backgroundColor": "yellow",
@@ -4307,11 +3783,7 @@ exports[`html "mark" default rendering 1`] = `
 
 exports[`html "mark" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "backgroundColor": "yellow",
@@ -4356,11 +3828,7 @@ exports[`html "mark" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -4406,11 +3874,7 @@ exports[`html "mark" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "backgroundColor": "yellow",
@@ -4424,11 +3888,7 @@ exports[`html "mark" supports inline event handlers 1`] = `
 
 exports[`html "nav" default rendering 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -4440,11 +3900,7 @@ exports[`html "nav" default rendering 1`] = `
 
 exports[`html "nav" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -4487,11 +3943,7 @@ exports[`html "nav" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -4542,11 +3994,7 @@ exports[`html "nav" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -4558,11 +4006,7 @@ exports[`html "nav" supports inline event handlers 1`] = `
 
 exports[`html "ol" default rendering 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="list"
   style={
     {
@@ -4575,11 +4019,7 @@ exports[`html "ol" default rendering 1`] = `
 
 exports[`html "ol" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="list"
   style={
     {
@@ -4623,11 +4063,7 @@ exports[`html "ol" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -4678,11 +4114,7 @@ exports[`html "ol" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="list"
   style={
     {
@@ -4695,11 +4127,7 @@ exports[`html "ol" supports inline event handlers 1`] = `
 
 exports[`html "ol" supports list attributes 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="list"
   style={
     {
@@ -4712,11 +4140,7 @@ exports[`html "ol" supports list attributes 1`] = `
 
 exports[`html "optgroup" default rendering 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -4728,11 +4152,7 @@ exports[`html "optgroup" default rendering 1`] = `
 
 exports[`html "optgroup" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -4775,11 +4195,7 @@ exports[`html "optgroup" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -4830,11 +4246,7 @@ exports[`html "optgroup" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -4846,11 +4258,7 @@ exports[`html "optgroup" supports inline event handlers 1`] = `
 
 exports[`html "option" default rendering 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -4862,11 +4270,7 @@ exports[`html "option" default rendering 1`] = `
 
 exports[`html "option" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -4909,11 +4313,7 @@ exports[`html "option" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -4955,11 +4355,7 @@ exports[`html "option" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -4971,11 +4367,7 @@ exports[`html "option" supports inline event handlers 1`] = `
 
 exports[`html "option" supports input attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -4989,11 +4381,7 @@ exports[`html "option" supports input attributes 1`] = `
 
 exports[`html "p" default rendering 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -5005,11 +4393,7 @@ exports[`html "p" default rendering 1`] = `
 
 exports[`html "p" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -5052,11 +4436,7 @@ exports[`html "p" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -5100,11 +4480,7 @@ exports[`html "p" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -5116,11 +4492,7 @@ exports[`html "p" supports inline event handlers 1`] = `
 
 exports[`html "pre" default rendering 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -5133,11 +4505,7 @@ exports[`html "pre" default rendering 1`] = `
 
 exports[`html "pre" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -5181,11 +4549,7 @@ exports[`html "pre" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -5230,11 +4594,7 @@ exports[`html "pre" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -5247,11 +4607,7 @@ exports[`html "pre" supports inline event handlers 1`] = `
 
 exports[`html "s" default rendering 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -5264,11 +4620,7 @@ exports[`html "s" default rendering 1`] = `
 
 exports[`html "s" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -5312,11 +4664,7 @@ exports[`html "s" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -5361,11 +4709,7 @@ exports[`html "s" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -5378,11 +4722,7 @@ exports[`html "s" supports inline event handlers 1`] = `
 
 exports[`html "section" default rendering 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -5394,11 +4734,7 @@ exports[`html "section" default rendering 1`] = `
 
 exports[`html "section" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -5441,11 +4777,7 @@ exports[`html "section" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -5496,11 +4828,7 @@ exports[`html "section" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -5512,11 +4840,7 @@ exports[`html "section" supports inline event handlers 1`] = `
 
 exports[`html "select" default rendering 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -5528,11 +4852,7 @@ exports[`html "select" default rendering 1`] = `
 
 exports[`html "select" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -5544,11 +4864,7 @@ exports[`html "select" ignores and warns about unsupported attributes 1`] = `
 
 exports[`html "select" supports additional select attributes 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -5591,11 +4907,7 @@ exports[`html "select" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -5646,11 +4958,7 @@ exports[`html "select" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -5662,11 +4970,7 @@ exports[`html "select" supports inline event handlers 1`] = `
 
 exports[`html "span" default rendering 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -5678,11 +4982,7 @@ exports[`html "span" default rendering 1`] = `
 
 exports[`html "span" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -5725,11 +5025,7 @@ exports[`html "span" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -5773,11 +5069,7 @@ exports[`html "span" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -5789,11 +5081,7 @@ exports[`html "span" supports inline event handlers 1`] = `
 
 exports[`html "strong" default rendering 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -5806,11 +5094,7 @@ exports[`html "strong" default rendering 1`] = `
 
 exports[`html "strong" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -5854,11 +5138,7 @@ exports[`html "strong" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -5903,11 +5183,7 @@ exports[`html "strong" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -5920,11 +5196,7 @@ exports[`html "strong" supports inline event handlers 1`] = `
 
 exports[`html "sub" default rendering 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -5936,11 +5208,7 @@ exports[`html "sub" default rendering 1`] = `
 
 exports[`html "sub" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -5983,11 +5251,7 @@ exports[`html "sub" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -6031,11 +5295,7 @@ exports[`html "sub" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -6047,11 +5307,7 @@ exports[`html "sub" supports inline event handlers 1`] = `
 
 exports[`html "sup" default rendering 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -6063,11 +5319,7 @@ exports[`html "sup" default rendering 1`] = `
 
 exports[`html "sup" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -6110,11 +5362,7 @@ exports[`html "sup" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -6158,11 +5406,7 @@ exports[`html "sup" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -6175,11 +5419,7 @@ exports[`html "sup" supports inline event handlers 1`] = `
 exports[`html "textarea" default rendering 1`] = `
 <TextInput
   multiline={true}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -6194,11 +5434,7 @@ exports[`html "textarea" default rendering 1`] = `
 exports[`html "textarea" ignores and warns about unsupported attributes 1`] = `
 <TextInput
   multiline={true}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -6221,11 +5457,7 @@ exports[`html "textarea" supports additional textarea attributes 1`] = `
   numberOfLines={3}
   onChange={[Function]}
   placeholder="Placeholder"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -6273,11 +5505,7 @@ exports[`html "textarea" supports global attributes 1`] = `
   importantForAccessibility="no-hide-descendants"
   multiline={true}
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   spellCheck={true}
   style={
@@ -6328,11 +5556,7 @@ exports[`html "textarea" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -6346,11 +5570,7 @@ exports[`html "textarea" supports inline event handlers 1`] = `
 
 exports[`html "u" default rendering 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -6363,11 +5583,7 @@ exports[`html "u" default rendering 1`] = `
 
 exports[`html "u" ignores and warns about unsupported attributes 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -6411,11 +5627,7 @@ exports[`html "u" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -6460,11 +5672,7 @@ exports[`html "u" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -6477,11 +5685,7 @@ exports[`html "u" supports inline event handlers 1`] = `
 
 exports[`html "ul" default rendering 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="list"
   style={
     {
@@ -6494,11 +5698,7 @@ exports[`html "ul" default rendering 1`] = `
 
 exports[`html "ul" ignores and warns about unsupported attributes 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="list"
   style={
     {
@@ -6542,11 +5742,7 @@ exports[`html "ul" supports global attributes 1`] = `
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="article"
   style={
     {
@@ -6597,11 +5793,7 @@ exports[`html "ul" supports inline event handlers 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="list"
   style={
     {
@@ -6614,11 +5806,7 @@ exports[`html "ul" supports inline event handlers 1`] = `
 
 exports[`html "ul" supports list attributes 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   role="list"
   style={
     {
@@ -6631,11 +5819,7 @@ exports[`html "ul" supports list attributes 1`] = `
 
 exports[`html temporary data-* props support 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
diff --git a/packages/react-strict-dom/tests/__snapshots__/html-test.native.js.snap-native b/packages/react-strict-dom/tests/__snapshots__/html-test.native.js.snap-native
index 22eca76b..425321f4 100644
--- a/packages/react-strict-dom/tests/__snapshots__/html-test.native.js.snap-native
+++ b/packages/react-strict-dom/tests/__snapshots__/html-test.native.js.snap-native
@@ -2,11 +2,7 @@
 
 exports[`<html.*> auto-wraps raw strings: auto-wrap raw strings 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -28,11 +24,7 @@ exports[`<html.*> auto-wraps raw strings: auto-wrap raw strings 1`] = `
 
 exports[`<html.*> block layout override of flex layout: block layout override of flex 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "alignItems": "stretch",
@@ -48,11 +40,7 @@ exports[`<html.*> block layout override of flex layout: block layout override of
   }
 >
   <ViewNativeComponent
-    ref={
-      {
-        "current": null,
-      }
-    }
+    ref={[Function]}
     style={
       {
         "boxSizing": "content-box",
@@ -65,11 +53,7 @@ exports[`<html.*> block layout override of flex layout: block layout override of
 
 exports[`<html.*> default block layout: block layout 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -81,11 +65,7 @@ exports[`<html.*> default block layout: block layout 1`] = `
 
 exports[`<html.*> default flex layout: flex layout 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "alignContent": "stretch",
@@ -102,11 +82,7 @@ exports[`<html.*> default flex layout: flex layout 1`] = `
   }
 >
   <ViewNativeComponent
-    ref={
-      {
-        "current": null,
-      }
-    }
+    ref={[Function]}
     style={
       {
         "boxSizing": "content-box",
@@ -116,11 +92,7 @@ exports[`<html.*> default flex layout: flex layout 1`] = `
     }
   />
   <ViewNativeComponent
-    ref={
-      {
-        "current": null,
-      }
-    }
+    ref={[Function]}
     style={
       {
         "boxSizing": "content-box",
@@ -137,11 +109,7 @@ exports[`<html.*> opt in to strict layout conformance: strict layout 1`] = `
   mode="strict"
 >
   <ViewNativeComponent
-    ref={
-      {
-        "current": null,
-      }
-    }
+    ref={[Function]}
     style={
       {
         "boxSizing": "content-box",
@@ -155,11 +123,7 @@ exports[`<html.*> opt in to strict layout conformance: strict layout 1`] = `
 exports[`<html.*> prop polyfills <img> "src" prop with loading props 1`] = `
 <Image
   crossOrigin="use-credentials"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   referrerPolicy="no-referrer"
   src="https://src.jpg"
   style={
@@ -175,11 +139,7 @@ exports[`<html.*> prop polyfills <img> "src" prop with loading props 1`] = `
 exports[`<html.*> prop polyfills <img> "srcSet" prop with loading props 1`] = `
 <Image
   crossOrigin="use-credentials"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   referrerPolicy="no-referrer"
   srcSet="https://src.jpg 1x, https://srcx2.jpg 2x"
   style={
@@ -195,11 +155,7 @@ exports[`<html.*> prop polyfills <img> "srcSet" prop with loading props 1`] = `
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "additional-name" 1`] = `
 <TextInput
   autoComplete="additional-name"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -213,11 +169,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "additional-name"
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "address-line1" 1`] = `
 <TextInput
   autoComplete="address-line1"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -231,11 +183,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "address-line1" 1`
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "address-line2" 1`] = `
 <TextInput
   autoComplete="address-line2"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -249,11 +197,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "address-line2" 1`
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "bday" 1`] = `
 <TextInput
   autoComplete="bday"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -267,11 +211,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "bday" 1`] = `
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "bday-day" 1`] = `
 <TextInput
   autoComplete="bday-day"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -285,11 +225,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "bday-day" 1`] = `
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "bday-month" 1`] = `
 <TextInput
   autoComplete="bday-month"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -303,11 +239,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "bday-month" 1`] =
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "bday-year" 1`] = `
 <TextInput
   autoComplete="bday-year"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -321,11 +253,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "bday-year" 1`] =
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "cc-csc" 1`] = `
 <TextInput
   autoComplete="cc-csc"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -339,11 +267,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "cc-csc" 1`] = `
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "cc-exp" 1`] = `
 <TextInput
   autoComplete="cc-exp"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -357,11 +281,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "cc-exp" 1`] = `
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "cc-exp-month" 1`] = `
 <TextInput
   autoComplete="cc-exp-month"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -375,11 +295,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "cc-exp-month" 1`]
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "cc-exp-year" 1`] = `
 <TextInput
   autoComplete="cc-exp-year"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -393,11 +309,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "cc-exp-year" 1`]
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "cc-number" 1`] = `
 <TextInput
   autoComplete="cc-number"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -411,11 +323,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "cc-number" 1`] =
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "country" 1`] = `
 <TextInput
   autoComplete="country"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -429,11 +337,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "country" 1`] = `
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "current-password" 1`] = `
 <TextInput
   autoComplete="current-password"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -447,11 +351,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "current-password"
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "email" 1`] = `
 <TextInput
   autoComplete="email"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -465,11 +365,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "email" 1`] = `
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "family-name" 1`] = `
 <TextInput
   autoComplete="family-name"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -483,11 +379,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "family-name" 1`]
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "given-name" 1`] = `
 <TextInput
   autoComplete="given-name"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -501,11 +393,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "given-name" 1`] =
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "honorific-prefix" 1`] = `
 <TextInput
   autoComplete="honorific-prefix"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -519,11 +407,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "honorific-prefix"
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "honorific-suffix" 1`] = `
 <TextInput
   autoComplete="honorific-suffix"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -537,11 +421,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "honorific-suffix"
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "name" 1`] = `
 <TextInput
   autoComplete="name"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -555,11 +435,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "name" 1`] = `
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "new-password" 1`] = `
 <TextInput
   autoComplete="new-password"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -573,11 +449,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "new-password" 1`]
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "nickname" 1`] = `
 <TextInput
   autoComplete="nickname"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -591,11 +463,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "nickname" 1`] = `
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "off" 1`] = `
 <TextInput
   autoComplete="off"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -609,11 +477,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "off" 1`] = `
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "on" 1`] = `
 <TextInput
   autoComplete="on"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -627,11 +491,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "on" 1`] = `
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "one-time-code" 1`] = `
 <TextInput
   autoComplete="one-time-code"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -645,11 +505,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "one-time-code" 1`
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "organization" 1`] = `
 <TextInput
   autoComplete="organization"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -663,11 +519,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "organization" 1`]
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "organization-title" 1`] = `
 <TextInput
   autoComplete="organization-title"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -681,11 +533,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "organization-titl
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "postal-code" 1`] = `
 <TextInput
   autoComplete="postal-code"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -699,11 +547,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "postal-code" 1`]
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "sex" 1`] = `
 <TextInput
   autoComplete="sex"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -717,11 +561,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "sex" 1`] = `
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "street-address" 1`] = `
 <TextInput
   autoComplete="street-address"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -735,11 +575,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "street-address" 1
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "tel" 1`] = `
 <TextInput
   autoComplete="tel"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -753,11 +589,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "tel" 1`] = `
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "tel-country-code" 1`] = `
 <TextInput
   autoComplete="tel-country-code"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -771,11 +603,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "tel-country-code"
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "tel-national" 1`] = `
 <TextInput
   autoComplete="tel-national"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -789,11 +617,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "tel-national" 1`]
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "url" 1`] = `
 <TextInput
   autoComplete="url"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -807,11 +631,7 @@ exports[`<html.*> prop polyfills <input> "autoComplete" prop: "url" 1`] = `
 exports[`<html.*> prop polyfills <input> "autoComplete" prop: "username" 1`] = `
 <TextInput
   autoComplete="username"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -827,11 +647,7 @@ exports[`<html.*> prop polyfills <input> "disabled" prop 1`] = `
   disabled={true}
   editable={false}
   focusable={false}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -845,11 +661,7 @@ exports[`<html.*> prop polyfills <input> "disabled" prop 1`] = `
 exports[`<html.*> prop polyfills <input> "style" prop 1`] = `
 <TextInput
   placeholderTextColor="pink"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -865,11 +677,7 @@ exports[`<html.*> prop polyfills <input> "style" prop 1`] = `
 exports[`<html.*> prop polyfills <input> "type" prop: "email" 1`] = `
 <TextInput
   inputMode="email"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -883,11 +691,7 @@ exports[`<html.*> prop polyfills <input> "type" prop: "email" 1`] = `
 exports[`<html.*> prop polyfills <input> "type" prop: "number" 1`] = `
 <TextInput
   inputMode="numeric"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -900,11 +704,7 @@ exports[`<html.*> prop polyfills <input> "type" prop: "number" 1`] = `
 
 exports[`<html.*> prop polyfills <input> "type" prop: "password" 1`] = `
 <TextInput
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   secureTextEntry={true}
   style={
     {
@@ -919,11 +719,7 @@ exports[`<html.*> prop polyfills <input> "type" prop: "password" 1`] = `
 exports[`<html.*> prop polyfills <input> "type" prop: "search" 1`] = `
 <TextInput
   inputMode="search"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -937,11 +733,7 @@ exports[`<html.*> prop polyfills <input> "type" prop: "search" 1`] = `
 exports[`<html.*> prop polyfills <input> "type" prop: "tel" 1`] = `
 <TextInput
   inputMode="tel"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -955,11 +747,7 @@ exports[`<html.*> prop polyfills <input> "type" prop: "tel" 1`] = `
 exports[`<html.*> prop polyfills <input> "type" prop: "url" 1`] = `
 <TextInput
   inputMode="url"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -976,11 +764,7 @@ exports[`<html.*> prop polyfills <textarea> "disabled" prop 1`] = `
   editable={false}
   focusable={false}
   multiline={true}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -996,11 +780,7 @@ exports[`<html.*> prop polyfills <textarea> "rows" prop 1`] = `
 <TextInput
   multiline={true}
   numberOfLines={5}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -1014,11 +794,7 @@ exports[`<html.*> prop polyfills <textarea> "rows" prop 1`] = `
 
 exports[`<html.*> prop polyfills global "dir" prop: "auto" block 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1030,11 +806,7 @@ exports[`<html.*> prop polyfills global "dir" prop: "auto" block 1`] = `
 
 exports[`<html.*> prop polyfills global "dir" prop: "auto" text 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1047,11 +819,7 @@ exports[`<html.*> prop polyfills global "dir" prop: "auto" text 1`] = `
 
 exports[`<html.*> prop polyfills global "dir" prop: "ltr" block 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1064,11 +832,7 @@ exports[`<html.*> prop polyfills global "dir" prop: "ltr" block 1`] = `
 
 exports[`<html.*> prop polyfills global "dir" prop: "ltr" text 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1082,11 +846,7 @@ exports[`<html.*> prop polyfills global "dir" prop: "ltr" text 1`] = `
 
 exports[`<html.*> prop polyfills global "dir" prop: "rtl" block 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1099,11 +859,7 @@ exports[`<html.*> prop polyfills global "dir" prop: "rtl" block 1`] = `
 
 exports[`<html.*> prop polyfills global "dir" prop: "rtl" text 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1117,11 +873,7 @@ exports[`<html.*> prop polyfills global "dir" prop: "rtl" text 1`] = `
 
 exports[`<html.*> prop polyfills global "hidden" prop 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1134,11 +886,7 @@ exports[`<html.*> prop polyfills global "hidden" prop 1`] = `
 
 exports[`<html.*> prop polyfills global "hidden" prop: "false" 1`] = `
 <TextInput
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -1151,11 +899,7 @@ exports[`<html.*> prop polyfills global "hidden" prop: "false" 1`] = `
 
 exports[`<html.*> prop polyfills global "hidden" prop: "false" 2`] = `
 <TextInput
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -1169,11 +913,7 @@ exports[`<html.*> prop polyfills global "hidden" prop: "false" 2`] = `
 
 exports[`<html.*> prop polyfills global "hidden" prop: "hidden" 1`] = `
 <TextInput
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -1187,11 +927,7 @@ exports[`<html.*> prop polyfills global "hidden" prop: "hidden" 1`] = `
 
 exports[`<html.*> prop polyfills global "hidden" prop: "true" 1`] = `
 <TextInput
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -1205,11 +941,7 @@ exports[`<html.*> prop polyfills global "hidden" prop: "true" 1`] = `
 
 exports[`<html.*> prop polyfills global "hidden" prop: "true" 2`] = `
 <TextInput
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -1223,11 +955,7 @@ exports[`<html.*> prop polyfills global "hidden" prop: "true" 2`] = `
 
 exports[`<html.*> prop polyfills global "hidden" prop: "until-found" 1`] = `
 <TextInput
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -1240,11 +968,7 @@ exports[`<html.*> prop polyfills global "hidden" prop: "until-found" 1`] = `
 
 exports[`<html.*> prop polyfills global "hidden" prop: display set 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "alignContent": "stretch",
@@ -1265,11 +989,7 @@ exports[`<html.*> prop polyfills global "hidden" prop: display set 1`] = `
 exports[`<html.*> prop polyfills global "inputMode" prop: "decimal" 1`] = `
 <TextInput
   inputMode="decimal"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -1283,11 +1003,7 @@ exports[`<html.*> prop polyfills global "inputMode" prop: "decimal" 1`] = `
 exports[`<html.*> prop polyfills global "inputMode" prop: "email" 1`] = `
 <TextInput
   inputMode="email"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -1301,11 +1017,7 @@ exports[`<html.*> prop polyfills global "inputMode" prop: "email" 1`] = `
 exports[`<html.*> prop polyfills global "inputMode" prop: "numeric" 1`] = `
 <TextInput
   inputMode="numeric"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -1319,11 +1031,7 @@ exports[`<html.*> prop polyfills global "inputMode" prop: "numeric" 1`] = `
 exports[`<html.*> prop polyfills global "inputMode" prop: "search" 1`] = `
 <TextInput
   inputMode="search"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -1337,11 +1045,7 @@ exports[`<html.*> prop polyfills global "inputMode" prop: "search" 1`] = `
 exports[`<html.*> prop polyfills global "inputMode" prop: "tel" 1`] = `
 <TextInput
   inputMode="tel"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -1355,11 +1059,7 @@ exports[`<html.*> prop polyfills global "inputMode" prop: "tel" 1`] = `
 exports[`<html.*> prop polyfills global "inputMode" prop: "url" 1`] = `
 <TextInput
   inputMode="url"
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -1373,11 +1073,7 @@ exports[`<html.*> prop polyfills global "inputMode" prop: "url" 1`] = `
 exports[`<html.*> prop polyfills global "tabIndex" prop 1`] = `
 <TextInput
   focusable={false}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 1,
@@ -1391,11 +1087,7 @@ exports[`<html.*> prop polyfills global "tabIndex" prop 1`] = `
 exports[`<html.*> style polyfills "transition" properties  backgroundColor transition: end 1`] = `
 <Animated.View
   animated={true}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "backgroundColor": {
@@ -1418,11 +1110,7 @@ exports[`<html.*> style polyfills "transition" properties  backgroundColor trans
 exports[`<html.*> style polyfills "transition" properties  backgroundColor transition: start 1`] = `
 <Animated.View
   animated={true}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "backgroundColor": "rgba(0,0,0,0.1)",
@@ -1436,11 +1124,7 @@ exports[`<html.*> style polyfills "transition" properties  backgroundColor trans
 exports[`<html.*> style polyfills "transition" properties  cubic-bezier() timing function: end 1`] = `
 <Animated.View
   animated={true}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1463,11 +1147,7 @@ exports[`<html.*> style polyfills "transition" properties  cubic-bezier() timing
 exports[`<html.*> style polyfills "transition" properties  cubic-bezier() timing function: start 1`] = `
 <Animated.View
   animated={true}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1480,11 +1160,7 @@ exports[`<html.*> style polyfills "transition" properties  cubic-bezier() timing
 
 exports[`<html.*> style polyfills "transition" properties  default: default 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "backgroundColor": "red",
@@ -1498,11 +1174,7 @@ exports[`<html.*> style polyfills "transition" properties  default: default 1`]
 exports[`<html.*> style polyfills "transition" properties  opacity transition: end 1`] = `
 <Animated.View
   animated={true}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1525,11 +1197,7 @@ exports[`<html.*> style polyfills "transition" properties  opacity transition: e
 exports[`<html.*> style polyfills "transition" properties  opacity transition: start 1`] = `
 <Animated.View
   animated={true}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1545,11 +1213,7 @@ exports[`<html.*> style polyfills "transition" properties  other element types 1
 exports[`<html.*> style polyfills "transition" properties  other transforms: rotate 1`] = `
 <Animated.View
   animated={true}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1612,11 +1276,7 @@ exports[`<html.*> style polyfills "transition" properties  other transforms: rot
 exports[`<html.*> style polyfills "transition" properties  other transforms: scale 1`] = `
 <Animated.View
   animated={true}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1679,11 +1339,7 @@ exports[`<html.*> style polyfills "transition" properties  other transforms: sca
 exports[`<html.*> style polyfills "transition" properties  other transforms: skew 1`] = `
 <Animated.View
   animated={true}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1722,11 +1378,7 @@ exports[`<html.*> style polyfills "transition" properties  other transforms: ske
 exports[`<html.*> style polyfills "transition" properties  other transforms: translate 1`] = `
 <Animated.View
   animated={true}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1765,11 +1417,7 @@ exports[`<html.*> style polyfills "transition" properties  other transforms: tra
 exports[`<html.*> style polyfills "transition" properties  spring() timing function: end 1`] = `
 <Animated.View
   animated={true}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1792,11 +1440,7 @@ exports[`<html.*> style polyfills "transition" properties  spring() timing funct
 exports[`<html.*> style polyfills "transition" properties  spring() timing function: start 1`] = `
 <Animated.View
   animated={true}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1810,11 +1454,7 @@ exports[`<html.*> style polyfills "transition" properties  spring() timing funct
 exports[`<html.*> style polyfills "transition" properties  transform transition: end 1`] = `
 <Animated.View
   animated={true}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1853,11 +1493,7 @@ exports[`<html.*> style polyfills "transition" properties  transform transition:
 exports[`<html.*> style polyfills "transition" properties  transform transition: start 1`] = `
 <Animated.View
   animated={true}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1878,11 +1514,7 @@ exports[`<html.*> style polyfills "transition" properties  transform transition:
 exports[`<html.*> style polyfills "transition" properties  transition all properties (opacity and transform): end 1`] = `
 <Animated.View
   animated={true}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1943,11 +1575,7 @@ exports[`<html.*> style polyfills "transition" properties  transition all proper
 exports[`<html.*> style polyfills "transition" properties  transition all properties (opacity and transform): start 1`] = `
 <Animated.View
   animated={true}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -1972,11 +1600,7 @@ exports[`<html.*> style polyfills "transition" properties  transition all proper
 exports[`<html.*> style polyfills "transition" properties  transition multiple properties: end 1`] = `
 <Animated.View
   animated={true}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "backgroundColor": {
@@ -2014,11 +1638,7 @@ exports[`<html.*> style polyfills "transition" properties  transition multiple p
 exports[`<html.*> style polyfills "transition" properties  transition multiple properties: start 1`] = `
 <Animated.View
   animated={true}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "backgroundColor": "red",
@@ -2038,11 +1658,7 @@ exports[`<html.*> style polyfills "transition" properties  transition multiple p
 exports[`<html.*> style polyfills "transition" properties  transition with missing properties 1`] = `
 <Animated.View
   animated={true}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -2055,11 +1671,7 @@ exports[`<html.*> style polyfills "transition" properties  transition with missi
 exports[`<html.*> style polyfills "transition" properties  transition with missing properties 2`] = `
 <Animated.View
   animated={true}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -2080,11 +1692,7 @@ exports[`<html.*> style polyfills "transition" properties  transition with missi
 exports[`<html.*> style polyfills "transition" properties  update triggers transition: green to blue 1`] = `
 <Animated.View
   animated={true}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "backgroundColor": {
@@ -2107,11 +1715,7 @@ exports[`<html.*> style polyfills "transition" properties  update triggers trans
 exports[`<html.*> style polyfills "transition" properties  update triggers transition: red to green 1`] = `
 <Animated.View
   animated={true}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "backgroundColor": {
@@ -2134,11 +1738,7 @@ exports[`<html.*> style polyfills "transition" properties  update triggers trans
 exports[`<html.*> style polyfills "transition" properties  width transition: end 1`] = `
 <Animated.View
   animated={true}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -2161,11 +1761,7 @@ exports[`<html.*> style polyfills "transition" properties  width transition: end
 exports[`<html.*> style polyfills "transition" properties  width transition: start 1`] = `
 <Animated.View
   animated={true}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -2178,11 +1774,7 @@ exports[`<html.*> style polyfills "transition" properties  width transition: sta
 
 exports[`<html.*> style polyfills inherited styles 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderColor": "red",
@@ -2192,11 +1784,7 @@ exports[`<html.*> style polyfills inherited styles 1`] = `
   }
 >
   <ViewNativeComponent
-    ref={
-      {
-        "current": null,
-      }
-    }
+    ref={[Function]}
     style={
       {
         "boxSizing": "content-box",
@@ -2205,11 +1793,7 @@ exports[`<html.*> style polyfills inherited styles 1`] = `
     }
   >
     <Text
-      ref={
-        {
-          "current": null,
-        }
-      }
+      ref={[Function]}
       style={
         {
           "boxSizing": "content-box",
@@ -2235,11 +1819,7 @@ exports[`<html.*> style polyfills inherited styles 1`] = `
     </Text>
     <TextInput
       placeholder="Does not inherit text styles"
-      ref={
-        {
-          "current": null,
-        }
-      }
+      ref={[Function]}
       style={
         {
           "borderWidth": 1,
@@ -2254,11 +1834,7 @@ exports[`<html.*> style polyfills inherited styles 1`] = `
 
 exports[`<html.*> style polyfills inherited styles for auto-fix of raw strings 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -2267,11 +1843,7 @@ exports[`<html.*> style polyfills inherited styles for auto-fix of raw strings 1
   }
 >
   <ViewNativeComponent
-    ref={
-      {
-        "current": null,
-      }
-    }
+    ref={[Function]}
     style={
       {
         "boxSizing": "content-box",
@@ -2297,11 +1869,7 @@ exports[`<html.*> style polyfills inherited styles for auto-fix of raw strings 1
 exports[`<html.*> style polyfills inherited themes 1`] = `
 [
   <Text
-    ref={
-      {
-        "current": null,
-      }
-    }
+    ref={[Function]}
     style={
       {
         "backgroundColor": "pink",
@@ -2314,11 +1882,7 @@ exports[`<html.*> style polyfills inherited themes 1`] = `
     Expect color:red
   </Text>,
   <Text
-    ref={
-      {
-        "current": null,
-      }
-    }
+    ref={[Function]}
     style={
       {
         "backgroundColor": "pink",
@@ -2333,11 +1897,7 @@ exports[`<html.*> style polyfills inherited themes 1`] = `
   <TextInput
     placeholder="Expect placeholderTextColor:green"
     placeholderTextColor="green"
-    ref={
-      {
-        "current": null,
-      }
-    }
+    ref={[Function]}
     style={
       {
         "borderWidth": 1,
@@ -2347,11 +1907,7 @@ exports[`<html.*> style polyfills inherited themes 1`] = `
     }
   />,
   <ViewNativeComponent
-    ref={
-      {
-        "current": null,
-      }
-    }
+    ref={[Function]}
     style={
       {
         "boxSizing": "content-box",
@@ -2360,11 +1916,7 @@ exports[`<html.*> style polyfills inherited themes 1`] = `
     }
   >
     <Text
-      ref={
-        {
-          "current": null,
-        }
-      }
+      ref={[Function]}
       style={
         {
           "backgroundColor": "pink",
@@ -2379,11 +1931,7 @@ exports[`<html.*> style polyfills inherited themes 1`] = `
     <TextInput
       placeholder="Expect placeholderTextColor:green"
       placeholderTextColor="green"
-      ref={
-        {
-          "current": null,
-        }
-      }
+      ref={[Function]}
       style={
         {
           "borderWidth": 1,
@@ -2393,11 +1941,7 @@ exports[`<html.*> style polyfills inherited themes 1`] = `
       }
     />
     <ViewNativeComponent
-      ref={
-        {
-          "current": null,
-        }
-      }
+      ref={[Function]}
       style={
         {
           "boxSizing": "content-box",
@@ -2406,11 +1950,7 @@ exports[`<html.*> style polyfills inherited themes 1`] = `
       }
     >
       <Text
-        ref={
-          {
-            "current": null,
-          }
-        }
+        ref={[Function]}
         style={
           {
             "backgroundColor": "pink",
@@ -2425,11 +1965,7 @@ exports[`<html.*> style polyfills inherited themes 1`] = `
       <TextInput
         placeholder="Expect placeholderTextColor:blue"
         placeholderTextColor="blue"
-        ref={
-          {
-            "current": null,
-          }
-        }
+        ref={[Function]}
         style={
           {
             "borderWidth": 1,
@@ -2441,11 +1977,7 @@ exports[`<html.*> style polyfills inherited themes 1`] = `
     </ViewNativeComponent>
   </ViewNativeComponent>,
   <Text
-    ref={
-      {
-        "current": null,
-      }
-    }
+    ref={[Function]}
     style={
       {
         "backgroundColor": "pink",
@@ -2462,11 +1994,7 @@ exports[`<html.*> style polyfills inherited themes 1`] = `
 
 exports[`<html.*> style polyfills legacy: ThemeProvider 1`] = `
 <Text
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -2482,11 +2010,7 @@ exports[`<html.*> style polyfills legacy: ThemeProvider 1`] = `
 exports[`<html.*> style polyfills lineClamp workaround for Android 1`] = `
 <Text
   numberOfLines={3}
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "boxSizing": "content-box",
@@ -2501,11 +2025,7 @@ exports[`<html.*> style polyfills lineClamp workaround for Android 1`] = `
 
 exports[`<html.*> viewport width lengths are scaled according to viewport width: scaled lengths 1`] = `
 <ViewNativeComponent
-  ref={
-    {
-      "current": null,
-    }
-  }
+  ref={[Function]}
   style={
     {
       "borderWidth": 0.75,
@@ -2527,11 +2047,7 @@ exports[`<html.*> viewport width lengths are scaled according to viewport width:
   }
 >
   <Text
-    ref={
-      {
-        "current": null,
-      }
-    }
+    ref={[Function]}
     style={
       {
         "boxSizing": "content-box",
@@ -2544,11 +2060,7 @@ exports[`<html.*> viewport width lengths are scaled according to viewport width:
     Scaled content
   </Text>
   <Text
-    ref={
-      {
-        "current": null,
-      }
-    }
+    ref={[Function]}
     style={
       {
         "boxSizing": "content-box",
diff --git a/packages/react-strict-dom/tests/html-test.native.js b/packages/react-strict-dom/tests/html-test.native.js
index 775e2a75..b2d1cad8 100644
--- a/packages/react-strict-dom/tests/html-test.native.js
+++ b/packages/react-strict-dom/tests/html-test.native.js
@@ -1563,6 +1563,20 @@ describe('<html.*>', () => {
     });
     */
 
+    // We shouldn't create a handle if there is no underlying node
+    test('node is null', () => {
+      act(() => {
+        create(
+          <html.input
+            ref={(node) => {
+              expect(() => node.getBoundingClientRect()).toThrow();
+            }}
+          />,
+          { createNodeMock: () => null }
+        );
+      });
+    });
+
     [
       'animate',
       'click',

From 5ca6cc5cd630591e1e252c2a9f87d743deb311fc Mon Sep 17 00:00:00 2001
From: Christian Bach <christian.bach@carnegie.se>
Date: Sat, 9 Aug 2025 10:54:44 +0200
Subject: [PATCH 24/24] Native support for css.types

---
 apps/examples/src/components/App.js           |  4 +-
 apps/examples/src/components/tokens.stylex.js |  5 +-
 .../react-strict-dom/src/native/css/index.js  | 76 +++++++++++++++-
 .../css-test.native.js.snap-native            | 72 +++++++++++++++
 .../react-strict-dom/tests/css-test.native.js | 89 +++++++++++++++++++
 5 files changed, 241 insertions(+), 5 deletions(-)

diff --git a/apps/examples/src/components/App.js b/apps/examples/src/components/App.js
index 1801e4a7..fd085a5e 100644
--- a/apps/examples/src/components/App.js
+++ b/apps/examples/src/components/App.js
@@ -665,14 +665,14 @@ const animateSequence = css.keyframes({
 });
 
 const themedTokens = css.createTheme(tokens, {
-  squareColor: 'purple',
+  squareColor: css.types.color('purple'),
   textColor: 'purple',
   inputColor: 'purple',
   inputPlaceholderColor: 'mediumpurple'
 });
 
 const themedTokensAlt = css.createTheme(tokens, {
-  squareColor: 'darkorange',
+  squareColor: css.types.color('darkorange'),
   textColor: 'darkorange',
   inputColor: 'orangered',
   inputPlaceholderColor: 'orange'
diff --git a/apps/examples/src/components/tokens.stylex.js b/apps/examples/src/components/tokens.stylex.js
index 3e5d7820..dfe353f9 100644
--- a/apps/examples/src/components/tokens.stylex.js
+++ b/apps/examples/src/components/tokens.stylex.js
@@ -8,18 +8,19 @@
  */
 
 import type { StyleVars } from 'react-strict-dom';
+import type { Types } from '@stylexjs/stylex';
 
 import { css } from 'react-strict-dom';
 
 export const tokens: StyleVars<
   $ReadOnly<{
-    squareColor: string,
+    squareColor: Types.CSSType<string>,
     textColor: string,
     inputColor: string,
     inputPlaceholderColor: string
   }>
 > = css.defineVars({
-  squareColor: 'red',
+  squareColor: css.types.color('red'),
   textColor: {
     default: 'darkred',
     '@media (prefers-color-scheme: dark)': 'lightred'
diff --git a/packages/react-strict-dom/src/native/css/index.js b/packages/react-strict-dom/src/native/css/index.js
index e6324b1c..3895c0e1 100644
--- a/packages/react-strict-dom/src/native/css/index.js
+++ b/packages/react-strict-dom/src/native/css/index.js
@@ -6,7 +6,6 @@
  *
  * @flow strict
  */
-
 import type { ReactNativeProps } from '../../types/renderer.native';
 import type { ReactNativeStyle } from '../../types/renderer.native';
 import type { CustomProperties } from '../../types/styles';
@@ -512,3 +511,78 @@ export function props(
 
   return nativeProps;
 }
+
+type ValueWithDefault<+T> =
+  | T
+  | $ReadOnly<{
+      default: ValueWithDefault<T>,
+      [string]: ValueWithDefault<T>
+    }>;
+
+export const types = {
+  angle: <T: string | 0 = string | 0>(
+    value: ValueWithDefault<T>
+  ): ValueWithDefault<T> => {
+    return value;
+  },
+  color: <T: string = string>(
+    value: ValueWithDefault<T>
+  ): ValueWithDefault<T> => {
+    return value;
+  },
+  image: <T: string = string>(
+    value: ValueWithDefault<T>
+  ): ValueWithDefault<T> => {
+    return value;
+  },
+  integer: <T: number | string = number | string>(
+    value: ValueWithDefault<T>
+  ): ValueWithDefault<T> => {
+    return value;
+  },
+  length: <T: number | string = number | string>(
+    value: ValueWithDefault<T>
+  ): ValueWithDefault<T> => {
+    return value;
+  },
+  lengthPercentage: <T: number | string = number | string>(
+    value: ValueWithDefault<T>
+  ): ValueWithDefault<T> => {
+    return value;
+  },
+  number: <T: number | string = number | string>(
+    value: ValueWithDefault<T>
+  ): ValueWithDefault<T> => {
+    return value;
+  },
+  percentage: <T: number | string = number | string>(
+    value: ValueWithDefault<T>
+  ): ValueWithDefault<T> => {
+    return value;
+  },
+  resolution: <T: string = string>(
+    value: ValueWithDefault<T>
+  ): ValueWithDefault<T> => {
+    return value;
+  },
+  time: <T: string | 0 = string | 0>(
+    value: ValueWithDefault<T>
+  ): ValueWithDefault<T> => {
+    return value;
+  },
+  transformFunction: <T: string = string>(
+    value: ValueWithDefault<T>
+  ): ValueWithDefault<T> => {
+    return value;
+  },
+  transformList: <T: string = string>(
+    value: ValueWithDefault<T>
+  ): ValueWithDefault<T> => {
+    return value;
+  },
+  url: <T: string = string>(
+    value: ValueWithDefault<T>
+  ): ValueWithDefault<T> => {
+    return value;
+  }
+};
diff --git a/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap-native b/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap-native
index 1e18e109..e936d759 100644
--- a/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap-native
+++ b/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap-native
@@ -1,5 +1,77 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`css.types.* types.angle: tokens 1`] = `
+{
+  "angle": "var(--angle__id__6)",
+}
+`;
+
+exports[`css.types.* types.color: tokens 1`] = `
+{
+  "color": "var(--color__id__7)",
+}
+`;
+
+exports[`css.types.* types.image: tokens 1`] = `
+{
+  "image": "var(--image__id__8)",
+}
+`;
+
+exports[`css.types.* types.integer: tokens 1`] = `
+{
+  "integer": "var(--integer__id__9)",
+}
+`;
+
+exports[`css.types.* types.length: tokens 1`] = `
+{
+  "length": "var(--length__id__10)",
+}
+`;
+
+exports[`css.types.* types.lengthPercentage: tokens 1`] = `
+{
+  "lengthPercentage": "var(--lengthPercentage__id__11)",
+}
+`;
+
+exports[`css.types.* types.number: tokens 1`] = `
+{
+  "number": "var(--number__id__12)",
+}
+`;
+
+exports[`css.types.* types.percentage: tokens 1`] = `
+{
+  "percentage": "var(--percentage__id__13)",
+}
+`;
+
+exports[`css.types.* types.resolution: tokens 1`] = `
+{
+  "resolution": "var(--resolution__id__14)",
+}
+`;
+
+exports[`css.types.* types.time: tokens 1`] = `
+{
+  "time": "var(--time__id__15)",
+}
+`;
+
+exports[`css.types.* types.transformFunction: tokens 1`] = `
+{
+  "transformFunction": "var(--transformFunction__id__16)",
+}
+`;
+
+exports[`css.types.* types.url: tokens 1`] = `
+{
+  "url": "var(--url__id__17)",
+}
+`;
+
 exports[`properties: custom property css.createTheme: css.__customProperties 1`] = `
 {
   "rootColor__id__1": "red",
diff --git a/packages/react-strict-dom/tests/css-test.native.js b/packages/react-strict-dom/tests/css-test.native.js
index e1b52a48..2acbe74c 100644
--- a/packages/react-strict-dom/tests/css-test.native.js
+++ b/packages/react-strict-dom/tests/css-test.native.js
@@ -1841,3 +1841,92 @@ describe('queries: @media', () => {
     expect(props.style.color).toBe('white');
   });
 });
+
+describe('css.types.*', () => {
+  test('types.angle', () => {
+    const tokens = css.defineVars({
+      angle: css.types.angle('40deg')
+    });
+    expect(tokens).toMatchSnapshot('tokens');
+  });
+
+  test('types.color', () => {
+    const tokens = css.defineVars({
+      color: css.types.color({
+        default: 'blue',
+        '@media (prefers-color-scheme: dark)': 'lightblue'
+      })
+    });
+    expect(tokens).toMatchSnapshot('tokens');
+  });
+
+  test('types.image', () => {
+    const tokens = css.defineVars({
+      image: css.types.image('./jpg')
+    });
+    expect(tokens).toMatchSnapshot('tokens');
+  });
+
+  test('types.integer', () => {
+    const tokens = css.defineVars({
+      integer: css.types.integer(4)
+    });
+    expect(tokens).toMatchSnapshot('tokens');
+  });
+
+  test('types.length', () => {
+    const tokens = css.defineVars({
+      length: css.types.length('4px')
+    });
+    expect(tokens).toMatchSnapshot('tokens');
+  });
+
+  test('types.lengthPercentage', () => {
+    const tokens = css.defineVars({
+      lengthPercentage: css.types.lengthPercentage('100%')
+    });
+    expect(tokens).toMatchSnapshot('tokens');
+  });
+
+  test('types.number', () => {
+    const tokens = css.defineVars({
+      number: css.types.number(4.4)
+    });
+    expect(tokens).toMatchSnapshot('tokens');
+  });
+
+  test('types.percentage', () => {
+    const tokens = css.defineVars({
+      percentage: css.types.percentage('100%')
+    });
+    expect(tokens).toMatchSnapshot('tokens');
+  });
+
+  test('types.resolution', () => {
+    const tokens = css.defineVars({
+      resolution: css.types.resolution('96dpi')
+    });
+    expect(tokens).toMatchSnapshot('tokens');
+  });
+
+  test('types.time', () => {
+    const tokens = css.defineVars({
+      time: css.types.time('1s')
+    });
+    expect(tokens).toMatchSnapshot('tokens');
+  });
+
+  test('types.transformFunction', () => {
+    const tokens = css.defineVars({
+      transformFunction: css.types.transformFunction('translateX(10px)')
+    });
+    expect(tokens).toMatchSnapshot('tokens');
+  });
+
+  test('types.url', () => {
+    const tokens = css.defineVars({
+      url: css.types.url('https://foobar.com')
+    });
+    expect(tokens).toMatchSnapshot('tokens');
+  });
+});
