impl more settings state

app/components/SettingsItem.tsx

@@ -4,11 +4,13 @@ import React from 'react'
 import { StyleSheet, View, Text } from 'react-native'
 import PressableOpacity from './PressableOpacity'
 
-const SettingsItem: React.FC<{
+export type SettingsItemProps = {
   title: string
   subtitle?: string
   onPress?: () => void
-}> = ({ title, subtitle, onPress, children }) => {
+}
+
+const SettingsItem: React.FC<SettingsItemProps> = ({ title, subtitle, onPress, children }) => {
   return (
     <View style={styles.item}>
       <PressableOpacity style={styles.itemText} onPress={onPress}>
@@ -22,13 +24,13 @@ const SettingsItem: React.FC<{
 
 const styles = StyleSheet.create({
   item: {
-    height: 60,
     marginBottom: 10,
     alignItems: 'stretch',
     flexDirection: 'row',
   },
   itemText: {
     flex: 1,
+    paddingVertical: 10,
     alignSelf: 'stretch',
     alignItems: 'flex-start',
   },

app/components/SettingsSwitch.tsx

@@ -0,0 +1,36 @@
+import colors from '@app/styles/colors'
+import React from 'react'
+import { Switch, StyleSheet } from 'react-native'
+import SettingsItem, { SettingsItemProps } from './SettingsItem'
+
+export type SettingsSwitchProps = SettingsItemProps & {
+  value: boolean
+  setValue: (value: boolean) => void
+}
+
+const SettingsSwitch = React.memo<SettingsSwitchProps>(props => {
+  const { value, setValue } = props
+
+  return (
+    <SettingsItem onPress={() => setValue(!value)} {...props}>
+      <Switch
+        style={styles.switch}
+        trackColor={{
+          false: colors.accentLow,
+          true: colors.accent,
+        }}
+        thumbColor={colors.text.primary}
+        value={value}
+        onValueChange={setValue}
+      />
+    </SettingsItem>
+  )
+})
+
+const styles = StyleSheet.create({
+  switch: {
+    marginLeft: 20,
+  },
+})
+
+export default SettingsSwitch