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 | 131x 131x 2x | import React from "react";
import { View, Text, Pressable, StyleSheet, ViewStyle } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useTheme } from "../hooks/useTheme";
interface ModalHeaderProps {
readonly title: string;
readonly onClose: () => void;
readonly closeVariant?: "icon" | "text";
readonly style?: ViewStyle;
readonly closeTestID?: string;
}
export default function ModalHeader({
title,
onClose,
closeVariant = "icon",
style,
closeTestID,
}: ModalHeaderProps) {
const { colors } = useTheme();
return (
<View style={[styles.container, style]}>
<Text style={[styles.title, { color: colors.primary }]}>{title}</Text>
<Pressable onPress={onClose} style={styles.closeBtn} testID={closeTestID}>
{closeVariant === "text" ? (
<Text style={[styles.closeText, { color: colors.primary }]}>
Close
</Text>
) : (
<Ionicons name="close" size={24} color={colors.primary} />
)}
</Pressable>
</View>
);
}
const styles = StyleSheet.create({
container: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
},
title: {
fontSize: 18,
fontWeight: "700",
},
closeBtn: {
padding: 6,
},
closeText: {
fontWeight: "600",
},
});
|