Remove usage of FlatList in Settings page

Doing so looks like it improved the performance
of the switches.

Related to #135.
This commit is contained in:
Brandon Presley 2022-12-22 19:14:34 +13:00
parent e5d9f5fa92
commit 777eddf943
1 changed files with 7 additions and 15 deletions

View File

@ -5,13 +5,7 @@ import {
} from '@react-navigation/native' } from '@react-navigation/native'
import {format} from 'date-fns' import {format} from 'date-fns'
import {useCallback, useMemo, useState} from 'react' import {useCallback, useMemo, useState} from 'react'
import { import {DeviceEventEmitter, NativeModules, Platform, View} from 'react-native'
DeviceEventEmitter,
FlatList,
NativeModules,
Platform,
View,
} from 'react-native'
import DocumentPicker from 'react-native-document-picker' import DocumentPicker from 'react-native-document-picker'
import {Dirs, FileSystem} from 'react-native-file-access' import {Dirs, FileSystem} from 'react-native-file-access'
import {Button, Subheading} from 'react-native-paper' import {Button, Subheading} from 'react-native-paper'
@ -198,7 +192,7 @@ export default function SettingsPage() {
) )
const renderSwitch = useCallback( const renderSwitch = useCallback(
({item}: {item: Input<boolean>}) => ( (item: Input<boolean>) => (
<Switch <Switch
onPress={() => item.onChange(!item.value)} onPress={() => item.onChange(!item.value)}
key={item.name} key={item.name}
@ -236,7 +230,7 @@ export default function SettingsPage() {
].filter(({name}) => name.toLowerCase().includes(term.toLowerCase())) ].filter(({name}) => name.toLowerCase().includes(term.toLowerCase()))
const renderSelect = useCallback( const renderSelect = useCallback(
({item}: {item: Input<string>}) => ( (item: Input<string>) => (
<Select <Select
value={item.value} value={item.value}
onChange={item.onChange} onChange={item.onChange}
@ -272,12 +266,10 @@ export default function SettingsPage() {
<> <>
<DrawerHeader name="Settings" /> <DrawerHeader name="Settings" />
<Page term={term} search={setTerm} style={{flexGrow: 0}}> <Page term={term} search={setTerm} style={{flexGrow: 0}}>
<FlatList <View style={{marginTop: MARGIN}}>
style={{marginTop: MARGIN}} {switches.map(s => renderSwitch(s))}
data={switches} </View>
renderItem={renderSwitch} <>{selects.map(s => renderSelect(s))}</>
/>
<FlatList data={selects} renderItem={renderSelect} />
{'alarm sound'.includes(term.toLowerCase()) && ( {'alarm sound'.includes(term.toLowerCase()) && (
<View <View
style={{ style={{