Factor out MassiveSwitch

EditPlan.tsx

@@ -10,6 +10,7 @@ import React, {useCallback, useContext, useEffect, useState} from 'react';
 import {ScrollView, StyleSheet, Text, useColorScheme, View} from 'react-native';
 import {Button, IconButton, Switch} from 'react-native-paper';
 import {DatabaseContext} from './App';
+import MassiveSwitch from './MassiveSwitch';
 import {PlanPageParams} from './PlanPage';
 import {DAYS} from './time';
 
@@ -92,12 +93,8 @@ export default function EditPlan() {
         <Text style={styles.title}>Days</Text>
         {DAYS.map(day => (
           <View key={day} style={[styles.row, {alignItems: 'center'}]}>
-            <Switch
-              color={
-                dark ? DarkTheme.colors.primary : DefaultTheme.colors.primary
-              }
+            <MassiveSwitch
               value={days.includes(day)}
-              style={{marginRight: 5}}
               onValueChange={value => toggleDay(value, day)}
             />
             <Text onPress={() => toggleDay(!days.includes(day), day)}>
@@ -114,12 +111,8 @@ export default function EditPlan() {
         )}
         {names.map(name => (
           <View key={name} style={[styles.row, {alignItems: 'center'}]}>
-            <Switch
-              color={
-                dark ? DarkTheme.colors.primary : DefaultTheme.colors.primary
-              }
+            <MassiveSwitch
               value={workouts.includes(name)}
-              style={{marginRight: 5}}
               onValueChange={value => toggleWorkout(value, name)}
             />
             <Text onPress={() => toggleWorkout(!workouts.includes(name), name)}>

MassiveSwitch.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import {DarkTheme, DefaultTheme} from '@react-navigation/native';
+import {useColorScheme} from 'react-native';
+import {Switch} from 'react-native-paper';
+
+export default function MassiveSwitch(
+  props: Partial<React.ComponentProps<typeof Switch>>,
+) {
+  const dark = useColorScheme() === 'dark';
+
+  return (
+    <Switch
+      color={dark ? DarkTheme.colors.primary : DefaultTheme.colors.primary}
+      style={{marginRight: 5}}
+      {...props}
+    />
+  );
+}

SettingsPage.tsx

@@ -13,6 +13,7 @@ import {DatabaseContext} from './App';
 import Set from './set';
 import DocumentPicker from 'react-native-document-picker';
 import ConfirmDialog from './ConfirmDialog';
+import MassiveSwitch from './MassiveSwitch';
 
 const {getItem, setItem} = AsyncStorage;
 
@@ -162,7 +163,7 @@ export default function SettingsPage() {
       />
 
       <Text style={styles.text}>Rest timers</Text>
-      <Switch
+      <MassiveSwitch
         style={[styles.text, {alignSelf: 'flex-start'}]}
         value={alarmEnabled}
         onValueChange={changeAlarmEnabled}
@@ -180,7 +181,7 @@ export default function SettingsPage() {
       </ConfirmDialog>
 
       <Text style={styles.text}>Predictive sets</Text>
-      <Switch
+      <MassiveSwitch
         style={[styles.text, {alignSelf: 'flex-start'}]}
         value={predictiveSets}
         onValueChange={changePredictive}