79 lines
2.0 KiB
TypeScript
79 lines
2.0 KiB
TypeScript
import React from "react";
|
|
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
import LucideIcon from './LucideIcon';
|
|
import { responsiveFontSize } from "react-native-responsive-dimensions";
|
|
import { useTheme } from "../../hooks/ui/useTheme";
|
|
import FontsFamily from "../../constents/FontsFamily";
|
|
|
|
type HeaderProps = {
|
|
title: string;
|
|
showBack?: boolean; // optional, default true
|
|
onBackPress?: () => void; // optional custom back action
|
|
rightAction?: React.ReactNode; // allow passing JSX for right side
|
|
titleColor?:string;
|
|
arrowColor?:string
|
|
};
|
|
|
|
const Header: React.FC<HeaderProps> = ({
|
|
title,
|
|
showBack = true,
|
|
onBackPress,
|
|
rightAction,
|
|
titleColor,
|
|
arrowColor
|
|
}) => {
|
|
const navigation = useNavigation();
|
|
const theme = useTheme();
|
|
|
|
const resolvedTitleColor = titleColor || theme.colors.textPrimary;
|
|
const resolvedArrowColor = arrowColor || theme.colors.textPrimary;
|
|
|
|
const handleBack = () => {
|
|
if (onBackPress) {
|
|
onBackPress();
|
|
} else {
|
|
navigation.goBack();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<View style={styles.header}>
|
|
{showBack && (
|
|
<TouchableOpacity onPress={handleBack} style={styles.sideAction}>
|
|
<LucideIcon name="arrow-back" size={22} color={resolvedArrowColor} />
|
|
</TouchableOpacity>
|
|
)}
|
|
{!showBack && <View style={styles.sideAction} />}
|
|
|
|
<Text numberOfLines={1} style={[styles.headerTitle, {color:resolvedTitleColor}]}>{title}</Text>
|
|
|
|
<View style={styles.sideAction}>{rightAction}</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default Header;
|
|
|
|
const styles = StyleSheet.create({
|
|
header: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
paddingVertical: 10,
|
|
paddingHorizontal: 12,
|
|
},
|
|
sideAction: {
|
|
width: 36,
|
|
height: 36,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
headerTitle: {
|
|
flex: 1,
|
|
textAlign: "center",
|
|
fontSize: responsiveFontSize(2),
|
|
fontFamily: FontsFamily.nunitoBold,
|
|
},
|
|
});
|