Skip to content

Commit ecda311

Browse files
t0maborot0maboro
authored
chore: Update FormSheet-SAV integration test to cover sheetShouldOverflowTopInset (#3503)
## Description Update react-navigation & add a prop to the example. The case with a double top inset in the first video test is acceptable and expected, because all top inset behavior combinations can already be covered using other configuration options. We can cover all visual scenarios by adjusting the `sheetShouldOverflowTopInset` prop and the use of `SafeAreaView` with the top edge enabled or disabled: 1. Background and content overflow behind the status bar - sheetShouldOverflowTopInset: true - SafeAreaView top: disabled 2. Background overflows, but content respects the SafeArea and avoids the status bar - sheetShouldOverflowTopInset: true - SafeAreaView top: enabled 3. Both background and content respect the SafeArea (no overflow) - sheetShouldOverflowTopInset: false Because these three combinations fully cover all possible variants of top inset behavior, we don't need to treat the double top inset as a bug. It's just one of the valid configurations, and it works correctly depending on how the developer configures their SafeArea usage, combined with Sheet overflow settings. Fixes: software-mansion/react-native-screens-labs#568 ## Changes - Updated `react-navigation` to react-navigation/react-navigation@2b7ee0d - Updated `Test3336` ## Screenshots / GIFs Here you can add screenshots / GIFs documenting your change. You can add before / after section if you're changing some behavior. https://github.com/user-attachments/assets/4fd0863a-a6d4-44d0-9472-21e468802034 ## Test code and steps to reproduce Test3336 Note: double inset in the 1st test is ## Checklist - [x] Included code example that can be used to test this change - [x] Ensured that CI passes
1 parent 06a5812 commit ecda311

File tree

2 files changed

+52
-22
lines changed

2 files changed

+52
-22
lines changed

‎apps/src/tests/Test3336.tsx‎

Lines changed: 51 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,17 @@ import { Spacer } from '../shared';
1919
import Colors from '../shared/styling/Colors';
2020
import { Edge, SafeAreaView } from 'react-native-screens/experimental';
2121

22+
/**
23+
* Changelog:
24+
*
25+
* #3503 - Add toggle for `sheetShouldOverflowTopInset` - allowing testing SAV integration with FormSheet that overlaps top inset.
26+
* If `sheetShouldOverflowTopInset` is true - FormSheet with max detent should overflow the content with system bars, unless
27+
* SafeAreaView insets are enabled.
28+
* #3435 - Add example for testing pressables when TextInput changed Sheet translation on keyboard appear/disappear
29+
* #3336 - Add example covering all FormSheet detents - SAV pairs
30+
*
31+
*/
32+
2233
type StackParamList = {
2334
Main: undefined;
2435
FormSheetWithFitToContents: undefined;
@@ -45,10 +56,12 @@ const Stack = createNativeStackNavigator<StackParamList>();
4556
type MainProps = {
4657
navigation: NativeStackNavigationProp<StackParamList, 'Main'>;
4758
useSafeArea: boolean;
59+
shouldOverflowTopInset: boolean;
4860
edges: Partial<Record<Edge, boolean>>;
4961
toggleSafeArea: () => void;
5062
toggleTopEdge: () => void;
5163
toggleBottomEdge: () => void;
64+
toggleOverflowTopInset: () => void;
5265
};
5366

5467
const EXAMPLES = [
@@ -71,16 +84,18 @@ const EXAMPLES = [
7184
'Partially covered status bar (TextInput)',
7285
'FormSheetOverStatusBarWithTextInput',
7386
],
74-
['Pressable & TextInput', 'FormSheetTextInputAndPressable']
87+
['Pressable & TextInput', 'FormSheetTextInputAndPressable'],
7588
];
7689

7790
function Main({
7891
navigation,
7992
useSafeArea,
93+
shouldOverflowTopInset,
8094
edges,
8195
toggleSafeArea,
8296
toggleTopEdge,
8397
toggleBottomEdge,
98+
toggleOverflowTopInset,
8499
}: MainProps) {
85100
return (
86101
<View style={{ flex: 1, padding: 16 }}>
@@ -91,6 +106,9 @@ function Main({
91106
[Android] Edges, top: {edges.top ? 'enabled' : 'disabled'}, bottom:{' '}
92107
{edges.bottom ? 'enabled' : 'disabled'}
93108
</Text>
109+
<Text style={{ fontSize: 20, marginVertical: 4 }}>
110+
sheetShouldOverflowTopInset: {shouldOverflowTopInset ? 'true' : 'false'}
111+
</Text>
94112
<View style={{ marginVertical: 4 }}>
95113
<Button onPress={toggleSafeArea} title="Toggle SAV" />
96114
</View>
@@ -100,6 +118,12 @@ function Main({
100118
<View style={{ marginVertical: 4 }}>
101119
<Button onPress={toggleBottomEdge} title="Toggle bottom edge" />
102120
</View>
121+
<View style={{ marginVertical: 4 }}>
122+
<Button
123+
onPress={toggleOverflowTopInset}
124+
title="Toggle overflow top inset"
125+
/>
126+
</View>
103127
<View
104128
style={{
105129
width: '100%',
@@ -124,15 +148,17 @@ function Main({
124148
);
125149
}
126150

127-
const formSheetBaseOptions: NativeStackNavigationOptions = {
151+
const getFormSheetBaseOptions = (
152+
shouldOverflowTopInset: boolean,
153+
): NativeStackNavigationOptions => ({
128154
presentation: 'formSheet',
129155
animation: 'slide_from_bottom',
130156
headerShown: false,
131157
contentStyle: {
132158
backgroundColor: Colors.GreenLight100,
133159
},
134-
// TODO(@t0maboro) - add `sheetShouldOverflowTopInset` prop here when possible
135-
};
160+
sheetShouldOverflowTopInset: shouldOverflowTopInset,
161+
});
136162

137163
function PressableBase() {
138164
return (
@@ -241,11 +267,13 @@ export default function App() {
241267
top: true,
242268
bottom: true,
243269
});
270+
const [shouldOverflowTopInset, setShouldOverflowTopInset] = useState(false);
244271
const toggleSafeArea = () => setUseSafeArea(prev => !prev);
245272
const toggleTopEdge = () =>
246273
setSafeAreaEdges(prev => ({ ...prev, top: !prev.top }));
247274
const toggleBottomEdge = () =>
248275
setSafeAreaEdges(prev => ({ ...prev, bottom: !prev.bottom }));
276+
const toggleOverflowTopInset = () => setShouldOverflowTopInset(prev => !prev);
249277

250278
return (
251279
<NavigationContainer>
@@ -257,10 +285,12 @@ export default function App() {
257285
<Main
258286
navigation={navigation}
259287
useSafeArea={useSafeArea}
288+
shouldOverflowTopInset={shouldOverflowTopInset}
260289
edges={safeAreaEdges}
261290
toggleSafeArea={toggleSafeArea}
262291
toggleTopEdge={toggleTopEdge}
263292
toggleBottomEdge={toggleBottomEdge}
293+
toggleOverflowTopInset={toggleOverflowTopInset}
264294
/>
265295
)}
266296
/>
@@ -275,7 +305,7 @@ export default function App() {
275305
},
276306
)}
277307
options={{
278-
...formSheetBaseOptions,
308+
...getFormSheetBaseOptions(shouldOverflowTopInset),
279309
sheetAllowedDetents: 'fitToContents',
280310
}}
281311
/>
@@ -287,7 +317,7 @@ export default function App() {
287317
safeAreaEdges,
288318
)}
289319
options={{
290-
...formSheetBaseOptions,
320+
...getFormSheetBaseOptions(shouldOverflowTopInset),
291321
sheetAllowedDetents: [0.2],
292322
}}
293323
/>
@@ -299,7 +329,7 @@ export default function App() {
299329
safeAreaEdges,
300330
)}
301331
options={{
302-
...formSheetBaseOptions,
332+
...getFormSheetBaseOptions(shouldOverflowTopInset),
303333
sheetAllowedDetents: [0.5],
304334
}}
305335
/>
@@ -311,7 +341,7 @@ export default function App() {
311341
safeAreaEdges,
312342
)}
313343
options={{
314-
...formSheetBaseOptions,
344+
...getFormSheetBaseOptions(shouldOverflowTopInset),
315345
sheetAllowedDetents: [0.8],
316346
}}
317347
/>
@@ -323,7 +353,7 @@ export default function App() {
323353
safeAreaEdges,
324354
)}
325355
options={{
326-
...formSheetBaseOptions,
356+
...getFormSheetBaseOptions(shouldOverflowTopInset),
327357
sheetAllowedDetents: [0.3, 0.6],
328358
}}
329359
/>
@@ -335,7 +365,7 @@ export default function App() {
335365
safeAreaEdges,
336366
)}
337367
options={{
338-
...formSheetBaseOptions,
368+
...getFormSheetBaseOptions(shouldOverflowTopInset),
339369
sheetAllowedDetents: [0.3, 0.6, 0.9],
340370
}}
341371
/>
@@ -347,7 +377,7 @@ export default function App() {
347377
safeAreaEdges,
348378
)}
349379
options={{
350-
...formSheetBaseOptions,
380+
...getFormSheetBaseOptions(shouldOverflowTopInset),
351381
sheetAllowedDetents: [1.0],
352382
}}
353383
/>
@@ -359,7 +389,7 @@ export default function App() {
359389
safeAreaEdges,
360390
)}
361391
options={{
362-
...formSheetBaseOptions,
392+
...getFormSheetBaseOptions(shouldOverflowTopInset),
363393
sheetAllowedDetents: [0.99],
364394
}}
365395
/>
@@ -374,7 +404,7 @@ export default function App() {
374404
},
375405
)}
376406
options={{
377-
...formSheetBaseOptions,
407+
...getFormSheetBaseOptions(shouldOverflowTopInset),
378408
sheetAllowedDetents: 'fitToContents',
379409
}}
380410
/>
@@ -386,7 +416,7 @@ export default function App() {
386416
safeAreaEdges,
387417
)}
388418
options={{
389-
...formSheetBaseOptions,
419+
...getFormSheetBaseOptions(shouldOverflowTopInset),
390420
sheetAllowedDetents: [0.2],
391421
}}
392422
/>
@@ -398,7 +428,7 @@ export default function App() {
398428
safeAreaEdges,
399429
)}
400430
options={{
401-
...formSheetBaseOptions,
431+
...getFormSheetBaseOptions(shouldOverflowTopInset),
402432
sheetAllowedDetents: [0.5],
403433
}}
404434
/>
@@ -410,7 +440,7 @@ export default function App() {
410440
safeAreaEdges,
411441
)}
412442
options={{
413-
...formSheetBaseOptions,
443+
...getFormSheetBaseOptions(shouldOverflowTopInset),
414444
sheetAllowedDetents: [0.8],
415445
}}
416446
/>
@@ -422,7 +452,7 @@ export default function App() {
422452
safeAreaEdges,
423453
)}
424454
options={{
425-
...formSheetBaseOptions,
455+
...getFormSheetBaseOptions(shouldOverflowTopInset),
426456
sheetAllowedDetents: [0.3, 0.6],
427457
}}
428458
/>
@@ -434,7 +464,7 @@ export default function App() {
434464
safeAreaEdges,
435465
)}
436466
options={{
437-
...formSheetBaseOptions,
467+
...getFormSheetBaseOptions(shouldOverflowTopInset),
438468
sheetAllowedDetents: [0.3, 0.6, 0.9],
439469
}}
440470
/>
@@ -446,7 +476,7 @@ export default function App() {
446476
safeAreaEdges,
447477
)}
448478
options={{
449-
...formSheetBaseOptions,
479+
...getFormSheetBaseOptions(shouldOverflowTopInset),
450480
sheetAllowedDetents: [1.0],
451481
}}
452482
/>
@@ -458,7 +488,7 @@ export default function App() {
458488
safeAreaEdges,
459489
)}
460490
options={{
461-
...formSheetBaseOptions,
491+
...getFormSheetBaseOptions(shouldOverflowTopInset),
462492
sheetAllowedDetents: [0.99],
463493
}}
464494
/>
@@ -470,7 +500,7 @@ export default function App() {
470500
safeAreaEdges,
471501
)}
472502
options={{
473-
...formSheetBaseOptions,
503+
...getFormSheetBaseOptions(shouldOverflowTopInset),
474504
sheetAllowedDetents: [0.5],
475505
}}
476506
/>

‎react-navigation‎

Submodule react-navigation updated 77 files

0 commit comments

Comments
 (0)