Skip to content

Commit 402a1c0

Browse files
t0maborot0maboro
authored
chore(iOS, SplitView): Add more tests for SplitView - NativeStack integration (#3112)
## Description Added examples covering: - formSheet props - header style and header large title props - gestures and animations props - search bar props During testing, I identified the following issues to be investigated: - ~~[gestureEnabled](software-mansion/react-native-screens-labs#349 - [hideWhenScrolling](software-mansion/react-native-screens-labs#350) (reproducible without SplitView) ## Changes - Added new examples. ## Test code and steps to reproduce Go through new examples and verify results. ## Checklist - [x] Included code example that can be used to test this change - [x] Ensured that CI passes
1 parent eedb311 commit 402a1c0

File tree

7 files changed

+370
-3
lines changed

7 files changed

+370
-3
lines changed

‎apps/src/tests/TestSplitView/SplitViewWithNativeStack/SplitViewWithNativeStackGestures.tsx

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React from 'react';
2+
import { SplitViewHost, SplitViewScreen } from 'react-native-screens';
3+
import { NativeStackNavigatorComponent } from '../helpers';
4+
import { SplitViewBaseConfig } from '../helpers/types';
5+
6+
export const SplitViewWithNativeStackGestures = ({
7+
splitViewBaseConfig,
8+
}: {
9+
splitViewBaseConfig: SplitViewBaseConfig;
10+
}) => {
11+
return (
12+
<SplitViewHost {...splitViewBaseConfig}>
13+
<SplitViewScreen.Column>
14+
<NativeStackNavigatorComponent
15+
customScreenOneNavigationOptions={{
16+
gestureEnabled: true,
17+
}}
18+
customScreenTwoNavigationOptions={{
19+
gestureEnabled: true,
20+
}}
21+
customScreenThreeNavigationOptions={{
22+
gestureEnabled: false,
23+
}}
24+
/>
25+
</SplitViewScreen.Column>
26+
<SplitViewScreen.Column>
27+
<NativeStackNavigatorComponent
28+
customScreenOneNavigationOptions={{
29+
fullScreenGestureEnabled: true,
30+
gestureEnabled: true,
31+
}}
32+
customScreenTwoNavigationOptions={{
33+
fullScreenGestureEnabled: true,
34+
gestureEnabled: true,
35+
}}
36+
customScreenThreeNavigationOptions={{
37+
fullScreenGestureEnabled: true,
38+
gestureEnabled: false,
39+
}}
40+
/>
41+
</SplitViewScreen.Column>
42+
<SplitViewScreen.Column>
43+
<NativeStackNavigatorComponent
44+
customScreenOneNavigationOptions={{
45+
fullScreenGestureEnabled: true,
46+
animation: 'fade_from_bottom',
47+
animationMatchesGesture: true,
48+
}}
49+
customScreenTwoNavigationOptions={{
50+
fullScreenGestureEnabled: true,
51+
animation: 'fade_from_bottom',
52+
animationMatchesGesture: true,
53+
}}
54+
customScreenThreeNavigationOptions={{
55+
fullScreenGestureEnabled: true,
56+
animation: 'fade_from_bottom',
57+
animationMatchesGesture: true,
58+
}}
59+
/>
60+
</SplitViewScreen.Column>
61+
</SplitViewHost>
62+
);
63+
};

‎apps/src/tests/TestSplitView/SplitViewWithNativeStack/SplitViewWithNativeStackHeaderStyles.tsx

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React from 'react';
2+
import { SplitViewHost, SplitViewScreen } from 'react-native-screens';
3+
import { NativeStackNavigatorComponent } from '../helpers';
4+
import { SplitViewBaseConfig } from '../helpers/types';
5+
import Colors from '../../../shared/styling/Colors';
6+
7+
export const SplitViewWithNativeStackHeaderStyles = ({
8+
splitViewBaseConfig,
9+
}: {
10+
splitViewBaseConfig: SplitViewBaseConfig;
11+
}) => {
12+
return (
13+
<SplitViewHost {...splitViewBaseConfig}>
14+
<SplitViewScreen.Column>
15+
<NativeStackNavigatorComponent
16+
customScreenOneNavigationOptions={{
17+
headerBackButtonDisplayMode: 'generic',
18+
}}
19+
customScreenTwoNavigationOptions={{
20+
headerBackButtonDisplayMode: 'minimal',
21+
headerBackButtonMenuEnabled: true,
22+
}}
23+
customScreenThreeNavigationOptions={{
24+
headerBackButtonDisplayMode: 'generic',
25+
headerBackButtonMenuEnabled: false,
26+
}}
27+
/>
28+
</SplitViewScreen.Column>
29+
<SplitViewScreen.Column>
30+
<NativeStackNavigatorComponent
31+
customScreenOneNavigationOptions={{
32+
headerLargeTitle: true,
33+
}}
34+
customScreenTwoNavigationOptions={{
35+
headerLargeTitle: true,
36+
headerLargeTitleStyle: {
37+
color: Colors.RedDark100,
38+
fontSize: 30,
39+
fontWeight: 'bold',
40+
},
41+
}}
42+
customScreenThreeNavigationOptions={{
43+
headerLargeTitle: true,
44+
headerLargeStyle: {
45+
backgroundColor: Colors.GreenDark100,
46+
},
47+
}}
48+
/>
49+
</SplitViewScreen.Column>
50+
<SplitViewScreen.Column>
51+
<NativeStackNavigatorComponent
52+
customScreenOneNavigationOptions={{
53+
headerStyle: {
54+
backgroundColor: Colors.BlueLight100,
55+
},
56+
}}
57+
customScreenTwoNavigationOptions={{
58+
headerStyle: {
59+
backgroundColor: Colors.GreenDark100,
60+
},
61+
}}
62+
customScreenThreeNavigationOptions={{
63+
headerStyle: {
64+
backgroundColor: Colors.YellowDark100,
65+
},
66+
}}
67+
/>
68+
</SplitViewScreen.Column>
69+
</SplitViewHost>
70+
);
71+
};

‎apps/src/tests/TestSplitView/SplitViewWithNativeStack/SplitViewWithNativeStackSearchBar.tsx

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react';
2+
import { SplitViewHost, SplitViewScreen } from 'react-native-screens';
3+
import { NativeStackNavigatorComponent } from '../helpers';
4+
import { SplitViewBaseConfig } from '../helpers/types';
5+
import { ScrollViewWithText } from './common';
6+
import Colors from '../../../shared/styling/Colors';
7+
8+
export const SplitViewWithNativeStackSearchBar = ({
9+
splitViewBaseConfig,
10+
}: {
11+
splitViewBaseConfig: SplitViewBaseConfig;
12+
}) => {
13+
return (
14+
<SplitViewHost {...splitViewBaseConfig}>
15+
<SplitViewScreen.Column>
16+
<NativeStackNavigatorComponent
17+
customScreenOneNavigationOptions={{
18+
headerSearchBarOptions: {
19+
autoCapitalize: "words",
20+
autoFocus: true,
21+
barTintColor: Colors.GreenLight100,
22+
tintColor: Colors.RedDark100,
23+
}
24+
}}
25+
/>
26+
</SplitViewScreen.Column>
27+
<SplitViewScreen.Column>
28+
<NativeStackNavigatorComponent
29+
customScreenOneNavigationOptions={{
30+
headerSearchBarOptions: {
31+
hideNavigationBar: true
32+
}
33+
}}
34+
customScreenTwoNavigationOptions={{
35+
headerSearchBarOptions: {
36+
hideNavigationBar: false
37+
}
38+
}}
39+
/>
40+
</SplitViewScreen.Column>
41+
<SplitViewScreen.Column>
42+
<NativeStackNavigatorComponent
43+
customScreenTwoNavigationOptions={{
44+
headerSearchBarOptions: {
45+
hideWhenScrolling: false
46+
}
47+
}}
48+
CustomScreenTwo={ScrollViewWithText}
49+
/>
50+
</SplitViewScreen.Column>
51+
</SplitViewHost>
52+
);
53+
};

‎apps/src/tests/TestSplitView/SplitViewWithNativeStack/SplitViewWithNativeStackSheet.tsx

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react';
2+
import { SplitViewHost, SplitViewScreen } from 'react-native-screens';
3+
import { NativeStackNavigatorComponent } from '../helpers';
4+
import { SplitViewBaseConfig } from '../helpers/types';
5+
import { ScrollViewWithText } from './common';
6+
7+
export const SplitViewWithNativeStackSheet = ({ splitViewBaseConfig }: { splitViewBaseConfig: SplitViewBaseConfig }) => {
8+
return (
9+
<SplitViewHost {...splitViewBaseConfig}>
10+
<SplitViewScreen.Column>
11+
<NativeStackNavigatorComponent
12+
customScreenTwoNavigationOptions={{
13+
presentation: 'formSheet',
14+
sheetAllowedDetents: [0.3, 0.8],
15+
}}
16+
customScreenThreeNavigationOptions={{
17+
presentation: 'formSheet',
18+
sheetAllowedDetents: 'fitToContents',
19+
}}
20+
/>
21+
</SplitViewScreen.Column>
22+
<SplitViewScreen.Column>
23+
<NativeStackNavigatorComponent
24+
customScreenTwoNavigationOptions={{
25+
presentation: 'formSheet',
26+
sheetAllowedDetents: [0.3, 0.8],
27+
sheetCornerRadius: 100,
28+
}}
29+
customScreenThreeNavigationOptions={{
30+
presentation: 'formSheet',
31+
sheetAllowedDetents: [0.3, 0.8],
32+
sheetCornerRadius: 100,
33+
sheetExpandsWhenScrolledToEdge: false
34+
}}
35+
CustomScreenThree={ScrollViewWithText}
36+
/>
37+
</SplitViewScreen.Column>
38+
<SplitViewScreen.Column>
39+
<NativeStackNavigatorComponent
40+
customScreenTwoNavigationOptions={{
41+
presentation: 'formSheet',
42+
sheetAllowedDetents: [0.3, 0.8],
43+
sheetInitialDetentIndex: 1,
44+
sheetLargestUndimmedDetentIndex: 1
45+
}}
46+
customScreenThreeNavigationOptions={{
47+
presentation: 'formSheet',
48+
sheetAllowedDetents: [0.3, 0.8],
49+
sheetGrabberVisible: true,
50+
}}
51+
/>
52+
</SplitViewScreen.Column>
53+
</SplitViewHost>
54+
);
55+
};

‎apps/src/tests/TestSplitView/SplitViewWithNativeStack/common.tsx

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import React from 'react';
2+
import { ScrollView, Text } from 'react-native';
3+
4+
export const ScrollViewWithText = () => (
5+
<ScrollView>
6+
<Text>
7+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia, inventore!
8+
Nemo, dolore placeat dolor a recusandae facere alias corporis suscipit
9+
enim rem? Dolores, blanditiis facere aliquid dignissimos veritatis vitae
10+
at id, porro eos ex non explicabo optio obcaecati! Autem accusamus
11+
distinctio, aut quibusdam laudantium atque laboriosam corporis nihil! Quos
12+
animi voluptate nam soluta fuga. Modi natus, aliquid iusto illum aut sint
13+
minima consequuntur sed sapiente praesentium ipsum, exercitationem cum
14+
eligendi voluptatibus quo vitae impedit? Aut, iure nobis repudiandae a
15+
excepturi tenetur? Fugit sit rem quam, consequuntur veniam provident, ad
16+
cumque rerum illum exercitationem recusandae laboriosam, unde consequatur
17+
magni sint ut molestias ipsam accusantium similique quia officiis.
18+
Dolorum, adipisci obcaecati nam veritatis culpa eius, iure dicta numquam
19+
accusantium, doloribus deserunt architecto porro nihil at hic! Unde
20+
adipisci officia culpa debitis ipsa, et quisquam, maxime incidunt
21+
similique ipsam, ducimus aspernatur minus quos sed. Dolor debitis tenetur
22+
officiis sit? Assumenda explicabo ipsum odit culpa quis suscipit dolore
23+
aperiam! Sunt cupiditate doloremque esse provident, exercitationem
24+
asperiores nisi ea vero nemo ex doloribus. Repudiandae quibusdam
25+
voluptatibus rem, fuga dolorem, blanditiis aspernatur quam sint quos quia
26+
repellendus, qui velit molestiae obcaecati amet cupiditate sapiente nulla
27+
provident ducimus ipsa. Sit animi corporis amet, eum voluptas quisquam
28+
atque. Eaque, hic laboriosam. Impedit at porro labore, optio
29+
exercitationem explicabo soluta dolores recusandae? Pariatur quaerat atque
30+
quos suscipit soluta. Laboriosam porro perspiciatis incidunt voluptas
31+
voluptatibus modi delectus non ullam laudantium adipisci numquam ipsam,
32+
eveniet reprehenderit consequatur enim voluptate voluptatum possimus
33+
nesciunt ea itaque odio alias atque ipsum nisi. Dolorem consequuntur eum
34+
mollitia autem impedit et officia porro hic? Veniam excepturi dolore enim
35+
maxime officia, nam quae qui autem, provident perferendis quas quod
36+
perspiciatis rerum reiciendis earum, eum modi? Aut consequuntur facilis
37+
amet! Natus voluptates deleniti non quam laborum fuga soluta quasi eaque
38+
autem assumenda sed, iusto id culpa dicta laudantium. Omnis in est
39+
deserunt illo incidunt tempora vero voluptas corporis dolore et voluptatum
40+
accusamus eum aut fuga saepe officia quidem dicta, quas quae. Neque,
41+
aspernatur delectus nam iure expedita vel ad. Maxime nam magnam hic odio
42+
nemo assumenda doloremque ab rerum. Voluptatibus, quo adipisci. Voluptate
43+
et autem hic magni saepe aliquid. Soluta nihil, laboriosam omnis magnam
44+
corrupti neque delectus eius dicta perspiciatis asperiores nemo cum,
45+
consectetur numquam sed suscipit labore reprehenderit facere impedit ex
46+
distinctio quam pariatur dolore deleniti ea! Optio placeat illo hic
47+
dolorum inventore architecto, pariatur, id iusto expedita debitis deserunt
48+
sunt praesentium molestias quas numquam ab? Repudiandae maxime harum id
49+
hic dolorum, dolores voluptate necessitatibus cum rerum delectus numquam
50+
consequuntur dicta explicabo nostrum cupiditate modi porro placeat atque
51+
natus sapiente quam? Maxime repellat illum accusantium saepe. Praesentium,
52+
quo aperiam quae corporis, quis reprehenderit neque consectetur vero
53+
distinctio cumque maiores excepturi, sint est inventore. Id assumenda quia
54+
molestias deleniti quod nobis vero eum eveniet reiciendis libero nihil
55+
officia nam dicta quasi recusandae incidunt cupiditate, ipsum doloribus
56+
unde! Tempora in reprehenderit beatae. A ullam aliquam facilis nesciunt,
57+
expedita dolore, assumenda ipsam dolorem quas nostrum perferendis ratione
58+
quae iure aut veritatis, soluta fugit nulla commodi quam ea blanditiis
59+
sapiente et. Nisi, placeat provident temporibus sunt magni maiores?
60+
Dolores fugit, voluptate recusandae magnam quo quam temporibus unde
61+
reprehenderit repellendus vel ut nobis alias, corrupti aspernatur! Veniam
62+
ea eligendi atque architecto aut praesentium, dolores, eius alias autem
63+
quo eos provident vero sed. Suscipit, velit. Fugit commodi facilis,
64+
impedit amet voluptatibus harum eaque accusamus ea corporis dignissimos
65+
ratione cum in earum laudantium hic error iure? Quos suscipit deleniti
66+
recusandae doloribus aut, id cumque obcaecati ipsa nam labore aliquam
67+
officiis itaque dignissimos optio, iusto placeat animi blanditiis esse, ad
68+
consequuntur mollitia iste eum minus! Beatae fugiat sint hic ut, esse
69+
velit nesciunt adipisci et culpa eius unde voluptatem? Error quos quam
70+
iste, eligendi consectetur inventore corrupti consequatur repellat!
71+
Reiciendis excepturi a sed, totam soluta id eveniet quam sequi fugiat fuga
72+
facere voluptatum magnam ea. Dicta, soluta sit deleniti harum dignissimos
73+
eum voluptate sed quis excepturi blanditiis rem reiciendis praesentium
74+
provident cupiditate quos ad distinctio non aspernatur incidunt sapiente
75+
facere, expedita enim quo! Officiis id, eligendi doloribus voluptas
76+
numquam commodi sint amet ratione qui laboriosam quae. Deserunt dolores
77+
ipsum ipsam sint corporis, nemo neque quasi vero, labore harum culpa id
78+
aliquam tenetur vitae temporibus at reiciendis ad consequatur impedit enim
79+
laborum nam sequi. Fuga facere eligendi minima architecto? Cupiditate sit
80+
quia, ab odit at tenetur dignissimos corrupti quaerat rerum blanditiis
81+
impedit aspernatur nobis reiciendis voluptatibus sequi consectetur! Nulla
82+
est ut quae et, soluta hic vero id. Dolorem repudiandae reiciendis
83+
inventore assumenda, labore nemo dolor quidem ab quia aut enim et
84+
cupiditate iste, commodi fugiat modi hic rem vitae excepturi iure ducimus
85+
facere tempora consequatur? Suscipit sit, vitae error nesciunt maxime
86+
magnam velit eveniet dolorum tenetur modi quasi unde quia itaque ab
87+
nostrum ut earum tempore iusto placeat culpa fugiat voluptate mollitia.
88+
Adipisci quam asperiores iure, quisquam repudiandae, harum, maxime soluta
89+
non aliquam assumenda esse perspiciatis voluptates facilis. Magni quas
90+
praesentium recusandae suscipit veniam, laudantium architecto, facilis ut
91+
aperiam temporibus minus nulla maiores laboriosam natus similique porro!
92+
Ipsa in consequatur, magni nostrum sint ea sed, quis distinctio
93+
consequuntur laboriosam repellat sit cupiditate, dolores sequi incidunt
94+
quasi expedita optio. Minima rerum, repellat, facere quod natus animi
95+
nobis eum similique dolores distinctio a voluptatum maiores inventore
96+
repudiandae ab consequuntur fugit, vitae excepturi? Animi recusandae
97+
necessitatibus ipsa quae architecto voluptatum modi nostrum quam repellat!
98+
At quos magnam, alias praesentium iusto quia facilis laborum libero, iure
99+
excepturi adipisci aperiam, laudantium doloribus optio eius? Quia, qui
100+
amet et ipsa adipisci id accusantium minus, quae odit voluptatum a, veniam
101+
temporibus saepe veritatis nihil? Commodi odit at fugit dolorum deleniti
102+
molestias modi, est facilis magni nostrum veniam sed voluptatem repellat
103+
maiores? Quibusdam est ullam qui molestias suscipit tempora velit
104+
laudantium officia odio placeat tenetur dignissimos molestiae voluptatem
105+
vitae similique dolore eligendi, commodi omnis eos facilis. Error suscipit
106+
aut quibusdam commodi saepe earum ullam sunt, illo ratione nam ad aperiam
107+
quos eveniet quod fugiat vitae modi doloribus corrupti asperiores ducimus
108+
dolores. Minima vitae laudantium aperiam aut repellendus temporibus
109+
ducimus? Nesciunt, dolorem cupiditate facilis fugit reiciendis corporis!
110+
Explicabo ut, illo dolor tenetur similique recusandae soluta?
111+
</Text>
112+
</ScrollView>
113+
);

‎apps/src/tests/TestSplitView/SplitViewWithNativeStack/index.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
11
import { SplitViewWithNestedStack } from './SplitViewWithNestedStack'
22
import { SplitViewWithNativeStackBase } from './SplitViewWithNativeStackBase'
33
import { SplitViewWithNativeStackContainedModal } from './SplitViewWithNativeStackContainedModal'
4+
import { SplitViewWithNativeStackGestures } from './SplitViewWithNativeStackGestures'
45
import { SplitViewWithNativeStackHeader } from './SplitViewWithNativeStackHeader'
6+
import { SplitViewWithNativeStackSearchBar } from './SplitViewWithNativeStackSearchBar'
7+
import { SplitViewWithNativeStackHeaderStyles } from './SplitViewWithNativeStackHeaderStyles'
58
import { SplitViewWithNativeStackModal } from './SplitViewWithNativeStackModal'
69
import { SplitViewWithNativeStackPresentation } from './SplitViewWithNativeStackPresentation'
10+
import { SplitViewWithNativeStackSheet } from './SplitViewWithNativeStackSheet'
711

812
export {
913
SplitViewWithNestedStack,
1014
SplitViewWithNativeStackBase,
1115
SplitViewWithNativeStackContainedModal,
16+
SplitViewWithNativeStackGestures,
1217
SplitViewWithNativeStackHeader,
18+
SplitViewWithNativeStackSearchBar,
19+
SplitViewWithNativeStackHeaderStyles,
1320
SplitViewWithNativeStackModal,
1421
SplitViewWithNativeStackPresentation,
22+
SplitViewWithNativeStackSheet
1523
}

0 commit comments

Comments
 (0)