Skip to content

Commit fd273f8

Browse files
j-piaseckifacebook-github-bot
j-piasecki
authored and
facebook-github-bot
committed
Add RNTester examples for display: contents (#47201)
Summary: Adds a page dedicated to `display: contents` to RNTester APIs section. Those can be used to verify that it's working correctly visually. Needs #47194 ## Changelog: [INTERNAL] [ADDED] - Added `display: contents` examples to RNTester Pull Request resolved: #47201 Test Plan: Row styles are ignored in new arch and TextInputs as leaf are hidden https://www.internalfb.com/compare-screenshots-from-diff/D65248256 Reviewed By: javache Differential Revision: D65248256 Pulled By: NickGerleman fbshipit-source-id: 90410e1380e4cdb22cb4cac5c8c21e08a088ce69
1 parent ecd138e commit fd273f8

File tree

3 files changed

+233
-0
lines changed

3 files changed

+233
-0
lines changed

‎packages/rn-tester/js/examples/DisplayContents/DisplayContentsExample.js

Lines changed: 221 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @format
8+
* @flow strict-local
9+
*/
10+
11+
'use strict';
12+
13+
import type {RNTesterModule} from '../../types/RNTesterTypes';
14+
15+
import * as React from 'react';
16+
import {StyleSheet, TextInput, View, Text} from 'react-native';
17+
18+
const styles = StyleSheet.create({
19+
contents: {
20+
display: 'contents',
21+
},
22+
box: {
23+
width: 200,
24+
height: 100,
25+
},
26+
wrap: {
27+
flexWrap: 'wrap',
28+
},
29+
tinyBox: {
30+
width: 50,
31+
height: 25,
32+
},
33+
border1: {
34+
borderWidth: 1,
35+
borderColor: 'brown',
36+
},
37+
border2: {
38+
borderWidth: 1,
39+
borderColor: 'magenta',
40+
},
41+
border3: {
42+
borderWidth: 1,
43+
borderColor: 'green',
44+
},
45+
row: {
46+
flexDirection: 'row',
47+
},
48+
});
49+
50+
export default ({
51+
title: 'Display: contents',
52+
category: 'UI',
53+
description:
54+
'Demonstrates various ways display: contents may be used in the tree',
55+
examples: [
56+
{
57+
title: 'Single display: contents node',
58+
name: 'single-contents-node',
59+
description:
60+
'Single display: contents node with flex-direction: row (should be ignored in layout)',
61+
render: function (): React.Node {
62+
return (
63+
<View
64+
testID="display-contents-test-single-node-root"
65+
style={[styles.box, styles.border1]}>
66+
<View
67+
testID="display-contents-test-single-node-child"
68+
style={[styles.box, styles.border2, styles.row, styles.contents]}>
69+
<View
70+
testID="display-contents-test-single-node-grandchild-1"
71+
style={[styles.tinyBox, styles.border3]}
72+
/>
73+
<View
74+
testID="display-contents-test-single-node-grandchild-2"
75+
style={[styles.tinyBox, styles.border3]}
76+
/>
77+
</View>
78+
</View>
79+
);
80+
},
81+
},
82+
{
83+
title: 'Multiple display: contents nodes',
84+
name: 'multiple-contents-nodes',
85+
description:
86+
'Three display: contents nodes with flex-direction: row (they should be ignored in layout)',
87+
render: function (): React.Node {
88+
return (
89+
<View
90+
testID="display-contents-test-multiple-node-root"
91+
style={[styles.box, styles.border1, styles.wrap]}>
92+
<View
93+
testID="display-contents-test-single-node-child-1"
94+
style={[styles.box, styles.border2, styles.row, styles.contents]}>
95+
<View
96+
testID="display-contents-test-single-node-grandchild-1"
97+
style={[styles.tinyBox, styles.border3]}
98+
/>
99+
<View
100+
testID="display-contents-test-single-node-grandchild-2"
101+
style={[styles.tinyBox, styles.border3]}
102+
/>
103+
</View>
104+
105+
<View
106+
testID="display-contents-test-single-node-child-2"
107+
style={[styles.box, styles.border2, styles.row, styles.contents]}>
108+
<View
109+
testID="display-contents-test-single-node-grandchild-3"
110+
style={[styles.tinyBox, styles.border2]}
111+
/>
112+
<View
113+
testID="display-contents-test-single-node-grandchild-4"
114+
style={[styles.tinyBox, styles.border2]}
115+
/>
116+
</View>
117+
118+
<View
119+
testID="display-contents-test-single-node-child-3"
120+
style={[styles.box, styles.border2, styles.row, styles.contents]}>
121+
<View
122+
testID="display-contents-test-single-node-grandchild-5"
123+
style={[styles.tinyBox, styles.border3]}
124+
/>
125+
<View
126+
testID="display-contents-test-single-node-grandchild-6"
127+
style={[styles.tinyBox, styles.border3]}
128+
/>
129+
</View>
130+
</View>
131+
);
132+
},
133+
},
134+
{
135+
title: 'Nested display: contents nodes',
136+
name: 'nested-contents-nodes',
137+
description:
138+
'Single display: contents node with two nested display: contents nodes, each with flex-direction: row (they should be ignored in layout)',
139+
render: function (): React.Node {
140+
return (
141+
<View
142+
testID="display-contents-test-multiple-node-root"
143+
style={[styles.box, styles.border1, styles.wrap]}>
144+
<View
145+
testID="display-contents-test-single-node-child-1"
146+
style={[styles.box, styles.border2, styles.row, styles.contents]}>
147+
<View
148+
testID="display-contents-test-single-node-grandchild-1"
149+
style={[styles.tinyBox, styles.border2]}
150+
/>
151+
<View
152+
testID="display-contents-test-single-node-grandchild-2"
153+
style={[styles.tinyBox, styles.border1, styles.contents]}>
154+
<View
155+
testID="display-contents-test-single-node-great-grandchild-1"
156+
style={[styles.tinyBox, styles.border3]}
157+
/>
158+
<View
159+
testID="display-contents-test-single-node-great-grandchild-2"
160+
style={[styles.tinyBox, styles.border3]}
161+
/>
162+
</View>
163+
</View>
164+
</View>
165+
);
166+
},
167+
},
168+
{
169+
title: 'Leaf node with display: contents',
170+
name: 'contents-leaf-node',
171+
description:
172+
'Single display: contents leaf node (should be ignored in layout)',
173+
render: function (): React.Node {
174+
return (
175+
<View
176+
testID="display-contents-test-single-node-root"
177+
style={[styles.box, styles.border1]}>
178+
<View
179+
testID="display-contents-test-single-node-child"
180+
style={[styles.tinyBox, styles.border2, styles.contents]}
181+
/>
182+
</View>
183+
);
184+
},
185+
},
186+
{
187+
title: 'TextInput with display: contents',
188+
name: 'contents-textinput',
189+
description:
190+
'A TextInput with display: contents style (should behave as if display: none was set)',
191+
render: function (): React.Node {
192+
return (
193+
<View
194+
testID="display-contents-textinput-root"
195+
style={[styles.box, styles.border1, styles.wrap]}>
196+
<TextInput
197+
testID="display-contents-textinput"
198+
style={[
199+
styles.tinyBox,
200+
styles.border2,
201+
styles.row,
202+
styles.contents,
203+
]}
204+
/>
205+
<TextInput
206+
testID="display-contents-textinput2"
207+
style={[
208+
styles.tinyBox,
209+
styles.border2,
210+
styles.row,
211+
styles.contents,
212+
]}>
213+
<Text>Text1</Text>
214+
<Text>Text2</Text>
215+
</TextInput>
216+
</View>
217+
);
218+
},
219+
},
220+
],
221+
}: RNTesterModule);

‎packages/rn-tester/js/utils/RNTesterList.android.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,12 @@ const APIs: Array<RNTesterModuleInfo> = ([
202202
category: 'UI',
203203
module: require('../examples/Dimensions/DimensionsExample'),
204204
},
205+
{
206+
key: 'DisplayContentsExample',
207+
category: 'UI',
208+
module: require('../examples/DisplayContents/DisplayContentsExample')
209+
.default,
210+
},
205211
// Only show the link for the example if the API is available.
206212
typeof IntersectionObserver === 'function'
207213
? {

‎packages/rn-tester/js/utils/RNTesterList.ios.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -211,6 +211,12 @@ const APIs: Array<RNTesterModuleInfo> = ([
211211
key: 'Dimensions',
212212
module: require('../examples/Dimensions/DimensionsExample'),
213213
},
214+
{
215+
key: 'DisplayContentsExample',
216+
category: 'UI',
217+
module: require('../examples/DisplayContents/DisplayContentsExample')
218+
.default,
219+
},
214220
// Only show the link for the example if the API is available.
215221
typeof IntersectionObserver === 'function'
216222
? {

0 commit comments

Comments
 (0)