Skip to content

Commit 2860ff8

Browse files
kkafarkkafar
committed
Update examples
1 parent ba0f2e3 commit 2860ff8

28 files changed

+164
-163
lines changed

‎apps/src/tests/TestSafeAreaViewIOS/split-view/index.tsx‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ import {
77
import { NavigationIndependentTree } from '@react-navigation/core';
88
import { NavigationContainer } from '@react-navigation/native';
99
import {
10-
SplitViewHost,
11-
SplitViewScreen,
10+
Split
1211
} from 'react-native-screens/experimental';
1312
import ConfigColumn from './ConfigColumn';
1413
import { mapContentStringToComponent } from '../shared';
@@ -55,39 +54,39 @@ export default function SplitViewSAVExample({
5554
}}>
5655
<NavigationIndependentTree>
5756
<NavigationContainer>
58-
<SplitViewHost
57+
<Split.Host
5958
preferredDisplayMode="twoBesideSecondary"
6059
preferredSplitBehavior="tile"
6160
showInspector={config.showInspector}>
62-
<SplitViewScreen.Column>
61+
<Split.Column>
6362
{configColumnIndex !== 1 ? (
6463
renderColumnContent(config.column1)
6564
) : (
6665
<ConfigColumn configColumnIndex={configColumnIndex} />
6766
)}
68-
</SplitViewScreen.Column>
69-
<SplitViewScreen.Column>
67+
</Split.Column>
68+
<Split.Column>
7069
{configColumnIndex !== 2 ? (
7170
renderColumnContent(config.column2)
7271
) : (
7372
<ConfigColumn configColumnIndex={configColumnIndex} />
7473
)}
75-
</SplitViewScreen.Column>
76-
<SplitViewScreen.Column>
74+
</Split.Column>
75+
<Split.Column>
7776
{configColumnIndex !== 3 ? (
7877
renderColumnContent(config.column3)
7978
) : (
8079
<ConfigColumn configColumnIndex={configColumnIndex} />
8180
)}
82-
</SplitViewScreen.Column>
83-
<SplitViewScreen.Inspector>
81+
</Split.Column>
82+
<Split.Inspector>
8483
{configColumnIndex !== 4 ? (
8584
renderColumnContent(config.column4)
8685
) : (
8786
<ConfigColumn configColumnIndex={configColumnIndex} />
8887
)}
89-
</SplitViewScreen.Inspector>
90-
</SplitViewHost>
88+
</Split.Inspector>
89+
</Split.Host>
9190
</NavigationContainer>
9291
</NavigationIndependentTree>
9392
</SplitViewSAVExampleContext.Provider>

‎apps/src/tests/TestSplitView/SplitViewBaseApp.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
import React from 'react';
22
import { StyleSheet, Text, View } from 'react-native';
3-
import { SplitViewHost, SplitViewScreen } from 'react-native-screens/experimental';
3+
import { Split } from 'react-native-screens/experimental';
44
import { Colors } from '../../shared/styling/Colors';
55
import { TestBottomTabs, TestScreenStack } from '..';
66
import { SplitViewBaseConfig } from './helpers/types';
77

88
const SplitViewBaseApp = ({ splitViewBaseConfig }: { splitViewBaseConfig: SplitViewBaseConfig }) => {
99
return (
10-
<SplitViewHost {...splitViewBaseConfig}>
11-
<SplitViewScreen.Column>
10+
<Split.Host {...splitViewBaseConfig}>
11+
<Split.Column>
1212
<View style={[styles.container, { backgroundColor: Colors.White }]}>
1313
<Text style={styles.text}>Primary column</Text>
1414
</View>
15-
</SplitViewScreen.Column>
16-
<SplitViewScreen.Column>
15+
</Split.Column>
16+
<Split.Column>
1717
<TestBottomTabs />
18-
</SplitViewScreen.Column>
19-
<SplitViewScreen.Column>
18+
</Split.Column>
19+
<Split.Column>
2020
<TestScreenStack />
21-
</SplitViewScreen.Column>
22-
</SplitViewHost>
21+
</Split.Column>
22+
</Split.Host>
2323
);
2424
}
2525

‎apps/src/tests/TestSplitView/SplitViewOrientation.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
11
import React from 'react';
22
import { StyleSheet, Text, View } from 'react-native';
3-
import { SplitViewHost, SplitViewScreen } from 'react-native-screens/experimental';
3+
import { Split } from 'react-native-screens/experimental';
44
import { Colors } from '../../shared/styling/Colors';
55
import { SplitViewBaseConfig } from './helpers/types';
66

77
const SplitViewOrientation = ({ splitViewBaseConfig }: { splitViewBaseConfig: SplitViewBaseConfig }) => {
88
return (
9-
<SplitViewHost {...splitViewBaseConfig} orientation='landscapeLeft'>
10-
<SplitViewScreen.Column>
9+
<Split.Host {...splitViewBaseConfig} orientation='landscapeLeft'>
10+
<Split.Column>
1111
<View style={[styles.container, { backgroundColor: Colors.White }]}>
1212
<Text style={styles.text}>Primary column</Text>
1313
</View>
14-
</SplitViewScreen.Column>
15-
<SplitViewScreen.Column>
14+
</Split.Column>
15+
<Split.Column>
1616
<View style={[styles.container, { backgroundColor: Colors.White }]}>
1717
<Text style={styles.text}>Supplementary column</Text>
1818
</View>
19-
</SplitViewScreen.Column>
20-
<SplitViewScreen.Column>
19+
</Split.Column>
20+
<Split.Column>
2121
<View style={[styles.container, { backgroundColor: Colors.White }]}>
2222
<Text style={styles.text}>Secondary column</Text>
2323
</View>
24-
</SplitViewScreen.Column>
25-
</SplitViewHost>
24+
</Split.Column>
25+
</Split.Host>
2626
);
2727
}
2828

‎apps/src/tests/TestSplitView/SplitViewPerfApp.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ import {
99
Dimensions,
1010
} from 'react-native';
1111
import {
12-
SplitViewHost,
13-
SplitViewScreen,
12+
Split
1413
} from 'react-native-screens/experimental';
1514
import { Colors } from '../../shared/styling/Colors';
1615
import { SplitViewBaseConfig } from './helpers/types';
@@ -85,26 +84,26 @@ const SplitViewPerfApp = ({
8584
splitViewBaseConfig: SplitViewBaseConfig;
8685
}) => {
8786
return (
88-
<SplitViewHost {...splitViewBaseConfig}>
89-
<SplitViewScreen.Column>
87+
<Split.Host {...splitViewBaseConfig}>
88+
<Split.Column>
9089
<View
9190
style={[styles.container, { backgroundColor: Colors.RedLight40 }]}>
9291
<FlatListColumn />
9392
</View>
94-
</SplitViewScreen.Column>
95-
<SplitViewScreen.Column>
93+
</Split.Column>
94+
<Split.Column>
9695
<View
9796
style={[styles.container, { backgroundColor: Colors.GreenLight60 }]}>
9897
<ScrollViewColumn />
9998
</View>
100-
</SplitViewScreen.Column>
101-
<SplitViewScreen.Column>
99+
</Split.Column>
100+
<Split.Column>
102101
<View
103102
style={[styles.container, { backgroundColor: Colors.NavyLight40 }]}>
104103
<GridImage />
105104
</View>
106-
</SplitViewScreen.Column>
107-
</SplitViewHost>
105+
</Split.Column>
106+
</Split.Host>
108107
);
109108
};
110109

‎apps/src/tests/TestSplitView/SplitViewPrimaryBackgroundStyle.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ import React, { useMemo, useState } from 'react';
22
import { Button, StyleSheet, Text, View, ScrollView } from 'react-native';
33
import {
44
SafeAreaView,
5-
SplitViewHost,
6-
SplitViewScreen,
5+
Split
76
} from 'react-native-screens/experimental';
87
import type { SplitViewPrimaryBackgroundStyle } from 'react-native-screens/experimental';
98
import type { SplitViewBaseConfig } from './helpers/types';
@@ -50,21 +49,21 @@ const SplitViewPrimaryBackgroundStyleApp = ({
5049
useState<SplitViewPrimaryBackgroundStyle>('default');
5150

5251
return (
53-
<SplitViewHost
52+
<Split.Host
5453
{...splitViewBaseConfig}
5554
primaryBackgroundStyle={primaryBgStyle}>
56-
<SplitViewScreen.Column>
55+
<Split.Column>
5756
<View style={styles.leftColumn} />
58-
</SplitViewScreen.Column>
59-
<SplitViewScreen.Column>
57+
</Split.Column>
58+
<Split.Column>
6059
<SafeAreaView edges={{ top: true }}>
6160
<ScrollView contentContainerStyle={styles.rightColumn}>
6261
<ConfigPanel setPrimaryBgStyle={setPrimaryBgStyle} />
6362
<ItemsPanel />
6463
</ScrollView>
6564
</SafeAreaView>
66-
</SplitViewScreen.Column>
67-
</SplitViewHost>
65+
</Split.Column>
66+
</Split.Host>
6867
);
6968
};
7069

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import React from 'react';
2-
import { SplitViewHost, SplitViewScreen } from 'react-native-screens/experimental';
2+
import { Split } from 'react-native-screens/experimental';
33
import { NativeStackNavigatorComponent } from '../helpers';
44
import { SplitViewBaseConfig } from '../helpers/types';
55

66
export const SplitViewWithNativeStackBase = ({ splitViewBaseConfig }: { splitViewBaseConfig: SplitViewBaseConfig }) => {
77
return (
8-
<SplitViewHost {...splitViewBaseConfig}>
9-
<SplitViewScreen.Column>
8+
<Split.Host {...splitViewBaseConfig}>
9+
<Split.Column>
1010
<NativeStackNavigatorComponent />
11-
</SplitViewScreen.Column>
12-
<SplitViewScreen.Column>
11+
</Split.Column>
12+
<Split.Column>
1313
<NativeStackNavigatorComponent />
14-
</SplitViewScreen.Column>
15-
<SplitViewScreen.Column>
14+
</Split.Column>
15+
<Split.Column>
1616
<NativeStackNavigatorComponent />
17-
</SplitViewScreen.Column>
18-
</SplitViewHost>
17+
</Split.Column>
18+
</Split.Host>
1919
);
2020
}

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { SplitViewHost, SplitViewScreen } from 'react-native-screens/experimental';
2+
import { Split } from 'react-native-screens/experimental';
33
import { NativeStackNavigatorComponent, type ScreenOneProps } from '../helpers';
44
import { StyleSheet, Text, View } from 'react-native';
55
import PressableWithFeedback from '../../../shared/PressableWithFeedback';
@@ -32,14 +32,14 @@ const ScreenThree = () => (
3232

3333
export const SplitViewWithNativeStackContainedModal = ({ splitViewBaseConfig }: { splitViewBaseConfig: SplitViewBaseConfig }) => {
3434
return (
35-
<SplitViewHost {...splitViewBaseConfig}>
36-
<SplitViewScreen.Column>
35+
<Split.Host {...splitViewBaseConfig}>
36+
<Split.Column>
3737
<NativeStackNavigatorComponent />
38-
</SplitViewScreen.Column>
39-
<SplitViewScreen.Column>
38+
</Split.Column>
39+
<Split.Column>
4040
<NativeStackNavigatorComponent />
41-
</SplitViewScreen.Column>
42-
<SplitViewScreen.Column>
41+
</Split.Column>
42+
<Split.Column>
4343
<NativeStackNavigatorComponent
4444
CustomScreenOne={ScreenOne}
4545
customScreenOneName='ScreenOne'
@@ -50,8 +50,8 @@ export const SplitViewWithNativeStackContainedModal = ({ splitViewBaseConfig }:
5050
customScreenThreeName='ScreenThree'
5151
customScreenThreeNavigationOptions={{ presentation: 'containedTransparentModal' }}
5252
/>
53-
</SplitViewScreen.Column>
54-
</SplitViewHost>
53+
</Split.Column>
54+
</Split.Host>
5555
);
5656
}
5757

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { SplitViewHost, SplitViewScreen } from 'react-native-screens/experimental';
2+
import { Split } from 'react-native-screens/experimental';
33
import { NativeStackNavigatorComponent } from '../helpers';
44
import { SplitViewBaseConfig } from '../helpers/types';
55

@@ -9,8 +9,8 @@ export const SplitViewWithNativeStackGestures = ({
99
splitViewBaseConfig: SplitViewBaseConfig;
1010
}) => {
1111
return (
12-
<SplitViewHost {...splitViewBaseConfig}>
13-
<SplitViewScreen.Column>
12+
<Split.Host {...splitViewBaseConfig}>
13+
<Split.Column>
1414
<NativeStackNavigatorComponent
1515
customScreenOneNavigationOptions={{
1616
gestureEnabled: true,
@@ -22,8 +22,8 @@ export const SplitViewWithNativeStackGestures = ({
2222
gestureEnabled: false,
2323
}}
2424
/>
25-
</SplitViewScreen.Column>
26-
<SplitViewScreen.Column>
25+
</Split.Column>
26+
<Split.Column>
2727
<NativeStackNavigatorComponent
2828
customScreenOneNavigationOptions={{
2929
fullScreenGestureEnabled: true,
@@ -38,8 +38,8 @@ export const SplitViewWithNativeStackGestures = ({
3838
gestureEnabled: false,
3939
}}
4040
/>
41-
</SplitViewScreen.Column>
42-
<SplitViewScreen.Column>
41+
</Split.Column>
42+
<Split.Column>
4343
<NativeStackNavigatorComponent
4444
customScreenOneNavigationOptions={{
4545
fullScreenGestureEnabled: true,
@@ -57,7 +57,7 @@ export const SplitViewWithNativeStackGestures = ({
5757
animationMatchesGesture: true,
5858
}}
5959
/>
60-
</SplitViewScreen.Column>
61-
</SplitViewHost>
60+
</Split.Column>
61+
</Split.Host>
6262
);
6363
};

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { SplitViewHost, SplitViewScreen } from 'react-native-screens/experimental';
2+
import { Split } from 'react-native-screens/experimental';
33
import { NativeStackNavigatorComponent } from '../helpers';
44
import { Image, View } from 'react-native';
55
import Colors from '../../../shared/styling/Colors';
@@ -21,8 +21,8 @@ export const SplitViewWithNativeStackHeader = ({
2121
splitViewBaseConfig: SplitViewBaseConfig;
2222
}) => {
2323
return (
24-
<SplitViewHost {...splitViewBaseConfig}>
25-
<SplitViewScreen.Column>
24+
<Split.Host {...splitViewBaseConfig}>
25+
<Split.Column>
2626
<NativeStackNavigatorComponent
2727
customScreenOneNavigationOptions={{ headerShown: false }}
2828
customScreenTwoNavigationOptions={{
@@ -45,8 +45,8 @@ export const SplitViewWithNativeStackHeader = ({
4545
headerBackImageSource: require('../../../../assets/backButton.png'),
4646
}}
4747
/>
48-
</SplitViewScreen.Column>
49-
<SplitViewScreen.Column>
48+
</Split.Column>
49+
<Split.Column>
5050
<NativeStackNavigatorComponent
5151
customScreenOneNavigationOptions={{ headerTransparent: true }}
5252
customScreenTwoNavigationOptions={{
@@ -63,8 +63,8 @@ export const SplitViewWithNativeStackHeader = ({
6363
),
6464
}}
6565
/>
66-
</SplitViewScreen.Column>
67-
<SplitViewScreen.Column>
66+
</Split.Column>
67+
<Split.Column>
6868
<NativeStackNavigatorComponent
6969
customScreenOneNavigationOptions={{
7070
headerTintColor: Colors.RedDark100,
@@ -86,7 +86,7 @@ export const SplitViewWithNativeStackHeader = ({
8686
headerRight: HeaderRight,
8787
}}
8888
/>
89-
</SplitViewScreen.Column>
90-
</SplitViewHost>
89+
</Split.Column>
90+
</Split.Host>
9191
);
9292
};

0 commit comments

Comments
 (0)