[RN 0.78] Changes to experimental_layoutConformance

[NickGerleman]

PR: facebook/react-native#48188
Phabricator Diff (with more product context): https://www.internalfb.com/diff/D66910054

The gist

I am looking to replace React Native's context-setting experimental_layoutConformance View property with a new LayoutConformance context-like component, imported as experimental_LayoutConformance.

Impact to React Strict DOM

createStrictDOMComponent sets experimental_layoutConformance="strict" for every View component.

Introducing a new context-like component for every Strict DOM component would add overhead, and RSD setting contexts for mixed RN component trees underneath it is not super understandable. I think we should remove the usage from RSD, but encourage apps who want the behavior to add a LayoutConformance component to their root (we do this for Meta apps code-sharing aleady).

Context

React Native currently exposes a configurable "layout conformance" flag to let users pick which subtrees are laid out with preference to W3C/correct layout, as compared to buggy "compatibility mode". This helps us continue to ship new features and fixes to Yoga as we evolve the engine, delivering less surprises when code-sharing between RN and Web.

The original desired API for layout contexts was a StrictLayout context-like component, inspired by React.StrictMode. This was hard to do at the time, so we added a new (context-setting) property on View, experimental_layoutConformance="strict|classic".

With recent support or display: contents, we can achieve the original goal, of a context-like component, which introduces contexts into the ShadowTree, without creating a layout box.

Before

import {View} from 'react-native';

// Root of the app
<View {...props} experimental_layoutConformance="strict">
  {content}
</View>

After

import {View, experimental_LayoutConformance as LayoutConformance} from 'react-native';

// Root of the app
<LayoutConformance mode="strict">
  <View {...props}>
    {content}
  </View>
</LayoutConformance>

Meta Internal

React Technologies Workplace Thread

Diff (with extra context)

[necolas]

Ok no problem