forked from microsoft/react-native-macos
-
Notifications
You must be signed in to change notification settings - Fork 0
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 (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
- Loading branch information
1 parent
0b866aa
commit 04b8386
Showing
28 changed files
with
373 additions
and
121 deletions.
There are no files selected for viewing
30 changes: 30 additions & 0 deletions
30
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,30 @@ | ||
| /** | ||
| * 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'; | ||
| import {HostInstance} from '../../../types/public/ReactNativeTypes'; | ||
| import {Constructor} from '../../../types/private/Utilities'; | ||
|
|
||
| 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; | ||
| }; | ||
|
|
||
| declare class LayoutConformanceComponent extends React.Component<LayoutConformanceProps> {} | ||
| declare const LayoutConformanceBase: Constructor<HostInstance> & | ||
| typeof LayoutConformanceComponent; | ||
|
|
||
| /** | ||
| * Allows controlling the layout conformance/correctness behaviors of the subtree under this component. | ||
| */ | ||
| export class experimental_LayoutConformance extends LayoutConformanceBase {} |
58 changes: 58 additions & 0 deletions
58
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,58 @@ | ||
| /** | ||
| * 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 Text from '../../Text/Text'; | ||
| import UnimplementedView from '../UnimplementedViews/UnimplementedView'; | ||
| 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; | ||
|
|
||
| /** | ||
| * Allows controlling the layout conformance/correctness behaviors of the subtree under this component. | ||
| */ | ||
| export default function LayoutConformance(props: Props): React.Node { | ||
| if (!isFabricUIManagerInstalled) { | ||
| return ( | ||
| <UnimplementedView> | ||
| <Text> | ||
| The LayoutConformance component is only supported in the New | ||
| Architecture | ||
| </Text> | ||
| </UnimplementedView> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <LayoutConformanceNativeComponent {...props} style={styles.container} /> | ||
| ); | ||
| } | ||
|
|
||
| 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 |
Oops, something went wrong.