Skip to content

Commit 7a4f7a5

Browse files
LukasModLukasMod
committed
feat: Add navigation to example
1 parent 4ae8b29 commit 7a4f7a5

6 files changed

Lines changed: 479 additions & 210 deletions

File tree

‎example/package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,17 @@
1010
},
1111
"dependencies": {
1212
"@expo/metro-runtime": "~5.0.4",
13+
"@react-navigation/native": "^7.1.16",
14+
"@react-navigation/native-stack": "^7.3.23",
1315
"expo": "~53.0.9",
1416
"expo-linear-gradient": "^14.1.5",
1517
"expo-status-bar": "~2.2.3",
1618
"react": "19.0.0",
1719
"react-dom": "19.0.0",
1820
"react-native": "0.79.2",
1921
"react-native-reanimated": "~3.17.4",
22+
"react-native-safe-area-context": "5.4.0",
23+
"react-native-screens": "~4.11.1",
2024
"react-native-web": "~0.20.0"
2125
},
2226
"devDependencies": {

‎example/src/App.tsx‎

Lines changed: 2 additions & 207 deletions
Original file line numberDiff line numberDiff line change
@@ -1,210 +1,5 @@
1-
import { View, StyleSheet, Text } from 'react-native';
2-
import type { ColorValue } from 'react-native';
3-
import { LinearGradient } from 'expo-linear-gradient';
4-
import {
5-
PillSwitch,
6-
useControlListState,
7-
} from 'react-native-multiswitch-controller';
1+
import Navigation from './Navigation';
82

93
export default function App() {
10-
const controlListState0 = useControlListState({
11-
options: [
12-
{ value: 'morning', label: '🌅' },
13-
{ value: 'afternoon', label: '☀️' },
14-
{ value: 'evening', label: '🌇' },
15-
{ value: 'night', label: '🌙' },
16-
],
17-
defaultOption: 'morning',
18-
variant: 'segmentedControl',
19-
});
20-
21-
const getGradientColors = (timeOfDay: string): [ColorValue, ColorValue] => {
22-
switch (timeOfDay) {
23-
case 'morning':
24-
return ['#FFF5E6', '#FFE4B5'];
25-
case 'afternoon':
26-
return ['#E6F3FF', '#B3D9FF'];
27-
case 'evening':
28-
return ['#FFE6E0', '#FFD6CC'];
29-
case 'night':
30-
return ['#E6E6FA', '#D8D8F6'];
31-
default:
32-
return ['#FFFFFF', '#F8F8F8'];
33-
}
34-
};
35-
36-
const controlListState1 = useControlListState({
37-
options: [
38-
{ value: 'First', label: 'First' },
39-
{ value: 'Second', label: 'Second' },
40-
{ value: 'Third', label: 'Third' },
41-
{ value: 'Fourth', label: 'Fourth' },
42-
{ value: 'Fifth', label: 'Fifth' },
43-
{ value: 'Sixth', label: 'Sixth' },
44-
{ value: 'Seventh', label: 'Seventh' },
45-
{ value: 'Eighth', label: 'Eighth' },
46-
{ value: 'Ninth', label: 'Ninth' },
47-
{ value: 'Tenth', label: 'Tenth' },
48-
{ value: 'Eleventh', label: 'Eleventh' },
49-
{ value: 'Twelfth', label: 'Twelfth' },
50-
{ value: 'Thirteenth', label: 'Thirteenth' },
51-
{ value: 'Fourteenth', label: 'Fourteenth' },
52-
{ value: 'Fifteenth', label: 'Fifteenth' },
53-
{ value: 'Sixteenth', label: 'Sixteenth' },
54-
],
55-
defaultOption: 'First',
56-
variant: 'segmentedControl',
57-
});
58-
const controlListState2 = useControlListState({
59-
options: [
60-
{ value: 'First', label: 'First' },
61-
{ value: 'Second', label: 'Second' },
62-
],
63-
defaultOption: 'First',
64-
variant: 'segmentedControl',
65-
});
66-
const controlListState3 = useControlListState({
67-
options: [
68-
{ value: 'First', label: 'First' },
69-
{ value: 'Second', label: 'Second' },
70-
],
71-
defaultOption: 'Second',
72-
variant: 'segmentedControl',
73-
});
74-
const controlListState4 = useControlListState({
75-
options: [
76-
{ value: 'First', label: 'First is a very long label' },
77-
{ value: 'Second', label: 'Second is short' },
78-
],
79-
defaultOption: 'First',
80-
variant: 'segmentedControl',
81-
});
82-
83-
const isTestMode = false;
84-
85-
return (
86-
<LinearGradient
87-
colors={getGradientColors(controlListState0.activeOption)}
88-
style={styles.container}
89-
>
90-
<View style={styles.exampleContainer}>
91-
<Text style={styles.title}>Time of Day</Text>
92-
<PillSwitch
93-
controlListState={controlListState0}
94-
inactiveBackgroundColor="rgba(59, 130, 246, 0.08)"
95-
activeBackgroundColor="rgb(37, 99, 235)"
96-
inactiveTextColor="rgb(37, 99, 235)"
97-
activeTextColor="rgb(253, 230, 138)"
98-
/>
99-
{isTestMode && (
100-
<Text style={styles.selectedText}>
101-
Selected: {controlListState3.activeOption}
102-
</Text>
103-
)}
104-
</View>
105-
106-
<View style={styles.exampleContainer}>
107-
<Text style={styles.title}>Align to left, center or right</Text>
108-
<PillSwitch
109-
controlListState={controlListState2}
110-
align="left"
111-
inactiveBackgroundColor="rgb(21, 87, 21)"
112-
activeBackgroundColor="rgb(60, 180, 20)"
113-
inactiveTextColor="rgb(208, 249, 205)"
114-
/>
115-
<PillSwitch
116-
controlListState={controlListState2}
117-
align="center"
118-
inactiveBackgroundColor="rgba(220, 38, 38, 0.08)"
119-
activeBackgroundColor="rgb(185, 28, 28)"
120-
inactiveTextColor="rgb(185, 28, 28)"
121-
/>
122-
<PillSwitch
123-
controlListState={controlListState2}
124-
align="right"
125-
inactiveBackgroundColor="rgba(205, 197, 40, 0.08)"
126-
activeBackgroundColor="rgb(180, 170, 20)"
127-
inactiveTextColor="rgb(180, 170, 20)"
128-
/>
129-
{isTestMode && (
130-
<Text style={styles.selectedText}>
131-
Selected: {controlListState2.activeOption}
132-
</Text>
133-
)}
134-
</View>
135-
136-
<View style={styles.exampleContainer}>
137-
<Text style={styles.title}>Set initial value</Text>
138-
<PillSwitch
139-
controlListState={controlListState3}
140-
inactiveBackgroundColor="rgba(59, 130, 246, 0.08)"
141-
activeBackgroundColor="rgb(37, 99, 235)"
142-
inactiveTextColor="rgb(37, 99, 235)"
143-
activeTextColor="rgb(253, 230, 138)"
144-
/>
145-
{isTestMode && (
146-
<Text style={styles.selectedText}>
147-
Selected: {controlListState3.activeOption}
148-
</Text>
149-
)}
150-
</View>
151-
152-
<View style={styles.exampleContainer}>
153-
<Text style={styles.title}>Use different width for labels</Text>
154-
<PillSwitch
155-
controlListState={controlListState4}
156-
containerHeight={48}
157-
itemHeight={36}
158-
inactiveBackgroundColor="rgba(30, 64, 175, 0.08)"
159-
activeBackgroundColor="rgb(30, 64, 175)"
160-
inactiveTextColor="rgb(30, 64, 175)"
161-
/>
162-
{isTestMode && (
163-
<Text style={styles.selectedText}>
164-
Selected: {controlListState4.activeOption}
165-
</Text>
166-
)}
167-
</View>
168-
169-
<View style={styles.exampleContainer}>
170-
<Text style={styles.title}>
171-
Scrollable if there is not enough width
172-
</Text>
173-
<PillSwitch
174-
controlListState={controlListState1}
175-
customItemStyle={{}}
176-
containerHeight={54}
177-
itemHeight={48}
178-
/>
179-
{isTestMode && (
180-
<Text style={styles.selectedText}>
181-
Selected: {controlListState1.activeOption}
182-
</Text>
183-
)}
184-
</View>
185-
</LinearGradient>
186-
);
4+
return <Navigation />;
1875
}
188-
189-
const styles = StyleSheet.create({
190-
container: {
191-
flex: 1,
192-
justifyContent: 'center',
193-
gap: 16,
194-
padding: 10,
195-
},
196-
title: {
197-
fontSize: 18,
198-
padding: 10,
199-
},
200-
selectedText: {
201-
fontSize: 16,
202-
padding: 4,
203-
alignSelf: 'center',
204-
},
205-
bigContainer: {
206-
width: '100%',
207-
marginBottom: 20,
208-
},
209-
exampleContainer: {},
210-
});

‎example/src/Navigation.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { createStaticNavigation } from '@react-navigation/native';
2+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
3+
import ExamplePillsScreen from './screens/ExamplePills';
4+
5+
const RootStack = createNativeStackNavigator({
6+
initialRouteName: 'ExamplePills',
7+
screens: {
8+
ExamplePills: {
9+
screen: ExamplePillsScreen,
10+
options: {
11+
title: 'Example Pills',
12+
},
13+
},
14+
},
15+
});
16+
17+
const StaticNavigation = createStaticNavigation(RootStack);
18+
19+
export default function Navigation() {
20+
return <StaticNavigation />;
21+
}

0 commit comments

Comments
 (0)