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 | 16x 16x 16x 2x 2x | import React from "react";
import {
StyleSheet,
Text,
View,
Pressable,
ScrollView,
type StyleProp,
type TextStyle,
} from "react-native";
import { useRouter } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { useTheme } from "../../hooks/useTheme";
export type SettingsScreenScaffoldProps = {
title: string;
backLabel?: string;
children: React.ReactNode;
backLabelStyle?: StyleProp<TextStyle>;
titleStyle?: StyleProp<TextStyle>;
};
export function SettingsScreenScaffold({
title,
backLabel = "Settings",
children,
backLabelStyle,
titleStyle,
}: Readonly<SettingsScreenScaffoldProps>) {
const router = useRouter();
const { colors } = useTheme();
return (
<View style={[styles.container, { backgroundColor: colors.background }]}>
<Pressable style={styles.backRow} onPress={() => router.back()}>
<Ionicons name="chevron-back" size={24} color={colors.primary} />
<Text
style={[styles.backLabel, { color: colors.primary }, backLabelStyle]}
>
{backLabel}
</Text>
</Pressable>
<Text style={[styles.title, { color: colors.text }, titleStyle]}>
{title}
</Text>
<ScrollView
style={styles.scroll}
contentContainerStyle={styles.scrollContent}
showsVerticalScrollIndicator={false}
>
{children}
</ScrollView>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 56,
paddingHorizontal: 20,
},
scroll: { flex: 1 },
scrollContent: { paddingBottom: 32 },
backRow: {
flexDirection: "row",
alignItems: "center",
marginBottom: 24,
},
backLabel: { fontSize: 17, marginLeft: 4 },
title: { fontSize: 28, fontWeight: "700", marginBottom: 12 },
});
|