Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 | 28x 28x 28x 4x 24x 3x | import React from "react";
import {
StyleSheet,
Switch,
Text,
View,
type StyleProp,
type TextStyle,
} from "react-native";
import { useTheme } from "../../hooks/useTheme";
import { useSettingsSwitchTrackColor } from "./useSettingsSwitchColors";
export type SettingsSwitchRowProps = {
title: string;
subtitle?: string;
value: boolean;
onValueChange: (value: boolean) => void;
/**
* When true, title and switch share one row; subtitle renders below (Display, Notifications).
* When false, title and subtitle stack on the left with the switch on the right (Navigation).
*/
subtitleBelow?: boolean;
/** Tighter vertical padding for stacked rows inside one card (e.g. Notifications). */
compact?: boolean;
titleStyle?: StyleProp<TextStyle>;
subtitleStyle?: StyleProp<TextStyle>;
};
export function SettingsSwitchRow({
title,
subtitle,
value,
onValueChange,
subtitleBelow = false,
compact = false,
titleStyle,
subtitleStyle,
}: Readonly<SettingsSwitchRowProps>) {
const { colors } = useTheme();
const trackColor = useSettingsSwitchTrackColor();
if (subtitleBelow) {
return (
<View>
<View style={styles.rowHeader}>
<Text style={[styles.rowTitle, { color: colors.text }, titleStyle]}>
{title}
</Text>
<Switch
value={value}
onValueChange={onValueChange}
trackColor={trackColor}
/>
</View>
{subtitle ? (
<Text
style={[
styles.rowSubtitle,
{ color: colors.textMuted },
subtitleStyle,
]}
>
{subtitle}
</Text>
) : null}
</View>
);
}
return (
<View style={[styles.inlineRow, compact ? styles.inlineRowCompact : null]}>
<View style={styles.inlineTextCol}>
<Text style={[styles.rowTitle, { color: colors.text }, titleStyle]}>
{title}
</Text>
{subtitle ? (
<Text
style={[
styles.rowSubtitle,
{ color: colors.textMuted },
subtitleStyle,
]}
>
{subtitle}
</Text>
) : null}
</View>
<Switch
value={value}
onValueChange={onValueChange}
trackColor={trackColor}
/>
</View>
);
}
const styles = StyleSheet.create({
rowHeader: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
},
rowTitle: {
fontSize: 15,
fontWeight: "600",
},
rowSubtitle: {
fontSize: 13,
marginTop: 4,
marginBottom: 8,
},
inlineRow: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
paddingVertical: 8,
gap: 10,
},
inlineRowCompact: {
paddingVertical: 0,
},
inlineTextCol: {
flex: 1,
paddingRight: 8,
},
});
|