Replace children with title for Switch

Apparently, the children prop makes React.memo
not work any more. I read about it in
https://stackoverflow.com/questions/53074551/when-should-you-not-use-react-memo

EditPlan.tsx

@@ -80,9 +80,9 @@ export default function EditPlan() {
             <Switch
               key={day}
               onChange={value => toggleDay(value, day)}
-              value={days.includes(day)}>
-              {day}
-            </Switch>
+              value={days.includes(day)}
+              title={day}
+            />
           ))}
           <Text style={[styles.title, {marginTop: MARGIN}]}>Workouts</Text>
           {names.length === 0 ? (
@@ -94,9 +94,9 @@ export default function EditPlan() {
               <Switch
                 key={name}
                 onChange={value => toggleWorkout(value, name)}
-                value={workouts.includes(name)}>
-                {name}
-              </Switch>
+                value={workouts.includes(name)}
+                title={name}
+              />
             ))
           )}
         </ScrollView>

Routes.tsx

@@ -36,22 +36,16 @@ export default function Routes() {
         swipeEdgeWidth: 1000,
         headerShown: false,
       }}>
-      {}
-      {routes
-        .filter(route => {
-          if (Platform.OS === 'ios' && route.name === 'Timer') return false
-          return true
-        })
-        .map(route => (
-          <Drawer.Screen
-            key={route.name}
-            name={route.name}
-            component={route.component}
-            options={{
-              drawerIcon: () => <IconButton icon={route.icon} />,
-            }}
-          />
-        ))}
+      {routes.map(route => (
+        <Drawer.Screen
+          key={route.name}
+          name={route.name}
+          component={route.component}
+          options={{
+            drawerIcon: () => <IconButton icon={route.icon} />,
+          }}
+        />
+      ))}
     </Drawer.Navigator>
   )
 }

SettingsPage.tsx

@@ -153,9 +153,9 @@ export default function SettingsPage() {
       <Switch
         key={item.name}
         value={item.value}
-        onChange={value => changeBoolean(item.key, value)}>
-        {item.name}
-      </Switch>
+        onChange={value => changeBoolean(item.key, value)}
+        title={item.name}
+      />
     ),
     [changeBoolean],
   )

Switch.tsx

@@ -6,11 +6,11 @@ import {MARGIN} from './constants'
 function Switch({
   value,
   onChange,
-  children,
+  title,
 }: {
   value?: boolean
   onChange: (value: boolean) => void
-  children: string
+  title: string
 }) {
   const {colors} = useTheme()
 
@@ -30,7 +30,7 @@ function Switch({
         onValueChange={onChange}
         trackColor={{true: colors.primary + '80', false: colors.disabled}}
       />
-      <Text>{children}</Text>
+      <Text>{title}</Text>
     </Pressable>
   )
 }