Skip to content

Commit 0d57e88

Browse files
t0maborot0maboro
committed
WIP
1 parent 7fb44e0 commit 0d57e88

14 files changed

+569
-31
lines changed

‎apps/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,5 @@ enableFreeze(true);
77

88
export default function App() {
99
// return <Example />;
10-
return <Test.TestBottomTabs />;
10+
return <Test.TestSplitView />;
1111
}

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

Lines changed: 7 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,23 @@
11
import React from 'react';
22
import { StyleSheet, Text, View } from 'react-native';
33
import { SplitViewHost, SplitViewScreen } from 'react-native-screens';
4-
import PressableWithFeedback from '../../shared/PressableWithFeedback';
54
import { Colors } from '../../shared/styling/Colors';
5+
import { TestBottomTabs, TestScreenStack } from '..';
6+
import { SplitViewBaseConfig } from './helpers/types';
67

7-
const TestButton = ({ onPress }) => {
8+
const SplitViewBaseApp = ({ splitViewBaseConfig }: { splitViewBaseConfig: SplitViewBaseConfig }) => {
89
return (
9-
<PressableWithFeedback
10-
onPress={onPress}
11-
style={styles.button}>
12-
<Text style={styles.text}>Touch me</Text>
13-
</PressableWithFeedback>
14-
)
15-
}
16-
17-
const SplitViewBaseApp = () => {
18-
const [showSecondaryToggleButton, setShowSecondaryToggleButton] = React.useState(false);
19-
20-
const onPress = () => {
21-
setShowSecondaryToggleButton((prev) => !prev);
22-
}
23-
24-
return (
25-
<SplitViewHost columnMetrics={{preferredSupplementaryColumnWidth: 250}} displayMode='secondaryOnly' presentsWithGesture={true} showSecondaryToggleButton={showSecondaryToggleButton} splitBehavior='tile'>
10+
<SplitViewHost {...splitViewBaseConfig}>
2611
<SplitViewScreen.Column>
27-
<View style={[styles.container, { backgroundColor: Colors.RedDark100 }]}>
12+
<View style={[styles.container, { backgroundColor: Colors.White }]}>
2813
<Text style={styles.text}>Primary column</Text>
2914
</View>
3015
</SplitViewScreen.Column>
3116
<SplitViewScreen.Column>
32-
<View style={[styles.container, { backgroundColor: Colors.YellowDark100 }]}>
33-
<Text style={styles.text}>Supplementary column</Text>
34-
</View>
17+
<TestBottomTabs />
3518
</SplitViewScreen.Column>
3619
<SplitViewScreen.Column>
37-
<View style={[styles.container, { backgroundColor: Colors.White }]}>
38-
<Text style={styles.text}>Secondary column</Text>
39-
<TestButton onPress={onPress} />
40-
</View>
20+
<TestScreenStack />
4121
</SplitViewScreen.Column>
4222
</SplitViewHost>
4323
);

‎apps/src/tests/TestSplitView/SplitViewWithNativeStack/SplitViewWithNativeStackBase.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 { SplitViewHost, SplitViewScreen } from 'react-native-screens';
3+
import { NativeStackNavigatorComponent } from '../helpers';
4+
import { SplitViewBaseConfig } from '../helpers/types';
5+
6+
export const SplitViewWithNativeStackBase = ({ splitViewBaseConfig }: { splitViewBaseConfig: SplitViewBaseConfig }) => {
7+
return (
8+
<SplitViewHost {...splitViewBaseConfig}>
9+
<SplitViewScreen.Column>
10+
<NativeStackNavigatorComponent />
11+
</SplitViewScreen.Column>
12+
<SplitViewScreen.Column>
13+
<NativeStackNavigatorComponent />
14+
</SplitViewScreen.Column>
15+
<SplitViewScreen.Column>
16+
<NativeStackNavigatorComponent />
17+
</SplitViewScreen.Column>
18+
</SplitViewHost>
19+
);
20+
}

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

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React from 'react';
2+
import { SplitViewHost, SplitViewScreen } from 'react-native-screens';
3+
import { NativeStackNavigatorComponent, type ScreenOneProps } from '../helpers';
4+
import { StyleSheet, Text, View } from 'react-native';
5+
import PressableWithFeedback from '../../../shared/PressableWithFeedback';
6+
import Colors from '../../../shared/styling/Colors';
7+
import { SplitViewBaseConfig } from '../helpers/types';
8+
9+
const ScreenOne = ({ navigation }: ScreenOneProps) => (
10+
<View style={styles.container}>
11+
<Text style={styles.text}>ScreenOne</Text>
12+
<PressableWithFeedback style={styles.pressable} onPress={() => navigation.navigate('ScreenTwo')}>
13+
<Text style={styles.text}>Show contained modal</Text>
14+
</PressableWithFeedback>
15+
<PressableWithFeedback style={styles.pressable} onPress={() => navigation.navigate('ScreenThree')}>
16+
<Text style={styles.text}>Show contained transparent modal</Text>
17+
</PressableWithFeedback>
18+
</View>
19+
)
20+
21+
const ScreenTwo = () => (
22+
<View style={styles.container}>
23+
<Text style={styles.text}>ScreenTwo</Text>
24+
</View>
25+
)
26+
27+
const ScreenThree = () => (
28+
<View style={[styles.container, {backgroundColor: Colors.BlueDark100, opacity: 0.5}]}>
29+
<Text style={styles.text}>ScreenOne</Text>
30+
</View>
31+
)
32+
33+
export const SplitViewWithNativeStackContainedModal = ({ splitViewBaseConfig }: { splitViewBaseConfig: SplitViewBaseConfig }) => {
34+
return (
35+
<SplitViewHost {...splitViewBaseConfig}>
36+
<SplitViewScreen.Column>
37+
<NativeStackNavigatorComponent />
38+
</SplitViewScreen.Column>
39+
<SplitViewScreen.Column>
40+
<NativeStackNavigatorComponent />
41+
</SplitViewScreen.Column>
42+
<SplitViewScreen.Column>
43+
<NativeStackNavigatorComponent
44+
CustomScreenOne={ScreenOne}
45+
customScreenOneName='ScreenOne'
46+
CustomScreenTwo={ScreenTwo}
47+
customScreenTwoName='ScreenTwo'
48+
customScreenTwoNavigationOptions={{ presentation: 'containedModal' }}
49+
CustomScreenThree={ScreenThree}
50+
customScreenThreeName='ScreenThree'
51+
customScreenThreeNavigationOptions={{ presentation: 'containedTransparentModal' }}
52+
/>
53+
</SplitViewScreen.Column>
54+
</SplitViewHost>
55+
);
56+
}
57+
58+
const styles = StyleSheet.create({
59+
container: {
60+
flex: 1,
61+
justifyContent: 'center',
62+
alignItems: 'center'
63+
},
64+
text: {
65+
fontSize: 24
66+
},
67+
pressable: {
68+
backgroundColor: Colors.White,
69+
borderWidth: 1,
70+
borderColor: Colors.BlueDark140
71+
}
72+
})
73+

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

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import React from 'react';
2+
import { SplitViewHost, SplitViewScreen } from 'react-native-screens';
3+
import { NativeStackNavigatorComponent } from '../helpers';
4+
import { Image, View } from 'react-native';
5+
import Colors from '../../../shared/styling/Colors';
6+
import { SplitViewBaseConfig } from '../helpers/types';
7+
8+
const HeaderLeft = () => (
9+
<View style={{ width: 36, height: 36, backgroundColor: Colors.RedDark100 }} />
10+
)
11+
12+
const HeaderRight = () => (
13+
<View style={{ width: 36, height: 36, backgroundColor: Colors.GreenDark100 }} />
14+
)
15+
16+
export const SplitViewWithNativeStackHeader = ({ splitViewBaseConfig }: { splitViewBaseConfig: SplitViewBaseConfig }) => {
17+
return (
18+
<SplitViewHost {...splitViewBaseConfig}>
19+
<SplitViewScreen.Column>
20+
<NativeStackNavigatorComponent
21+
customScreenOneNavigationOptions={{ headerShown: false }}
22+
customScreenTwoNavigationOptions={{
23+
headerShown: true,
24+
headerBackVisible: true,
25+
headerBackTitle: 'Custom back',
26+
headerBackTitleStyle: {
27+
fontSize: 14,
28+
fontFamily: 'Georgia',
29+
},
30+
headerTitleStyle: {
31+
color: 'blue',
32+
fontSize: 22,
33+
fontFamily: 'Georgia',
34+
fontWeight: 300,
35+
},
36+
}}
37+
customScreenThreeNavigationOptions={{
38+
headerShown: true,
39+
headerBackImageSource: require('../../../../assets/backButton.png')
40+
}}
41+
/>
42+
</SplitViewScreen.Column>
43+
<SplitViewScreen.Column>
44+
<NativeStackNavigatorComponent
45+
customScreenOneNavigationOptions={{ headerTransparent: true }}
46+
customScreenTwoNavigationOptions={{
47+
headerTransparent: true,
48+
headerBlurEffect: 'systemMaterialDark'
49+
}}
50+
customScreenThreeNavigationOptions={{
51+
headerBackground: () => (
52+
<Image src='https://fastly.picsum.photos/id/483/400/200.jpg?hmac=wfMEmBoegvtws3gjbDFsepcn5zWMyq94Q3ZeKWRQn9I' width={400} height={200} />
53+
),
54+
}}
55+
/>
56+
</SplitViewScreen.Column>
57+
<SplitViewScreen.Column>
58+
<NativeStackNavigatorComponent
59+
customScreenOneNavigationOptions={{ headerTintColor: Colors.RedDark100, headerTitle: "Custom header title" }}
60+
customScreenTwoNavigationOptions={{
61+
headerSearchBarOptions: {
62+
onCancelButtonPress: () => {
63+
console.log('cancel button press');
64+
},
65+
},
66+
}}
67+
customScreenThreeNavigationOptions={{
68+
headerLeft: HeaderLeft,
69+
headerRight: HeaderRight,
70+
}}
71+
/>
72+
</SplitViewScreen.Column>
73+
</SplitViewHost>
74+
);
75+
}

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

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React from 'react';
2+
import { SplitViewHost, SplitViewScreen } from 'react-native-screens';
3+
import { NativeStackNavigatorComponent, type ScreenOneProps } from '../helpers';
4+
import { StyleSheet, Text, View } from 'react-native';
5+
import PressableWithFeedback from '../../../shared/PressableWithFeedback';
6+
import Colors from '../../../shared/styling/Colors';
7+
import { SplitViewBaseConfig } from '../helpers/types';
8+
9+
const ScreenOne = ({ navigation }: ScreenOneProps) => (
10+
<View style={styles.container}>
11+
<Text style={styles.text}>ScreenOne</Text>
12+
<PressableWithFeedback style={styles.pressable} onPress={() => navigation.navigate('ScreenTwo')}>
13+
<Text style={styles.text}>Show modal</Text>
14+
</PressableWithFeedback>
15+
<PressableWithFeedback style={styles.pressable} onPress={() => navigation.navigate('ScreenThree')}>
16+
<Text style={styles.text}>Show transparent modal</Text>
17+
</PressableWithFeedback>
18+
</View>
19+
)
20+
21+
const ScreenTwo = () => (
22+
<View style={styles.container}>
23+
<Text style={styles.text}>ScreenTwo</Text>
24+
</View>
25+
)
26+
27+
const ScreenThree = () => (
28+
<View style={[styles.container, {backgroundColor: Colors.BlueDark100, opacity: 0.5}]}>
29+
<Text style={styles.text}>ScreenOne</Text>
30+
</View>
31+
)
32+
33+
export const SplitViewWithNativeStackModal = ({ splitViewBaseConfig }: { splitViewBaseConfig: SplitViewBaseConfig }) => {
34+
return (
35+
<SplitViewHost {...splitViewBaseConfig}>
36+
<SplitViewScreen.Column>
37+
<NativeStackNavigatorComponent />
38+
</SplitViewScreen.Column>
39+
<SplitViewScreen.Column>
40+
<NativeStackNavigatorComponent />
41+
</SplitViewScreen.Column>
42+
<SplitViewScreen.Column>
43+
<NativeStackNavigatorComponent
44+
CustomScreenOne={ScreenOne}
45+
customScreenOneName='ScreenOne'
46+
CustomScreenTwo={ScreenTwo}
47+
customScreenTwoName='ScreenTwo'
48+
customScreenTwoNavigationOptions={{ presentation: 'modal' }}
49+
CustomScreenThree={ScreenThree}
50+
customScreenThreeName='ScreenThree'
51+
customScreenThreeNavigationOptions={{ presentation: 'transparentModal' }}
52+
/>
53+
</SplitViewScreen.Column>
54+
</SplitViewHost>
55+
);
56+
}
57+
58+
const styles = StyleSheet.create({
59+
container: {
60+
flex: 1,
61+
justifyContent: 'center',
62+
alignItems: 'center'
63+
},
64+
text: {
65+
fontSize: 24
66+
},
67+
pressable: {
68+
backgroundColor: Colors.White,
69+
borderWidth: 1,
70+
borderColor: Colors.BlueDark140
71+
}
72+
})
73+

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

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React from 'react';
2+
import { SplitViewHost, SplitViewScreen } from 'react-native-screens';
3+
import { NativeStackNavigatorComponent, type ScreenOneProps } from '../helpers';
4+
import { StyleSheet, Text, View } from 'react-native';
5+
import PressableWithFeedback from '../../../shared/PressableWithFeedback';
6+
import Colors from '../../../shared/styling/Colors';
7+
import { SplitViewBaseConfig } from '../helpers/types';
8+
9+
const ScreenOne = ({ navigation }: ScreenOneProps) => (
10+
<View style={styles.container}>
11+
<Text style={styles.text}>ScreenOne</Text>
12+
<PressableWithFeedback style={styles.pressable} onPress={() => navigation.navigate('ScreenTwo')}>
13+
<Text style={styles.text}>Show full screen modal</Text>
14+
</PressableWithFeedback>
15+
<PressableWithFeedback style={styles.pressable} onPress={() => navigation.navigate('ScreenThree')}>
16+
<Text style={styles.text}>Show form sheet</Text>
17+
</PressableWithFeedback>
18+
</View>
19+
)
20+
21+
const ScreenTwo = () => (
22+
<View style={styles.container}>
23+
<Text style={styles.text}>ScreenTwo</Text>
24+
</View>
25+
)
26+
27+
const ScreenThree = () => (
28+
<View style={[styles.container, { backgroundColor: Colors.BlueDark100, opacity: 0.5 }]}>
29+
<Text style={styles.text}>ScreenOne</Text>
30+
</View>
31+
)
32+
33+
export const SplitViewWithNativeStackPresentation = ({ splitViewBaseConfig }: { splitViewBaseConfig: SplitViewBaseConfig }) => {
34+
return (
35+
<SplitViewHost {...splitViewBaseConfig}>
36+
<SplitViewScreen.Column>
37+
<NativeStackNavigatorComponent />
38+
</SplitViewScreen.Column>
39+
<SplitViewScreen.Column>
40+
<NativeStackNavigatorComponent />
41+
</SplitViewScreen.Column>
42+
<SplitViewScreen.Column>
43+
<NativeStackNavigatorComponent
44+
CustomScreenOne={ScreenOne}
45+
customScreenOneName='ScreenOne'
46+
CustomScreenTwo={ScreenTwo}
47+
customScreenTwoName='ScreenTwo'
48+
customScreenTwoNavigationOptions={{ presentation: 'fullScreenModal' }}
49+
CustomScreenThree={ScreenThree}
50+
customScreenThreeName='ScreenThree'
51+
customScreenThreeNavigationOptions={{ presentation: 'formSheet' }}
52+
/>
53+
</SplitViewScreen.Column>
54+
</SplitViewHost>
55+
);
56+
}
57+
58+
const styles = StyleSheet.create({
59+
container: {
60+
flex: 1,
61+
justifyContent: 'center',
62+
alignItems: 'center'
63+
},
64+
text: {
65+
fontSize: 24
66+
},
67+
pressable: {
68+
backgroundColor: Colors.White,
69+
borderWidth: 1,
70+
borderColor: Colors.BlueDark140
71+
}
72+
})
73+

0 commit comments

Comments
 (0)