refactor: clean up

Author: LukasMod

README.md

@@ -129,14 +129,14 @@ The main switch component.
 <PillSwitch
   align?: 'left' | 'right' | 'center';
   onPressCallback?: (value: TValue) => void;
-  customItemStyle?: ViewStyle;
+  inactiveOptionContainerStyle?: ViewStyle;
   containerHeight?: number;
-  itemHeight?: number;
+  optionHeight?: number;
   inactiveBackgroundColor?: string;
   activeBackgroundColor?: string;
   inactiveTextColor?: string;
   activeTextColor?: string;
-  customTextStyle?: TextStyle;
+  inactiveTextStyle?: TextStyle;
 />
 ```
 

example/src/examples/Align.tsx

@@ -1,9 +1,9 @@
-/* eslint-disable react-native/no-inline-styles */
 import {
   MultiswitchController,
   type ControllerVariant,
 } from 'react-native-multiswitch-controller';
 import ExampleWrapper from './ExampleWrapper';
+import { StyleSheet } from 'react-native';
 
 type AlignProps = {
   variant: ControllerVariant;
@@ -19,14 +19,18 @@ export default function Align({ variant }: AlignProps) {
         ]}
         defaultOption="First"
         variant={variant}
-        styleProps={{
-          align: 'left',
-          inactiveBackgroundColor: 'rgb(21, 87, 21)',
-          activeBackgroundColor: 'rgb(60, 180, 20)',
-          inactiveTextColor: 'rgb(208, 249, 205)',
-          containerHeight: 52,
-          itemHeight: 46,
-        }}
+        align="left"
+        containerHeight={52}
+        optionHeight={46}
+        containerPadding={variant === 'tabs' ? 10 : undefined}
+        containerStyle={styles.containerStyle1}
+        activeOptionContainerStyle={styles.activeOptionContainerStyle1}
+        inactiveTextStyle={styles.inactiveCustomTextStyle1}
+        activeTextStyle={
+          variant === 'tabs'
+            ? styles.activeTextStyleTabs1
+            : styles.activeTextStyleSegmentedControl1
+        }
       />
       <MultiswitchController<'First' | 'Second'>
         options={[
@@ -35,28 +39,18 @@ export default function Align({ variant }: AlignProps) {
         ]}
         defaultOption="Second"
         variant={variant}
-        styleProps={{
-          align: 'center',
-          inactiveBackgroundColor: 'rgba(220, 38, 38, 0.08)',
-          activeBackgroundColor: 'rgb(185, 28, 28)',
-          inactiveTextColor: 'rgb(185, 28, 28)',
-          containerHeight: 28,
-          itemHeight: 24,
-          customTextStyle: {
-            fontSize: 10,
-          },
-          customItemStyle: {
-            paddingHorizontal: 8,
-            paddingVertical: 2,
-            borderRadius: 0,
-          },
-          customActiveOptionStyle: {
-            borderRadius: 0,
-          },
-          customContainerStyle: {
-            borderRadius: 0,
-          },
-        }}
+        align="center"
+        containerHeight={28}
+        optionHeight={24}
+        containerStyle={styles.containerStyle2}
+        inactiveOptionContainerStyle={styles.inactiveOptionContainerStyle2}
+        activeOptionContainerStyle={styles.activeOptionContainerStyle2}
+        inactiveTextStyle={styles.inactiveCustomTextStyle2}
+        activeTextStyle={
+          variant === 'tabs'
+            ? styles.activeTextStyleTabs2
+            : styles.activeTextStyleSegmentedControl2
+        }
       />
       <MultiswitchController<'First' | 'Second' | 'Third'>
         options={[
@@ -66,22 +60,85 @@ export default function Align({ variant }: AlignProps) {
         ]}
         defaultOption="First"
         variant={variant}
-        styleProps={{
-          align: 'right',
-          inactiveBackgroundColor: 'rgba(205, 197, 40, 0.08)',
-          activeBackgroundColor: 'rgb(180, 170, 20)',
-          inactiveTextColor: 'rgb(180, 170, 20)',
-          containerHeight: 28,
-          itemHeight: 24,
-          customTextStyle: {
-            fontSize: 10,
-          },
-          customItemStyle: {
-            paddingHorizontal: 8,
-            paddingVertical: 2,
-          },
-        }}
+        align="right"
+        containerHeight={44}
+        optionHeight={24}
+        containerStyle={styles.containerStyle3}
+        inactiveTextStyle={styles.inactiveCustomTextStyle3}
+        inactiveOptionContainerStyle={styles.inactiveOptionContainerStyle3}
+        activeOptionContainerStyle={styles.activeOptionContainerStyle3}
+        activeTextStyle={
+          variant === 'tabs'
+            ? styles.activeTextStyleTabs3
+            : styles.activeTextStyleSegmentedControl3
+        }
       />
     </ExampleWrapper>
   );
 }
+
+const styles = StyleSheet.create({
+  // 1st example
+  containerStyle1: {
+    backgroundColor: 'rgb(21, 87, 21)',
+  },
+  activeOptionContainerStyle1: {
+    backgroundColor: 'rgb(60, 180, 20)',
+  },
+  inactiveCustomTextStyle1: {
+    color: 'rgb(208, 249, 205)',
+  },
+  activeTextStyleTabs1: {
+    color: 'rgb(60, 180, 20)',
+  },
+  activeTextStyleSegmentedControl1: {
+    color: '#fff',
+  },
+
+  // 2nd example
+  containerStyle2: {
+    borderRadius: 0,
+    backgroundColor: 'rgba(220, 38, 38, 0.08)',
+  },
+  inactiveCustomTextStyle2: {
+    color: 'rgba(185, 28, 28, 0.6)',
+    fontSize: 10,
+  },
+  inactiveOptionContainerStyle2: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 0,
+  },
+  activeOptionContainerStyle2: {
+    borderRadius: 0,
+    backgroundColor: 'rgb(185, 28, 28)',
+  },
+  activeTextStyleTabs2: {
+    color: 'rgb(185, 28, 28)',
+  },
+  activeTextStyleSegmentedControl2: {
+    color: '#fff',
+  },
+
+  // 3rd example
+  containerStyle3: {
+    backgroundColor: 'rgba(205, 197, 40, 0.4)',
+  },
+  inactiveCustomTextStyle3: {
+    color: 'rgb(180, 170, 20)',
+    fontSize: 10,
+  },
+  inactiveOptionContainerStyle3: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+  },
+  activeOptionContainerStyle3: {
+    backgroundColor: 'rgb(180, 170, 20)',
+  },
+  activeTextStyleTabs3: {
+    color: 'rgb(180, 170, 20)',
+  },
+  activeTextStyleSegmentedControl3: {
+    color: '#fff',
+  },
+});

example/src/examples/DayOfTime.tsx

@@ -35,10 +35,9 @@ export default function DayOfTime({
         onPressItem={(_value) => {
           // Instant callback, without waiting for animation to finish
         }}
-        styleProps={{
-          inactiveBackgroundColor: 'rgba(59, 130, 246, 0.08)',
-          activeBackgroundColor: 'rgb(37, 99, 235)',
-        }}
+        optionGap={10}
+        containerStyle={styles.containerStyle}
+        activeOptionContainerStyle={styles.activeOptionContainerStyle}
       />
       <View style={styles.buttonsContainer}>
         <Button
@@ -65,4 +64,11 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+
+  containerStyle: {
+    backgroundColor: 'rgba(59, 130, 246, 0.08)',
+  },
+  activeOptionContainerStyle: {
+    backgroundColor: 'rgb(37, 99, 235)',
+  },
 });

example/src/examples/LongLabel.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-native/no-inline-styles */
 import {
   MultiswitchController,
   type ControllerVariant,
@@ -20,21 +19,45 @@ export default function LongLabel({ variant }: LongLabelProps) {
         ]}
         variant={variant}
         defaultOption="First"
-        styleProps={{
-          containerHeight: 48,
-          itemHeight: 36,
-          inactiveBackgroundColor: 'rgba(30, 64, 175, 0.08)',
-          activeBackgroundColor: 'rgb(30, 64, 175)',
-          inactiveTextColor: 'rgb(30, 64, 175)',
-          customTextStyle: styles.smallText,
-        }}
+        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
+        }
       />
     </ExampleWrapper>
   );
 }
 
 const styles = StyleSheet.create({
-  smallText: {
+  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/examples/Scrollable.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-native/no-inline-styles */
 import {
   MultiswitchController,
   type ControllerVariant,
@@ -50,10 +49,6 @@ export default function Scrollable({ variant }: ScrollableProps) {
         ]}
         defaultOption="First"
         variant={variant}
-        styleProps={{
-          containerHeight: 54,
-          itemHeight: 48,
-        }}
       />
     </ExampleWrapper>
   );

src/MultiswitchController.tsx

@@ -10,18 +10,30 @@ type MultiswitchControllerProps<TValue> = {
   defaultOption: TValue;
   variant?: ControllerVariant;
   onChangeOption?: (value: TValue) => void;
-  styleProps?: SwitchListStylingProps;
   onPressItem?: (value: TValue) => void;
   ref?: Ref<ControlListRef<TValue>>;
-};
+} & Partial<SwitchListStylingProps>;
 
 function MultiswitchController<TValue>({
   options,
   defaultOption,
   variant = 'segmentedControl',
   onChangeOption,
   onPressItem,
-  styleProps,
+
+  // Style props
+  containerStyle,
+  inactiveOptionContainerStyle,
+  activeOptionContainerStyle,
+  inactiveTextStyle,
+  activeTextStyle,
+  containerHeight = 50,
+  containerPadding,
+  optionGap = 0,
+  optionHeight = 48,
+  optionPadding = 0,
+  align = 'center',
+
   ref,
 }: MultiswitchControllerProps<TValue>) {
   const {
@@ -36,7 +48,8 @@ function MultiswitchController<TValue>({
     {
       options,
       defaultOption,
-      variant,
+      optionGap,
+      optionPadding,
     },
     ref
   );
@@ -47,6 +60,9 @@ function MultiswitchController<TValue>({
     }
   }, [activeOption, onChangeOption]);
 
+  const containerPaddingCalculated =
+    containerPadding ?? (containerHeight - optionHeight) / 2;
+
   return (
     <SwitchList
       options={options}
@@ -59,7 +75,17 @@ function MultiswitchController<TValue>({
       controlListRef={controlListRef}
       onPressItem={onPressItem}
       variant={variant}
-      {...styleProps}
+      containerStyle={containerStyle}
+      inactiveOptionContainerStyle={inactiveOptionContainerStyle}
+      activeOptionContainerStyle={activeOptionContainerStyle}
+      inactiveTextStyle={inactiveTextStyle}
+      activeTextStyle={activeTextStyle}
+      containerHeight={containerHeight}
+      containerPadding={containerPaddingCalculated}
+      optionGap={optionGap}
+      optionHeight={optionHeight}
+      optionPadding={optionPadding}
+      align={align}
     />
   );
 }