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 {Picker} from '@react-native-picker/picker'
|
||||||
import {useFocusEffect} from '@react-navigation/native'
|
import {useFocusEffect} from '@react-navigation/native'
|
||||||
import {useCallback, useMemo, useState} from 'react'
|
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 DocumentPicker from 'react-native-document-picker'
|
||||||
import {Button} from 'react-native-paper'
|
import {Button} from 'react-native-paper'
|
||||||
import {darkColors, lightColors} from './colors'
|
import {darkColors, lightColors} from './colors'
|
||||||
|
@ -125,7 +125,9 @@ export default function SettingsPage() {
|
||||||
else toast('Enabled sound for rest timer alarms.')
|
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: 'Rest timers', value: alarm, onChange: changeAlarmEnabled},
|
||||||
{name: 'Vibrate', value: vibrate, onChange: changeVibrate},
|
{name: 'Vibrate', value: vibrate, onChange: changeVibrate},
|
||||||
{name: 'Disable sound', value: noSound, onChange: changeNoSound},
|
{name: 'Disable sound', value: noSound, onChange: changeNoSound},
|
||||||
|
@ -134,7 +136,27 @@ export default function SettingsPage() {
|
||||||
{name: 'Show unit', value: showUnit, onChange: changeUnit},
|
{name: 'Show unit', value: showUnit, onChange: changeUnit},
|
||||||
{name: 'Show steps', value: steps, onChange: changeSteps},
|
{name: 'Show steps', value: steps, onChange: changeSteps},
|
||||||
{name: 'Show date', value: showDate, onChange: changeShowDate},
|
{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(
|
const changeTheme = useCallback(
|
||||||
(value: string) => {
|
(value: string) => {
|
||||||
|
@ -163,25 +185,30 @@ export default function SettingsPage() {
|
||||||
[setColor],
|
[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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<DrawerHeader name="Settings" />
|
<DrawerHeader name="Settings" />
|
||||||
<Page term={term} search={setTerm}>
|
<Page term={term} search={setTerm}>
|
||||||
<ScrollView style={{marginTop: MARGIN}}>
|
<View>
|
||||||
{switches
|
<FlatList
|
||||||
.filter(input =>
|
style={{marginTop: MARGIN}}
|
||||||
input.name.toLowerCase().includes(term.toLowerCase()),
|
data={switches}
|
||||||
)
|
renderItem={renderItem}
|
||||||
.map(input => (
|
/>
|
||||||
<Switch
|
<View style={{marginBottom: MARGIN}} />
|
||||||
onPress={() => input.onChange(!input.value)}
|
|
||||||
key={input.name}
|
|
||||||
value={input.value}
|
|
||||||
onValueChange={input.onChange}>
|
|
||||||
{input.name}
|
|
||||||
</Switch>
|
|
||||||
))}
|
|
||||||
<View style={{marginBottom: 10}} />
|
|
||||||
{'theme'.includes(term.toLowerCase()) && (
|
{'theme'.includes(term.toLowerCase()) && (
|
||||||
<Select value={theme} onChange={changeTheme}>
|
<Select value={theme} onChange={changeTheme}>
|
||||||
<Picker.Item value="system" label="Follow system theme" />
|
<Picker.Item value="system" label="Follow system theme" />
|
||||||
|
@ -222,7 +249,7 @@ export default function SettingsPage() {
|
||||||
Alarm sound{soundString}
|
Alarm sound{soundString}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</ScrollView>
|
</View>
|
||||||
<ConfirmDialog
|
<ConfirmDialog
|
||||||
title="Battery optimizations"
|
title="Battery optimizations"
|
||||||
show={battery}
|
show={battery}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user