mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Nick GerlemanandFacebook GitHub Bot
06751aa0d1
Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/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
107 lines
2.8 KiB
JavaScript
107 lines
2.8 KiB
JavaScript
/**
|
|
* 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
|
|
* @flow strict-local
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
import type {RNTesterModule} from '../../types/RNTesterTypes';
|
|
|
|
import RNTesterText from '../../components/RNTesterText';
|
|
import * as React from 'react';
|
|
import {
|
|
View,
|
|
experimental_LayoutConformance as LayoutConformance,
|
|
} from 'react-native';
|
|
|
|
function LayoutConformanceExample({
|
|
testID,
|
|
}: $ReadOnly<{testID: ?string}>): React.Node {
|
|
return (
|
|
<View style={{flexDirection: 'row', gap: 10}} testID={testID}>
|
|
<View>
|
|
<RNTesterText>Unset</RNTesterText>
|
|
<LayoutConformanceBox />
|
|
</View>
|
|
<LayoutConformance mode="compatibility">
|
|
<View>
|
|
<RNTesterText>Compat</RNTesterText>
|
|
<LayoutConformanceBox />
|
|
</View>
|
|
</LayoutConformance>
|
|
<LayoutConformance mode="strict">
|
|
<View>
|
|
<RNTesterText>Strict</RNTesterText>
|
|
<LayoutConformanceBox />
|
|
</View>
|
|
</LayoutConformance>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function LayoutConformanceBox(): React.Node {
|
|
return (
|
|
<View
|
|
style={{
|
|
backgroundColor: 'blue',
|
|
width: 60,
|
|
height: 60,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
}}>
|
|
{/*Yoga with YGErrataStretchFlexBasis will let this node grow to
|
|
parent width, even though it shouldn't take any space*/}
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
}}>
|
|
<View
|
|
style={{
|
|
height: 30,
|
|
backgroundColor: 'red',
|
|
flexGrow: 1,
|
|
}}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export default ({
|
|
title: 'LayoutConformance',
|
|
description:
|
|
'Examples laid out in compatibility mode will show a red bar, not present in examples with conformant layout.',
|
|
examples: [
|
|
{
|
|
title: 'LayoutConformance (No outer context)',
|
|
name: 'layout-conformance-no-outer-context',
|
|
render: () => (
|
|
<LayoutConformanceExample testID="layout-conformance-no-outer-context" />
|
|
),
|
|
},
|
|
{
|
|
title: 'LayoutConformance (Under compatibility context)',
|
|
name: 'layout-conformance-under-compat',
|
|
render: () => (
|
|
<LayoutConformance mode="compatibility">
|
|
<LayoutConformanceExample testID="layout-conformance-under-compat" />
|
|
</LayoutConformance>
|
|
),
|
|
},
|
|
{
|
|
title: 'LayoutConformance (Under strict context)',
|
|
name: 'layout-conformance-under-strict',
|
|
render: () => (
|
|
<LayoutConformance mode="strict">
|
|
<LayoutConformanceExample testID="layout-conformance-under-strict" />
|
|
</LayoutConformance>
|
|
),
|
|
},
|
|
],
|
|
}: RNTesterModule);
|