Attempt to optimize SettingsPage
1. Use FlatList instead of ScrollView 2. Wrap `switches` in a `useMemo` call I didn't measure it but felt like this sped up performance slightly. Still might come back to this page again in the future. Closes #111
This commit is contained in:
parent
bb85935e1d
commit
f87373479a
|
@ -1,7 +1,7 @@
|
|||
import {Picker} from '@react-native-picker/picker'
|
||||
import {useFocusEffect} from '@react-navigation/native'
|
||||
import {useCallback, useMemo, useState} from 'react'
|
||||
import {DeviceEventEmitter, NativeModules, ScrollView, View} from 'react-native'
|
||||
import {DeviceEventEmitter, FlatList, NativeModules, View} from 'react-native'
|
||||
import DocumentPicker from 'react-native-document-picker'
|
||||
import {Button} from 'react-native-paper'
|
||||
import {darkColors, lightColors} from './colors'
|
||||
|
@ -125,7 +125,9 @@ export default function SettingsPage() {
|
|||
else toast('Enabled sound for rest timer alarms.')
|
||||
}, [])
|
||||
|
||||
const switches: Input<boolean>[] = [
|
||||
const switches: Input<boolean>[] = useMemo(
|
||||
() =>
|
||||
[
|
||||
{name: 'Rest timers', value: alarm, onChange: changeAlarmEnabled},
|
||||
{name: 'Vibrate', value: vibrate, onChange: changeVibrate},
|
||||
{name: 'Disable sound', value: noSound, onChange: changeNoSound},
|
||||
|
@ -134,7 +136,27 @@ export default function SettingsPage() {
|
|||
{name: 'Show unit', value: showUnit, onChange: changeUnit},
|
||||
{name: 'Show steps', value: steps, onChange: changeSteps},
|
||||
{name: 'Show date', value: showDate, onChange: changeShowDate},
|
||||
]
|
||||
].filter(({name}) => name.toLowerCase().includes(term.toLowerCase())),
|
||||
[
|
||||
term,
|
||||
showDate,
|
||||
changeShowDate,
|
||||
alarm,
|
||||
changeAlarmEnabled,
|
||||
vibrate,
|
||||
changeVibrate,
|
||||
noSound,
|
||||
changeNoSound,
|
||||
notify,
|
||||
changeNotify,
|
||||
images,
|
||||
changeImages,
|
||||
showUnit,
|
||||
changeUnit,
|
||||
steps,
|
||||
changeSteps,
|
||||
],
|
||||
)
|
||||
|
||||
const changeTheme = useCallback(
|
||||
(value: string) => {
|
||||
|
@ -163,25 +185,30 @@ export default function SettingsPage() {
|
|||
[setColor],
|
||||
)
|
||||
|
||||
const renderItem = useCallback(
|
||||
({item}: {item: Input<boolean>}) => (
|
||||
<Switch
|
||||
onPress={() => item.onChange(!item.value)}
|
||||
key={item.name}
|
||||
value={item.value}
|
||||
onValueChange={item.onChange}>
|
||||
{item.name}
|
||||
</Switch>
|
||||
),
|
||||
[],
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
<DrawerHeader name="Settings" />
|
||||
<Page term={term} search={setTerm}>
|
||||
<ScrollView style={{marginTop: MARGIN}}>
|
||||
{switches
|
||||
.filter(input =>
|
||||
input.name.toLowerCase().includes(term.toLowerCase()),
|
||||
)
|
||||
.map(input => (
|
||||
<Switch
|
||||
onPress={() => input.onChange(!input.value)}
|
||||
key={input.name}
|
||||
value={input.value}
|
||||
onValueChange={input.onChange}>
|
||||
{input.name}
|
||||
</Switch>
|
||||
))}
|
||||
<View style={{marginBottom: 10}} />
|
||||
<View>
|
||||
<FlatList
|
||||
style={{marginTop: MARGIN}}
|
||||
data={switches}
|
||||
renderItem={renderItem}
|
||||
/>
|
||||
<View style={{marginBottom: MARGIN}} />
|
||||
{'theme'.includes(term.toLowerCase()) && (
|
||||
<Select value={theme} onChange={changeTheme}>
|
||||
<Picker.Item value="system" label="Follow system theme" />
|
||||
|
@ -222,7 +249,7 @@ export default function SettingsPage() {
|
|||
Alarm sound{soundString}
|
||||
</Button>
|
||||
)}
|
||||
</ScrollView>
|
||||
</View>
|
||||
<ConfirmDialog
|
||||
title="Battery optimizations"
|
||||
show={battery}
|
||||
|
|
Loading…
Reference in New Issue
Block a user