feat: Add more examples

Author: LukasMod

example/src/Navigation.tsx

@@ -4,9 +4,9 @@ import ExampleInitialSetScreen from './screens/ExampleInitialSet';
 import ExamplesScreen from './screens/Examples';
 
 export const RootStack = createNativeStackNavigator({
-  initialRouteName: 'SegmentedControlExample',
+  initialRouteName: 'Examples',
   screens: {
-    SegmentedControlExample: {
+    Examples: {
       screen: ExamplesScreen,
       options: () => ({
         title: 'Examples',
@@ -15,7 +15,7 @@ export const RootStack = createNativeStackNavigator({
     ExampleInitialSet: {
       screen: ExampleInitialSetScreen,
       options: () => ({
-        title: 'Example Initial Based on Route',
+        title: 'Preselected option',
       }),
     },
   },

example/src/examples/Align.tsx

@@ -37,7 +37,7 @@ export default function Align({ variant }: AlignProps) {
           { value: 'First', label: 'First' },
           { value: 'Second', label: 'Second' },
         ]}
-        defaultOption="Second"
+        defaultOption="First"
         variant={variant}
         align="center"
         containerHeight={28}

example/src/examples/DayOfTime.tsx

@@ -64,7 +64,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-
   containerStyle: {
     backgroundColor: 'rgba(59, 130, 246, 0.08)',
   },

example/src/examples/DynamicLabels.tsx

@@ -0,0 +1,97 @@
+import {
+  MultiswitchController,
+  type ControllerVariant,
+} from 'react-native-multiswitch-controller';
+import ExampleWrapper from './ExampleWrapper';
+import { Button, StyleSheet, View } from 'react-native';
+import { useState } from 'react';
+
+const mockLanguages: Record<
+  'en' | 'de',
+  { food: string; drink: string; dessert: string }
+> = {
+  en: {
+    food: 'Butterfly',
+    drink: 'Cheese',
+    dessert: 'Lettuce',
+  },
+  de: {
+    food: 'Schmetterling',
+    drink: 'Käse',
+    dessert: 'Salat',
+  },
+};
+
+type DynamicLabelsProps = {
+  variant: ControllerVariant;
+};
+
+export default function DynamicLabels({ variant }: DynamicLabelsProps) {
+  const [language, setLanguage] = useState<keyof typeof mockLanguages>('en');
+
+  return (
+    <ExampleWrapper title="Adjust labels width dynamically">
+      <MultiswitchController<'food' | 'drink' | 'dessert'>
+        options={[
+          { value: 'food', label: mockLanguages[language].food },
+          { value: 'drink', label: mockLanguages[language].drink },
+          { value: 'dessert', label: mockLanguages[language].dessert },
+        ]}
+        variant={variant}
+        defaultOption="food"
+        containerHeight={48}
+        optionHeight={36}
+        optionGap={16}
+        inactiveTextStyle={styles.inactiveTextStyle}
+        containerStyle={styles.containerStyle}
+        activeOptionContainerStyle={
+          variant === 'tabs'
+            ? styles.activeOptionContainerStyleTabs
+            : styles.activeOptionContainerStyleSegmentedControl
+        }
+        activeTextStyle={
+          variant === 'tabs'
+            ? styles.activeTextStyleTabs
+            : styles.activeTextStyleSegmentedControl
+        }
+      />
+      <View style={styles.buttonsContainer}>
+        <Button
+          title="Toggle language"
+          onPress={() => {
+            setLanguage(language === 'en' ? 'de' : 'en');
+          }}
+        />
+      </View>
+    </ExampleWrapper>
+  );
+}
+
+const styles = StyleSheet.create({
+  buttonsContainer: {
+    flexDirection: 'row',
+    gap: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  inactiveTextStyle: {
+    fontSize: 12,
+    color: 'rgb(30, 64, 175)',
+  },
+  containerStyle: {
+    backgroundColor: 'rgba(30, 64, 175, 0.08)',
+  },
+  activeOptionContainerStyleTabs: {
+    backgroundColor: 'rgb(30, 64, 175)',
+    height: 10,
+  },
+  activeOptionContainerStyleSegmentedControl: {
+    backgroundColor: 'rgb(30, 64, 175)',
+  },
+  activeTextStyleTabs: {
+    color: 'rgb(30, 64, 175)',
+  },
+  activeTextStyleSegmentedControl: {
+    color: '#fff',
+  },
+});

example/src/screens/ExampleInitialSet.tsx

@@ -1,104 +1,50 @@
-import { LinearGradient } from 'expo-linear-gradient';
-import { Button, StyleSheet, Text, View } from 'react-native';
+import { Button } from 'react-native';
 import { MultiswitchController } from 'react-native-multiswitch-controller';
 
 import {
   useNavigation,
   type StaticScreenProps,
 } from '@react-navigation/native';
-import type { TimeOfDay } from '../types';
+import ExampleWrapper from '../examples/ExampleWrapper';
+import type { FavoriteDrink } from '../types';
 
 type ExampleInitialSetScreenProps = StaticScreenProps<{
-  timeOfDay: TimeOfDay;
+  favoriteDrink: FavoriteDrink;
 }>;
 
 export default function ExampleInitialSetScreen({
   route,
 }: ExampleInitialSetScreenProps) {
-  const { timeOfDay } = route.params;
+  const { favoriteDrink } = route.params;
 
   const navigation = useNavigation();
 
   return (
-    <LinearGradient colors={['#FFF5E6', '#FFE4B5']} style={styles.container}>
-      <View style={styles.exampleContainer}>
-        <Text style={styles.title}>Time of Day</Text>
-        <MultiswitchController
-          options={[
-            { value: 'morning', label: '🌅' },
-            { value: 'afternoon', label: '☀️' },
-            { value: 'evening', label: '🌇' },
-            { value: 'night', label: '🌙' },
-          ]}
-          defaultOption="morning"
-          variant="tabs"
-          onChangeOption={(value) => {
-            console.log(
-              'State ExampleInitialSetScreen onChangeOption changed:',
-              value
-            );
-          }}
-          styleProps={{
-            inactiveBackgroundColor: 'rgba(59, 130, 246, 0.08)',
-            activeBackgroundColor: 'rgb(37, 99, 235)',
-          }}
-        />
-        <Button
-          title="Go to SegmentedControlExample"
-          onPress={() => {
-            navigation.navigate(
-              'SegmentedControlExample',
-              {
-                timeOfDay: 'evening',
-              },
-              { pop: true }
-            );
-          }}
-        />
-      </View>
-      <Text style={styles.title}>RERENDER TEST {timeOfDay}</Text>
-    </LinearGradient>
+    <ExampleWrapper title={`Preselected option: ${favoriteDrink}`}>
+      <MultiswitchController<FavoriteDrink>
+        variant="tabs"
+        defaultOption={favoriteDrink}
+        options={[
+          { value: 'water', label: '💧' },
+          { value: 'coffee', label: '☕️' },
+          { value: 'tea', label: '🍵' },
+          { value: 'juice', label: '🍹' },
+          { value: 'soda', label: '🥤' },
+        ]}
+        optionGap={10}
+      />
+      <Button
+        title="Back with new value for first example: 'evening'"
+        onPress={() => {
+          navigation.navigate(
+            'Examples',
+            {
+              timeOfDay: 'evening',
+            },
+            { pop: true }
+          );
+        }}
+      />
+    </ExampleWrapper>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    gap: 16,
-    padding: 10,
-  },
-  title: {
-    fontSize: 18,
-    padding: 10,
-  },
-  selectedText: {
-    fontSize: 16,
-    padding: 4,
-    alignSelf: 'center',
-  },
-  bigContainer: {
-    width: '100%',
-    marginBottom: 20,
-  },
-  exampleContainer: {},
-  smallText: {
-    fontSize: 12,
-  },
-  stateReader: {
-    marginTop: 20,
-    padding: 10,
-    backgroundColor: 'rgba(255, 255, 255, 0.8)',
-    borderRadius: 8,
-  },
-  subtitle: {
-    fontSize: 14,
-    color: '#666',
-    marginTop: 5,
-  },
-  button: {
-    fontSize: 14,
-    color: '#007AFF',
-    marginTop: 10,
-    textDecorationLine: 'underline',
-  },
-});

example/src/screens/Examples.tsx

@@ -14,6 +14,7 @@ import DayOfTime from '../examples/DayOfTime';
 import LongLabel from '../examples/LongLabel';
 import Scrollable from '../examples/Scrollable';
 import type { TimeOfDay } from '../types';
+import DynamicLabels from '../examples/DynamicLabels';
 
 type ExamplesScreenProps = StaticScreenProps<{
   timeOfDay?: TimeOfDay;
@@ -72,7 +73,6 @@ export default function ExamplesScreen({ route }: ExamplesScreenProps) {
 
   // onChangeOptionHandler - after animation is done
   const onChangeOptionHandler = useCallback((value: TimeOfDay) => {
-    console.log('TEST onChangeOptionHandler - after animation is done', value);
     setTimeOfDay(value);
   }, []);
 
@@ -90,6 +90,15 @@ export default function ExamplesScreen({ route }: ExamplesScreenProps) {
       <Align variant={variant} key={`Align-${variant}`} />
       <LongLabel variant={variant} key={`LongLabel-${variant}`} />
       <Scrollable variant={variant} key={`Scrollable-${variant}`} />
+      <DynamicLabels variant={variant} key={`DynamicLabels-${variant}`} />
+      <Button
+        title="Navigate with preselected option"
+        onPress={() => {
+          navigation.navigate('ExampleInitialSet', {
+            favoriteDrink: 'juice',
+          });
+        }}
+      />
     </LinearGradient>
   );
 }

example/src/types.ts

@@ -1 +1,3 @@
 export type TimeOfDay = 'morning' | 'afternoon' | 'evening' | 'night';
+
+export type FavoriteDrink = 'water' | 'coffee' | 'tea' | 'juice' | 'soda';