-
Notifications
You must be signed in to change notification settings - Fork 24.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
"experimental_layoutConformance" ViewProp -> "experimental_LayoutConf…
…ormance" component (#48188) Summary: Pull Request resolved: #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 fbshipit-source-id: e6a304b5c30ad3c5845a7ce2d1021996a74c2f34
- Loading branch information
1 parent
4adaacb
commit 06751aa
Showing
28 changed files
with
361 additions
and
134 deletions.
There are no files selected for viewing
21 changes: 21 additions & 0 deletions
21
packages/react-native/Libraries/Components/LayoutConformance/LayoutConformance.d.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| /** | ||
| * 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. | ||
| * | ||
| * @format | ||
| */ | ||
|
|
||
| import type * as React from 'react'; | ||
|
|
||
| type LayoutConformanceProps = { | ||
| /** | ||
| * strict: Layout in accordance with W3C spec, even when breaking | ||
| * compatibility: Layout with the same behavior as previous versions of React Native | ||
| */ | ||
| mode: 'strict' | 'compatibility'; | ||
| children: React.ReactNode; | ||
| }; | ||
|
|
||
| export const experimental_LayoutConformance: React.ComponentType<LayoutConformanceProps>; |
59 changes: 59 additions & 0 deletions
59
packages/react-native/Libraries/Components/LayoutConformance/LayoutConformance.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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-local | ||
| * @format | ||
| * @oncall react_native | ||
| */ | ||
|
|
||
| import StyleSheet from '../../StyleSheet/StyleSheet'; | ||
| import LayoutConformanceNativeComponent from './LayoutConformanceNativeComponent'; | ||
| import * as React from 'react'; | ||
|
|
||
| type Props = $ReadOnly<{ | ||
| /** | ||
| * strict: Layout in accordance with W3C spec, even when breaking | ||
| * compatibility: Layout with the same behavior as previous versions of React Native | ||
| */ | ||
| mode: 'strict' | 'compatibility', | ||
|
|
||
| children: React.Node, | ||
| }>; | ||
|
|
||
| // We want a graceful fallback for apps using legacy arch, but need to know | ||
| // ahead of time whether the component is available, so we test for global. | ||
| // This does not correctly handle mixed arch apps (which is okay, since we just | ||
| // degrade the error experience). | ||
| const isFabricUIManagerInstalled = global?.nativeFabricUIManager != null; | ||
|
|
||
| function LayoutConformance(props: Props): React.Node { | ||
| return ( | ||
| <LayoutConformanceNativeComponent {...props} style={styles.container} /> | ||
| ); | ||
| } | ||
|
|
||
| function UnimplementedLayoutConformance(props: Props): React.Node { | ||
| if (__DEV__) { | ||
| const warnOnce = require('../../Utilities/warnOnce'); | ||
|
|
||
| warnOnce( | ||
| 'layoutconformance-unsupported', | ||
| '"LayoutConformance" is only supported in the New Architecture', | ||
| ); | ||
| } | ||
|
|
||
| return props.children; | ||
| } | ||
|
|
||
| export default (isFabricUIManagerInstalled | ||
| ? LayoutConformance | ||
| : UnimplementedLayoutConformance) as component(...Props); | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| container: { | ||
| display: 'contents', | ||
| }, | ||
| }); |
29 changes: 29 additions & 0 deletions
29
...s/react-native/Libraries/Components/LayoutConformance/LayoutConformanceNativeComponent.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| /** | ||
| * 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 | ||
| * @format | ||
| */ | ||
|
|
||
| import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes'; | ||
| import type {ViewProps} from '../View/ViewPropTypes'; | ||
|
|
||
| import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry'; | ||
|
|
||
| type Props = $ReadOnly<{ | ||
| mode: 'strict' | 'compatibility', | ||
| ...ViewProps, | ||
| }>; | ||
|
|
||
| const LayoutConformanceNativeComponent: HostComponent<Props> = | ||
| NativeComponentRegistry.get<Props>('LayoutConformance', () => ({ | ||
| uiViewClassName: 'LayoutConformance', | ||
| validAttributes: { | ||
| mode: true, | ||
| }, | ||
| })); | ||
|
|
||
| export default LayoutConformanceNativeComponent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
18 changes: 18 additions & 0 deletions
18
...-native/ReactCommon/react/renderer/components/view/LayoutConformanceComponentDescriptor.h
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| /* | ||
| * 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. | ||
| */ | ||
|
|
||
| #pragma once | ||
|
|
||
| #include <react/renderer/components/view/LayoutConformanceShadowNode.h> | ||
| #include <react/renderer/core/ConcreteComponentDescriptor.h> | ||
|
|
||
| namespace facebook::react { | ||
|
|
||
| using LayoutConformanceComponentDescriptor = | ||
| ConcreteComponentDescriptor<LayoutConformanceShadowNode>; | ||
|
|
||
| } // namespace facebook::react |
36 changes: 36 additions & 0 deletions
36
packages/react-native/ReactCommon/react/renderer/components/view/LayoutConformanceProps.h
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| /* | ||
| * 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. | ||
| */ | ||
|
|
||
| #pragma once | ||
|
|
||
| #include <react/renderer/components/view/YogaStylableProps.h> | ||
| #include <react/renderer/components/view/propsConversions.h> | ||
|
|
||
| namespace facebook::react { | ||
|
|
||
| struct LayoutConformanceProps final : public YogaStylableProps { | ||
| /** | ||
| * Whether to layout the subtree with strict conformance to W3C standard | ||
| * (YGErrataNone) or for compatibility with legacy RN bugs (YGErrataAll) | ||
| */ | ||
| LayoutConformance mode{LayoutConformance::Strict}; | ||
|
|
||
| LayoutConformanceProps() = default; | ||
| LayoutConformanceProps( | ||
| const PropsParserContext& context, | ||
| const LayoutConformanceProps& sourceProps, | ||
| const RawProps& rawProps) | ||
| : YogaStylableProps(context, sourceProps, rawProps), | ||
| mode{convertRawProp( | ||
| context, | ||
| rawProps, | ||
| "mode", | ||
| mode, | ||
| LayoutConformance::Strict)} {} | ||
| }; | ||
|
|
||
| } // namespace facebook::react |
24 changes: 24 additions & 0 deletions
24
...ges/react-native/ReactCommon/react/renderer/components/view/LayoutConformanceShadowNode.h
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| /* | ||
| * 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. | ||
| */ | ||
|
|
||
| #pragma once | ||
|
|
||
| #include <react/renderer/components/view/ConcreteViewShadowNode.h> | ||
| #include <react/renderer/components/view/LayoutConformanceProps.h> | ||
| #include <react/renderer/components/view/YogaLayoutableShadowNode.h> | ||
|
|
||
| namespace facebook::react { | ||
|
|
||
| constexpr const char LayoutConformanceShadowNodeComponentName[] = | ||
| "LayoutConformance"; | ||
|
|
||
| using LayoutConformanceShadowNode = ConcreteShadowNode< | ||
| LayoutConformanceShadowNodeComponentName, | ||
| YogaLayoutableShadowNode, | ||
| LayoutConformanceProps>; | ||
|
|
||
| } // namespace facebook::react |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.