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
This commit is contained in:
Brandon Presley 2022-12-30 19:49:54 +13:00
parent dd7cb0406b
commit a9000898f3
4 changed files with 22 additions and 28 deletions

View File

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

View File

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

View File

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

View File

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