Skip to content

Commit 952b7cd

Browse files
kkafarkkafar
authored
chore(Split): reorganize Split component exports and naming (#3487)
## Description Closes software-mansion/react-native-screens-labs#735 I'm open to discussion on the naming here. This PR changes only JS layer of the component naming. If necessary native-side will be handled separately. ## Changes - **Export split component as `Split` instead of separate ones** I've removed exports for `SplitViewHost` & `SplitViewScreen` in favour of `Split.Host` & `Split.Column` / `Split.Inspector`. The naming here is open for discussion. I prefer short version of `Split` instead of `SplitView`, but that's matter of preference, can't find reasonable (& clinching) arguments for one or the other. Most important thing here is to just make it consistent. If we are to use `View` suffix, then we should do similar thing for Stack -> `StackView.Host` & `StackView.Screen`. So it's either: `Stack.Host`, `Stack.Screen`, `Tabs.Host`, `Tabs.Screen`, `Split.Host`, `Split.Column`, `Split.Inspector` OR `StackView.Host`, `StackView.Screen`, `TabsView.Host`, `TabsView.Screen`, `SplitView.Host`, `SplitView.Column`, `SplitView.Inspector` OR MAYBE (?) `Stack.HostView`, `Stack.ScreenView`, `Tabs.HostView`, `Tabs.ScreenView`, `Split.HostView`, `Split.ColumnView`, `Split.InspectorView` - **Update examples** - **Remove `view` substring from `SplitView` prefix used across symbols**
1 parent 2f02ab4 commit 952b7cd

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+370
-355
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 renamed to apps/src/tests/TestSplit/SplitBaseApp.tsx

Lines changed: 12 additions & 12 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 '..';
6-
import { SplitViewBaseConfig } from './helpers/types';
6+
import { SplitBaseConfig } from './helpers/types';
77

8-
const SplitViewBaseApp = ({ splitViewBaseConfig }: { splitViewBaseConfig: SplitViewBaseConfig }) => {
8+
const SplitBaseApp = ({ splitBaseConfig }: { splitBaseConfig: SplitBaseConfig }) => {
99
return (
10-
<SplitViewHost {...splitViewBaseConfig}>
11-
<SplitViewScreen.Column>
10+
<Split.Host {...splitBaseConfig}>
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

@@ -46,4 +46,4 @@ const styles = StyleSheet.create({
4646
}
4747
})
4848

49-
export default SplitViewBaseApp;
49+
export default SplitBaseApp;

apps/src/tests/TestSplitView/SplitViewOrientation.tsx renamed to apps/src/tests/TestSplit/SplitOrientation.tsx

Lines changed: 12 additions & 12 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';
5-
import { SplitViewBaseConfig } from './helpers/types';
5+
import { SplitBaseConfig } from './helpers/types';
66

7-
const SplitViewOrientation = ({ splitViewBaseConfig }: { splitViewBaseConfig: SplitViewBaseConfig }) => {
7+
const SplitOrientation = ({ splitBaseConfig }: { splitBaseConfig: SplitBaseConfig }) => {
88
return (
9-
<SplitViewHost {...splitViewBaseConfig} orientation='landscapeLeft'>
10-
<SplitViewScreen.Column>
9+
<Split.Host {...splitBaseConfig} 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

@@ -49,4 +49,4 @@ const styles = StyleSheet.create({
4949
}
5050
})
5151

52-
export default SplitViewOrientation;
52+
export default SplitOrientation;

apps/src/tests/TestSplitView/SplitViewPerfApp.tsx renamed to apps/src/tests/TestSplit/SplitPerfApp.tsx

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,10 @@ 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';
16-
import { SplitViewBaseConfig } from './helpers/types';
15+
import { SplitBaseConfig } from './helpers/types';
1716

1817
const { width } = Dimensions.get('window');
1918

@@ -79,32 +78,32 @@ const GridImage = ({ numColumns = 2 }: { numColumns?: number }) => {
7978
);
8079
};
8180

82-
const SplitViewPerfApp = ({
83-
splitViewBaseConfig,
81+
const SplitPerfApp = ({
82+
splitBaseConfig,
8483
}: {
85-
splitViewBaseConfig: SplitViewBaseConfig;
84+
splitBaseConfig: SplitBaseConfig;
8685
}) => {
8786
return (
88-
<SplitViewHost {...splitViewBaseConfig}>
89-
<SplitViewScreen.Column>
87+
<Split.Host {...splitBaseConfig}>
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

@@ -141,4 +140,4 @@ const styles = StyleSheet.create({
141140
},
142141
});
143142

144-
export default SplitViewPerfApp;
143+
export default SplitPerfApp;

apps/src/tests/TestSplitView/SplitViewPrimaryBackgroundStyle.tsx renamed to apps/src/tests/TestSplit/SplitPrimaryBackgroundStyle.tsx

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,16 @@ 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';
8-
import type { SplitViewPrimaryBackgroundStyle } from 'react-native-screens/experimental';
9-
import type { SplitViewBaseConfig } from './helpers/types';
7+
import type { SplitPrimaryBackgroundStyle } from 'react-native-screens/experimental';
8+
import type { SplitBaseConfig } from './helpers/types';
109
import { Colors } from '../../shared/styling/Colors';
1110

1211
const ConfigPanel = ({
1312
setPrimaryBgStyle,
1413
}: {
15-
setPrimaryBgStyle: (primaryBgStyle: SplitViewPrimaryBackgroundStyle) => void;
14+
setPrimaryBgStyle: (primaryBgStyle: SplitPrimaryBackgroundStyle) => void;
1615
}) => (
1716
<View style={styles.configPanel}>
1817
<Button
@@ -41,30 +40,30 @@ const ItemsPanel = () => {
4140
);
4241
};
4342

44-
const SplitViewPrimaryBackgroundStyleApp = ({
45-
splitViewBaseConfig,
43+
const SplitPrimaryBackgroundStyleApp = ({
44+
splitBaseConfig,
4645
}: {
47-
splitViewBaseConfig: SplitViewBaseConfig;
46+
splitBaseConfig: SplitBaseConfig;
4847
}) => {
4948
const [primaryBgStyle, setPrimaryBgStyle] =
50-
useState<SplitViewPrimaryBackgroundStyle>('default');
49+
useState<SplitPrimaryBackgroundStyle>('default');
5150

5251
return (
53-
<SplitViewHost
54-
{...splitViewBaseConfig}
52+
<Split.Host
53+
{...splitBaseConfig}
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

@@ -96,4 +95,4 @@ const styles = StyleSheet.create({
9695
},
9796
});
9897

99-
export default SplitViewPrimaryBackgroundStyleApp;
98+
export default SplitPrimaryBackgroundStyleApp;

‎apps/src/tests/TestSplit/SplitWithNativeStack/SplitWithNativeStackBase.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import { Split } from 'react-native-screens/experimental';
3+
import { NativeStackNavigatorComponent } from '../helpers';
4+
import { SplitBaseConfig } from '../helpers/types';
5+
6+
export const SplitWithNativeStackBase = ({ splitBaseConfig }: { splitBaseConfig: SplitBaseConfig }) => {
7+
return (
8+
<Split.Host {...splitBaseConfig}>
9+
<Split.Column>
10+
<NativeStackNavigatorComponent />
11+
</Split.Column>
12+
<Split.Column>
13+
<NativeStackNavigatorComponent />
14+
</Split.Column>
15+
<Split.Column>
16+
<NativeStackNavigatorComponent />
17+
</Split.Column>
18+
</Split.Host>
19+
);
20+
}

apps/src/tests/TestSplitView/SplitViewWithNativeStack/SplitViewWithNativeStackContainedModal.tsx renamed to apps/src/tests/TestSplit/SplitWithNativeStack/SplitWithNativeStackContainedModal.tsx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
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';
66
import Colors from '../../../shared/styling/Colors';
7-
import { SplitViewBaseConfig } from '../helpers/types';
7+
import { SplitBaseConfig } from '../helpers/types';
88

99
const ScreenOne = ({ navigation }: ScreenOneProps) => (
1010
<View style={styles.container}>
@@ -30,16 +30,16 @@ const ScreenThree = () => (
3030
</View>
3131
)
3232

33-
export const SplitViewWithNativeStackContainedModal = ({ splitViewBaseConfig }: { splitViewBaseConfig: SplitViewBaseConfig }) => {
33+
export const SplitWithNativeStackContainedModal = ({ splitBaseConfig }: { splitBaseConfig: SplitBaseConfig }) => {
3434
return (
35-
<SplitViewHost {...splitViewBaseConfig}>
36-
<SplitViewScreen.Column>
35+
<Split.Host {...splitBaseConfig}>
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

0 commit comments

Comments
 (0)