Fix a few instances of react/no-unstable-nested-components

Select.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react'
 import { View } from 'react-native'
-import { Button, Menu, Subheading, useTheme } from 'react-native-paper'
+import { Button, Menu, Subheading } from 'react-native-paper'
 import { ITEM_PADDING } from './constants'
 
 export interface Item {
@@ -21,7 +21,6 @@ function Select({
   label?: string
 }) {
   const [show, setShow] = useState(false)
-  const { colors } = useTheme()
 
   const selected = useMemo(
     () => items.find((item) => item.value === value) || items[0],

SetItem.tsx

@@ -42,24 +42,19 @@ export default function SetItem({
     return LIGHT_RIPPLE
   }, [dark, ids, item.id])
 
+  const left = useCallback(() => {
+    if (!settings.images || !item.image) return null
     return (
-    <List.Item
-      onPress={press}
-      title={item.name}
-      description={`${item.reps} x ${item.weight}${item.unit || 'kg'}`}
-      onLongPress={longPress}
-      style={{ backgroundColor }}
-      left={() =>
-        settings.images &&
-        item.image && (
       <Image
         source={{ uri: item.image }}
         style={{ height: 75, width: 75 }}
       />
-        )}
+    )
-      right={() => (
+  }, [item.image, settings.images])
-        <>
+
-          {settings.showDate && (
+  const right = useCallback(() => {
+    if (!settings.showDate) return null
+    return (
       <Text
         style={{
           alignSelf: 'center',
@@ -68,9 +63,18 @@ export default function SetItem({
       >
         {format(new Date(item.created), settings.date || 'P')}
       </Text>
-          )}
+    )
-        </>
+  }, [settings.showDate, item.created, settings.date, dark])
-      )}
+
+  return (
+    <List.Item
+      onPress={press}
+      title={item.name}
+      description={`${item.reps} x ${item.weight}${item.unit || 'kg'}`}
+      onLongPress={longPress}
+      style={{ backgroundColor }}
+      left={left}
+      right={right}
     />
   )
 }

StartPlanItem.tsx

@@ -46,7 +46,7 @@ export default function StartPlanItem(props: Props) {
     [setShowMenu, setAnchor],
   )
 
-  const edit = async () => {
+  const edit = useCallback(async () => {
     const now = await getNow()
     const created = now.split('T')[0]
     const first = await setRepo.findOne({
@@ -60,28 +60,23 @@ export default function StartPlanItem(props: Props) {
     setShowMenu(false)
     if (!first) return toast('Nothing to edit.')
     navigate('EditSet', { set: first })
-  }
+  }, [item.name, navigate])
 
-  return (
+  const left = useCallback(
-    <List.Item
+    () => (
-      onLongPress={longPress}
-      title={item.name}
-      description={item.sets
-        ? `${item.total} / ${item.sets}`
-        : item.total.toString()}
-      onPress={() => onSelect(index)}
-      left={() => (
       <View style={{ alignItems: 'center', justifyContent: 'center' }}>
         <RadioButton
-            onPress={() =>
+          onPress={() => onSelect(index)}
-              onSelect(index)}
           value={index.toString()}
           status={selected === index ? 'checked' : 'unchecked'}
           color={colors.primary}
         />
       </View>
-      )}
+    ),
-      right={() => (
+    [index, selected, colors.primary, onSelect],
+  )
+
+  const right = useCallback(() => (
     <View
       style={{
         width: '25%',
@@ -97,7 +92,18 @@ export default function StartPlanItem(props: Props) {
         <Menu.Item leadingIcon='undo' onPress={undo} title='Undo' />
       </Menu>
     </View>
-      )}
+  ), [anchor, showMenu, edit, undo])
+
+  return (
+    <List.Item
+      onLongPress={longPress}
+      title={item.name}
+      description={item.sets
+        ? `${item.total} / ${item.sets}`
+        : item.total.toString()}
+      onPress={() => onSelect(index)}
+      left={left}
+      right={right}
     />
   )
 }

WorkoutItem.tsx

@@ -40,22 +40,18 @@ export default function WorkoutItem({
     return `${item.sets} x ${item.minutes || 0}:${seconds}`
   }, [item])
 
+  const left = useCallback(() => {
+    if (!images || !item.image) return null
     return (
-    <>
-      <List.Item
-        onPress={() => navigation.navigate('EditWorkout', { value: item })}
-        title={item.name}
-        description={description}
-        onLongPress={longPress}
-        left={() =>
-          images &&
-          item.image && (
       <Image
         source={{ uri: item.image }}
         style={{ height: 75, width: 75 }}
       />
-          )}
+    )
-        right={() => (
+  }, [item.image, images])
+
+  const right = useCallback(() => {
+    return (
       <Text
         style={{
           alignSelf: 'center',
@@ -76,7 +72,18 @@ export default function WorkoutItem({
           />
         </Menu>
       </Text>
-        )}
+    )
+  }, [anchor, showMenu, item.name])
+
+  return (
+    <>
+      <List.Item
+        onPress={() => navigation.navigate('EditWorkout', { value: item })}
+        title={item.name}
+        description={description}
+        onLongPress={longPress}
+        left={left}
+        right={right}
       />
       <ConfirmDialog
         title={`Delete ${showRemove}`}