Adopt 'experimental_LayoutConformance' from React Native

React Native removed the 'experimental_layoutConformance' prop from View
and introduced the 'experimental_LayoutConformance' component. This new
component is expected to wrap any tree that needs to opt into W3C
layout.

Use of the new component now requires explicit setting of a prop on
'html.*' elements - 'data-layoutconformance="strict"'. This is done to
avoid wrapping every `View` in a `LayoutConformance` component, since
that now alters the component tree rather than just adding a prop.
Adding a prop to RSD elements is also preferred because it avoids two
other problems: 1) Developers having to import from 'react-native' in a
file that might otherwise be expected to be cross-platform, 2) React
Native for Web having to add support for this export to avoid crashing
Expo apps (unless using file forks.)

The use of another special 'data-*' attribute avoids React DOM warnings
about unrecognized properties on web.

Fix #245

Author: necolas

apps/examples/src/components/App.js

@@ -145,7 +145,7 @@ function Shell(): React.MixedElement {
 
   return (
     <ScrollView>
-      <html.div style={egStyles.div}>
+      <html.div data-layoutconformance="strict" style={egStyles.div}>
         <ExampleBlock title="HTML elements">
           <html.div>Text inside div (kind of) works</html.div>
           <html.span>

apps/website/docs/learn/02-environment-setup.md

@@ -128,11 +128,23 @@ import './stylex.css';
 import '@expo/metro-runtime';
 
 import { registerRootComponent } from 'expo';
-import App from './App';
+import { App } from './App';
 
 registerRootComponent(App);
 ```
 
+To enable React Native support for layout that better conforms to W3C standards, you must set `data-layoutconformance="strict"` on the root `html.*` element of your app.
+
+```js title="App.js"
+export function App() {
+  return (
+    <html.div data-layoutconformance="strict">
+      {/* The rest of your app component */}
+    </html.div>
+  );
+}
+```
+
 ## Platform-specific files
 
 Expo supports [platform-specific extensions](https://docs.expo.dev/router/advanced/platform-specific-modules/#platform-specific-extensions) by default. This allows you to create platform-specific implementations of components, hooks, etc.

packages/benchmarks/perf/mocks/react-native.js

@@ -106,6 +106,8 @@ export const Text = 'Text';
 
 export const View = 'View';
 
+export const experimental_LayoutConformance = 'LayoutConformance';
+
 export const useColorScheme = () => 'light';
 
 export const useWindowDimensions = () => ({

packages/react-strict-dom/src/native/modules/createStrictDOMComponent.js

@@ -12,6 +12,7 @@ import type { StrictProps as StrictPropsOriginal } from '../../types/StrictProps
 
 import * as React from 'react';
 import { Animated, Pressable } from 'react-native';
+import { experimental_LayoutConformance as LayoutConformance } from 'react-native';
 import { ViewNativeComponent, TextAncestorContext } from '../react-native';
 
 import { ProvideCustomProperties } from './ContextCustomProperties';
@@ -150,11 +151,6 @@ export function createStrictDOMComponent<T, P: StrictProps>(
        * Construct tree
        */
 
-      if (NativeComponent === ViewNativeComponent) {
-        // enable W3C flexbox layout
-        nativeProps.experimental_layoutConformance = 'strict';
-      }
-
       let element: React.Node =
         typeof props.children === 'function' ? (
           props.children(nativeProps)
@@ -163,6 +159,11 @@ export function createStrictDOMComponent<T, P: StrictProps>(
           <NativeComponent {...nativeProps} />
         );
 
+      // Enable W3C layout support
+      if (props['data-layoutconformance'] === 'strict') {
+        element = <LayoutConformance children={element} mode="strict" />;
+      }
+
       if (
         (nativeProps.children != null &&
           typeof nativeProps.children !== 'string') ||

packages/react-strict-dom/src/shared/isPropAllowed.js

@@ -135,13 +135,14 @@ const strictAttributeSet: Set<string> = new Set([
   'srcSet', // img
   'step', // input
   'style',
-  'suppressHydrationWarning',
   'tabIndex',
   'target', // a
   'type', // button, input
   'value', // input
   'width', // img
 
+  'suppressHydrationWarning', // React
+
   'onMouseDown', // TEMPORARY
   'onMouseEnter', // TEMPORARY
   'onMouseLeave', // TEMPORARY

packages/react-strict-dom/src/types/StrictReactDOMProps.js

@@ -290,6 +290,7 @@ export type StrictReactDOMProps = $ReadOnly<{
   ),
   autoFocus?: ?boolean,
   children?: React.Node,
+  'data-layoutconformance'?: ?('classic' | 'strict'),
   'data-testid'?: ?string,
   dir?: ?('auto' | 'ltr' | 'rtl'),
   elementTiming?: ?string,

packages/react-strict-dom/src/types/renderer.native.js

@@ -61,7 +61,6 @@ type ReactNativeProps = {
   disabled?: ?boolean,
   editable?: TextInputProps['editable'],
   enterKeyHint?: TextInputProps['enterKeyHint'],
-  experimental_layoutConformance?: 'strict',
   focusable?: ?boolean,
   height?: ImageProps['height'],
   importantForAccessibility?: 'no-hide-descendants',

packages/react-strict-dom/tests/__mocks__/react-native/index.js

@@ -102,6 +102,8 @@ export const Text = 'Text';
 
 export const View = 'View';
 
+export const experimental_LayoutConformance = 'LayoutConformance';
+
 export const useColorScheme = jest.fn().mockReturnValue('light');
 
 export const useWindowDimensions = jest

packages/react-strict-dom/tests/__snapshots__/compat-test.native.js.snap-native

@@ -64,7 +64,6 @@ exports[`<compat.native> "as" equals "textarea": as=textarea 1`] = `
 exports[`<compat.native> "as" equals "view": as=view 1`] = `
 <View
   accessibilityLabel="label"
-  experimental_layoutConformance="strict"
   ref={[Function]}
   style={
     {
@@ -79,7 +78,6 @@ exports[`<compat.native> "as" equals "view": as=view 1`] = `
 exports[`<compat.native> default: default 1`] = `
 <Pressable
   accessibilityLabel="label"
-  experimental_layoutConformance="strict"
   ref={[Function]}
   style={
     {
@@ -94,7 +92,6 @@ exports[`<compat.native> default: default 1`] = `
 exports[`<compat.native> nested: nested 1`] = `
 <View
   accessibilityLabel="label"
-  experimental_layoutConformance="strict"
   ref={[Function]}
   style={
     {