"experimental_layoutConformance" ViewProp -> "experimental_LayoutConformance" component #48188

NickGerleman · 2024-12-09T19:45:47Z

Summary:
Yoga is full of bugs! Some of these bugs cannot be fixed without breaking large swaths of product code. To get around this, we introduced "errata" to Yoga as a mechanism to preserve bug compatibility, and an experimental_layoutConformance prop in React Native to create layout conformance contexts. This has allowed us to create more compliant layout behavior for XPR.

This prop was originally designed as a context-like component, so you could set a conformance level at the root of your app, and individual components could change it for compatibility. This was difficult to achieve at the time, without introducing a primitive like LayoutConformanceView, which itself participated in the view tree. This prop has not been the desired end-goal, since it does not make clear that it is setting a whole new context, effecting children as well!

Now that we've landed support for display: contents, we can achieve this desired API pretty easily.

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>

Changelog: [Internal]

Differential Revision: D66910054

facebook-github-bot · 2024-12-09T19:46:11Z

This pull request was exported from Phabricator. Differential Revision: D66910054

facebook-github-bot · 2024-12-09T20:18:11Z

This pull request was exported from Phabricator. Differential Revision: D66910054

…ormance" component (facebook#48188) Summary: Pull Request resolved: facebook#48188 Yoga is full of bugs! Some of these bugs cannot be fixed without breaking large swaths of product code. To get around this, we introduced "errata" to Yoga as a mechanism to preserve bug compatibility, and an `experimental_layoutConformance` prop in React Native to create layout conformance contexts. This has allowed us to create more compliant layout behavior for XPR. This prop was originally designed as a context-like component, so you could set a conformance level at the root of your app, and individual components could change it for compatibility. This was difficult to achieve at the time, without introducing a primitive like `LayoutConformanceView`, which itself participated in the view tree. This prop has not been the desired end-goal, since it does not make clear that it is setting a whole new context, effecting children as well! Now that we've landed support for `display: contents`, we can achieve this desired API pretty easily. **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> ``` Changelog: [Internal] Differential Revision: D66910054

facebook-github-bot · 2024-12-09T22:04:36Z

This pull request was exported from Phabricator. Differential Revision: D66910054

…ormance" component (facebook#48188) Summary: Pull Request resolved: facebook#48188 Yoga is full of bugs! Some of these bugs cannot be fixed without breaking large swaths of product code. To get around this, we introduced "errata" to Yoga as a mechanism to preserve bug compatibility, and an `experimental_layoutConformance` prop in React Native to create layout conformance contexts. This has allowed us to create more compliant layout behavior for XPR. This prop was originally designed as a context-like component, so you could set a conformance level at the root of your app, and individual components could change it for compatibility. This was difficult to achieve at the time, without introducing a primitive like `LayoutConformanceView`, which itself participated in the view tree. This prop has not been the desired end-goal, since it does not make clear that it is setting a whole new context, effecting children as well! Now that we've landed support for `display: contents`, we can achieve this desired API pretty easily. **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> ``` Changelog: [Internal] Differential Revision: D66910054

facebook-github-bot · 2024-12-09T22:28:29Z

This pull request was exported from Phabricator. Differential Revision: D66910054

…ormance" component (facebook#48188) Summary: Pull Request resolved: facebook#48188 Yoga is full of bugs! Some of these bugs cannot be fixed without breaking large swaths of product code. To get around this, we introduced "errata" to Yoga as a mechanism to preserve bug compatibility, and an `experimental_layoutConformance` prop in React Native to create layout conformance contexts. This has allowed us to create more compliant layout behavior for XPR. This prop was originally designed as a context-like component, so you could set a conformance level at the root of your app, and individual components could change it for compatibility. This was difficult to achieve at the time, without introducing a primitive like `LayoutConformanceView`, which itself participated in the view tree. This prop has not been the desired end-goal, since it does not make clear that it is setting a whole new context, effecting children as well! Now that we've landed support for `display: contents`, we can achieve this desired API pretty easily. **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> ``` Changelog: [Internal] Differential Revision: D66910054

facebook-github-bot · 2024-12-09T22:43:35Z

This pull request was exported from Phabricator. Differential Revision: D66910054

…ormance" component (facebook#48188) Summary: Pull Request resolved: facebook#48188 Yoga is full of bugs! Some of these bugs cannot be fixed without breaking large swaths of product code. To get around this, we introduced "errata" to Yoga as a mechanism to preserve bug compatibility, and an `experimental_layoutConformance` prop in React Native to create layout conformance contexts. This has allowed us to create more compliant layout behavior for XPR. This prop was originally designed as a context-like component, so you could set a conformance level at the root of your app, and individual components could change it for compatibility. This was difficult to achieve at the time, without introducing a primitive like `LayoutConformanceView`, which itself participated in the view tree. This prop has not been the desired end-goal, since it does not make clear that it is setting a whole new context, effecting children as well! Now that we've landed support for `display: contents`, we can achieve this desired API pretty easily. **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> ``` Changelog: [Internal] Differential Revision: D66910054

facebook-github-bot · 2024-12-09T23:23:13Z

This pull request was exported from Phabricator. Differential Revision: D66910054

…ormance" component (facebook#48188) Summary: Pull Request resolved: facebook#48188 Yoga is full of bugs! Some of these bugs cannot be fixed without breaking large swaths of product code. To get around this, we introduced "errata" to Yoga as a mechanism to preserve bug compatibility, and an `experimental_layoutConformance` prop in React Native to create layout conformance contexts. This has allowed us to create more compliant layout behavior for XPR. This prop was originally designed as a context-like component, so you could set a conformance level at the root of your app, and individual components could change it for compatibility. This was difficult to achieve at the time, without introducing a primitive like `LayoutConformanceView`, which itself participated in the view tree. This prop has not been the desired end-goal, since it does not make clear that it is setting a whole new context, effecting children as well! Now that we've landed support for `display: contents`, we can achieve this desired API pretty easily. **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> ``` Changelog: [Internal] Differential Revision: D66910054

facebook-github-bot · 2024-12-09T23:36:44Z

This pull request was exported from Phabricator. Differential Revision: D66910054

…ormance" component (facebook#48188) Summary: Pull Request resolved: facebook#48188 Yoga is full of bugs! Some of these bugs cannot be fixed without breaking large swaths of product code. To get around this, we introduced "errata" to Yoga as a mechanism to preserve bug compatibility, and an `experimental_layoutConformance` prop in React Native to create layout conformance contexts. This has allowed us to create more compliant layout behavior for XPR. This prop was originally designed as a context-like component, so you could set a conformance level at the root of your app, and individual components could change it for compatibility. This was difficult to achieve at the time, without introducing a primitive like `LayoutConformanceView`, which itself participated in the view tree. This prop has not been the desired end-goal, since it does not make clear that it is setting a whole new context, effecting children as well! Now that we've landed support for `display: contents`, we can achieve this desired API pretty easily. **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> ``` Changelog: [Internal] Differential Revision: D66910054

facebook-github-bot · 2024-12-10T00:16:36Z

This pull request was exported from Phabricator. Differential Revision: D66910054

…ormance" component (facebook#48188) Summary: Pull Request resolved: facebook#48188 Yoga is full of bugs! Some of these bugs cannot be fixed without breaking large swaths of product code. To get around this, we introduced "errata" to Yoga as a mechanism to preserve bug compatibility, and an `experimental_layoutConformance` prop in React Native to create layout conformance contexts. This has allowed us to create more compliant layout behavior for XPR. This prop was originally designed as a context-like component, so you could set a conformance level at the root of your app, and individual components could change it for compatibility. This was difficult to achieve at the time, without introducing a primitive like `LayoutConformanceView`, which itself participated in the view tree. This prop has not been the desired end-goal, since it does not make clear that it is setting a whole new context, effecting children as well! Now that we've landed support for `display: contents`, we can achieve this desired API pretty easily. **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> ``` Changelog: [Internal] Differential Revision: D66910054

facebook-github-bot · 2024-12-10T05:27:07Z

This pull request was exported from Phabricator. Differential Revision: D66910054

…ormance" component (facebook#48188) Summary: Pull Request resolved: facebook#48188 Yoga is full of bugs! Some of these bugs cannot be fixed without breaking large swaths of product code. To get around this, we introduced "errata" to Yoga as a mechanism to preserve bug compatibility, and an `experimental_layoutConformance` prop in React Native to create layout conformance contexts. This has allowed us to create more compliant layout behavior for XPR. This prop was originally designed as a context-like component, so you could set a conformance level at the root of your app, and individual components could change it for compatibility. This was difficult to achieve at the time, without introducing a primitive like `LayoutConformanceView`, which itself participated in the view tree. This prop has not been the desired end-goal, since it does not make clear that it is setting a whole new context, effecting children as well! Now that we've landed support for `display: contents`, we can achieve this desired API pretty easily. **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> ``` Changelog: [Internal] Differential Revision: D66910054

facebook-github-bot · 2024-12-10T06:11:52Z

This pull request was exported from Phabricator. Differential Revision: D66910054

…ormance" component (facebook#48188) Summary: Pull Request resolved: facebook#48188 Yoga is full of bugs! Some of these bugs cannot be fixed without breaking large swaths of product code. To get around this, we introduced "errata" to Yoga as a mechanism to preserve bug compatibility, and an `experimental_layoutConformance` prop in React Native to create layout conformance contexts. This has allowed us to create more compliant layout behavior for XPR. This prop was originally designed as a context-like component, so you could set a conformance level at the root of your app, and individual components could change it for compatibility. This was difficult to achieve at the time, without introducing a primitive like `LayoutConformanceView`, which itself participated in the view tree. This prop has not been the desired end-goal, since it does not make clear that it is setting a whole new context, effecting children as well! Now that we've landed support for `display: contents`, we can achieve this desired API pretty easily. **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> ``` Changelog: [Internal] Differential Revision: D66910054

facebook-github-bot · 2024-12-10T07:12:45Z

This pull request was exported from Phabricator. Differential Revision: D66910054

…ormance" component (facebook#48188) Summary: Pull Request resolved: facebook#48188 Yoga is full of bugs! Some of these bugs cannot be fixed without breaking large swaths of product code. To get around this, we introduced "errata" to Yoga as a mechanism to preserve bug compatibility, and an `experimental_layoutConformance` prop in React Native to create layout conformance contexts. This has allowed us to create more compliant layout behavior for XPR. This prop was originally designed as a context-like component, so you could set a conformance level at the root of your app, and individual components could change it for compatibility. This was difficult to achieve at the time, without introducing a primitive like `LayoutConformanceView`, which itself participated in the view tree. This prop has not been the desired end-goal, since it does not make clear that it is setting a whole new context, effecting children as well! Now that we've landed support for `display: contents`, we can achieve this desired API pretty easily. **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> ``` Changelog: [Internal] Differential Revision: D66910054

facebook-github-bot · 2024-12-10T07:19:24Z

This pull request was exported from Phabricator. Differential Revision: D66910054

…ormance" component (facebook#48188) Summary: Pull Request resolved: facebook#48188 Yoga is full of bugs! Some of these bugs cannot be fixed without breaking large swaths of product code. To get around this, we introduced "errata" to Yoga as a mechanism to preserve bug compatibility, and an `experimental_layoutConformance` prop in React Native to create layout conformance contexts. This has allowed us to create more compliant layout behavior for XPR. This prop was originally designed as a context-like component, so you could set a conformance level at the root of your app, and individual components could change it for compatibility. This was difficult to achieve at the time, without introducing a primitive like `LayoutConformanceView`, which itself participated in the view tree. This prop has not been the desired end-goal, since it does not make clear that it is setting a whole new context, effecting children as well! Now that we've landed support for `display: contents`, we can achieve this desired API pretty easily. **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> ``` Changelog: [Internal] Differential Revision: D66910054

facebook-github-bot · 2024-12-10T07:58:12Z

This pull request was exported from Phabricator. Differential Revision: D66910054

…ormance" component (facebook#48188) Summary: Pull Request resolved: facebook#48188 Yoga is full of bugs! Some of these bugs cannot be fixed without breaking large swaths of product code. To get around this, we introduced "errata" to Yoga as a mechanism to preserve bug compatibility, and an `experimental_layoutConformance` prop in React Native to create layout conformance contexts. This has allowed us to create more compliant layout behavior for XPR. This prop was originally designed as a context-like component, so you could set a conformance level at the root of your app, and individual components could change it for compatibility. This was difficult to achieve at the time, without introducing a primitive like `LayoutConformanceView`, which itself participated in the view tree. This prop has not been the desired end-goal, since it does not make clear that it is setting a whole new context, effecting children as well! Now that we've landed support for `display: contents`, we can achieve this desired API pretty easily. **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> ``` Changelog: [Internal] Differential Revision: D66910054

facebook-github-bot · 2024-12-10T08:18:31Z

This pull request was exported from Phabricator. Differential Revision: D66910054

…ormance" component (facebook#48188) Summary: Pull Request resolved: facebook#48188 Yoga is full of bugs! Some of these bugs cannot be fixed without breaking large swaths of product code. To get around this, we introduced "errata" to Yoga as a mechanism to preserve bug compatibility, and an `experimental_layoutConformance` prop in React Native to create layout conformance contexts. This has allowed us to create more compliant layout behavior for XPR. This prop was originally designed as a context-like component, so you could set a conformance level at the root of your app, and individual components could change it for compatibility. This was difficult to achieve at the time, without introducing a primitive like `LayoutConformanceView`, which itself participated in the view tree. This prop has not been the desired end-goal, since it does not make clear that it is setting a whole new context, effecting children as well! Now that we've landed support for `display: contents`, we can achieve this desired API pretty easily. **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> ``` Changelog: [Internal] Differential Revision: D66910054

…ormance" component (facebook#48188) Summary: Pull Request resolved: facebook#48188 Yoga is full of bugs! Some of these bugs cannot be fixed without breaking large swaths of product code. To get around this, we introduced "errata" to Yoga as a mechanism to preserve bug compatibility, and an `experimental_layoutConformance` prop in React Native to create layout conformance contexts. This has allowed us to create more compliant layout behavior for XPR. This prop was originally designed as a context-like component, so you could set a conformance level at the root of your app, and individual components could change it for compatibility. This was difficult to achieve at the time, without introducing a primitive like `LayoutConformanceView`, which itself participated in the view tree. This prop has not been the desired end-goal, since it does not make clear that it is setting a whole new context, effecting children as well! Now that we've landed support for `display: contents`, we can achieve this desired API pretty easily. **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> ``` Changelog: [Internal] Reviewed By: javache Differential Revision: D66910054

facebook-github-bot · 2024-12-12T17:48:29Z

This pull request was exported from Phabricator. Differential Revision: D66910054

facebook-github-bot · 2024-12-12T23:01:12Z

This pull request has been merged in 06751aa.

react-native-bot · 2024-12-12T23:01:14Z

This pull request was successfully merged by @NickGerleman in 06751aa

^{When will my fix make it into a release? | How to file a pick request?}

Summary: Fixes iOS LayoutConformanceView not work, seems caused by #48188. NickGerleman can you help to review please? ## Changelog: [IOS] [FIXED] - Fabric: Fixes LayoutConformanceView not work Pull Request resolved: #48253 Test Plan: Before: ![image](https://github.com/user-attachments/assets/ca1f12c1-825b-4167-849d-b88f8ec54e21) After: ![image](https://github.com/user-attachments/assets/c81b3192-8552-4147-b3af-3a8920a91d6c) Reviewed By: NickGerleman, cipolleschi Differential Revision: D67195461 Pulled By: javache fbshipit-source-id: 2f45d9a9aa2389ba7cb89e601e7225dbef4f7abf

facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. p: Facebook Partner: Facebook Partner labels Dec 9, 2024

facebook-github-bot added the fb-exported label Dec 9, 2024

NickGerleman force-pushed the export-D66910054 branch from f929a86 to 6ec8578 Compare December 9, 2024 20:18

NickGerleman force-pushed the export-D66910054 branch from 6ec8578 to e3761e0 Compare December 9, 2024 22:05

NickGerleman force-pushed the export-D66910054 branch from e3761e0 to 25066a2 Compare December 9, 2024 22:28

NickGerleman force-pushed the export-D66910054 branch from 25066a2 to cf69b2f Compare December 9, 2024 22:43

NickGerleman force-pushed the export-D66910054 branch from cf69b2f to d19b354 Compare December 9, 2024 23:23

NickGerleman force-pushed the export-D66910054 branch from d19b354 to 185a72d Compare December 9, 2024 23:37

NickGerleman force-pushed the export-D66910054 branch from 185a72d to 04b8386 Compare December 10, 2024 00:16

NickGerleman mentioned this pull request Dec 10, 2024

[RN 0.78] Changes to experimental_layoutConformance facebook/react-strict-dom#245

Closed

NickGerleman force-pushed the export-D66910054 branch from 04b8386 to eaa2aa0 Compare December 10, 2024 05:27

NickGerleman force-pushed the export-D66910054 branch from f19330c to 3be772e Compare December 10, 2024 05:57

NickGerleman force-pushed the export-D66910054 branch from 3be772e to 4a79ce2 Compare December 10, 2024 06:12

NickGerleman force-pushed the export-D66910054 branch from 4a79ce2 to d3ac2de Compare December 10, 2024 07:12

NickGerleman force-pushed the export-D66910054 branch 2 times, most recently from b9fe549 to 3c98563 Compare December 10, 2024 07:41

NickGerleman force-pushed the export-D66910054 branch from 3c98563 to f814e3b Compare December 10, 2024 07:58

NickGerleman force-pushed the export-D66910054 branch from f814e3b to ced0c7d Compare December 10, 2024 08:18

NickGerleman force-pushed the export-D66910054 branch from ced0c7d to 542ca4d Compare December 12, 2024 17:48

facebook-github-bot closed this in 06751aa Dec 12, 2024

facebook-github-bot added the Merged This PR has been merged. label Dec 12, 2024

zhongwuzw mentioned this pull request Dec 13, 2024

[iOS] Fabric: Fixes LayoutConformanceView not work #48253

Closed

joevilches mentioned this pull request Jan 3, 2025

After setting padding for the parent element, the absolute positioning of the child element is inaccurate #43206

Closed

"experimental_layoutConformance" ViewProp -> "experimental_LayoutConformance" component #48188

"experimental_layoutConformance" ViewProp -> "experimental_LayoutConformance" component #48188

Uh oh!

Conversation

NickGerleman commented Dec 9, 2024

Uh oh!

facebook-github-bot commented Dec 9, 2024

Uh oh!

facebook-github-bot commented Dec 9, 2024

Uh oh!

facebook-github-bot commented Dec 9, 2024

Uh oh!

facebook-github-bot commented Dec 9, 2024

Uh oh!

facebook-github-bot commented Dec 9, 2024

Uh oh!

facebook-github-bot commented Dec 9, 2024

Uh oh!

facebook-github-bot commented Dec 9, 2024

Uh oh!

facebook-github-bot commented Dec 10, 2024

Uh oh!

facebook-github-bot commented Dec 10, 2024

Uh oh!

facebook-github-bot commented Dec 10, 2024

Uh oh!

facebook-github-bot commented Dec 10, 2024

Uh oh!

facebook-github-bot commented Dec 10, 2024

Uh oh!

facebook-github-bot commented Dec 10, 2024

Uh oh!

facebook-github-bot commented Dec 10, 2024

Uh oh!

facebook-github-bot commented Dec 12, 2024

Uh oh!

facebook-github-bot commented Dec 12, 2024

Uh oh!

react-native-bot commented Dec 12, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants