Philip Cesar Garay
73 lines
1.7 KiB
JavaScript
73 lines
1.7 KiB
JavaScript
import { Image, Pressable, View } from "react-native";
|
|
import { Motion } from "@legendapp/motion";
|
|
|
|
import { icons } from "../assets";
|
|
import { Fonts, gutters, Palette, Style } from "../styles";
|
|
import { goBack } from "../navigation/NavigationService";
|
|
import { FONT_FAMILY } from "../styles/Fonts";
|
|
|
|
export default ({
|
|
title = "",
|
|
rightComponent = null,
|
|
onBackPressed = null,
|
|
containerStyle = {},
|
|
headerTitleStyle = {},
|
|
hideBackButton = false,
|
|
}) => {
|
|
return (
|
|
<View
|
|
style={[
|
|
Style.containerSpaceBetween,
|
|
{
|
|
alignItems: "flex-start",
|
|
marginBottom: gutters / 2,
|
|
paddingTop: 10,
|
|
...containerStyle,
|
|
},
|
|
]}
|
|
>
|
|
<View style={{ flex: 1 }}>
|
|
{!hideBackButton && (
|
|
<Pressable onPress={() => onBackPressed?.() || goBack()}>
|
|
<Image
|
|
source={icons.chevronDown}
|
|
style={[
|
|
Style.iconSmall,
|
|
Style.mirrorHorizontal,
|
|
{ transform: [{ rotate: "90deg" }] },
|
|
]}
|
|
resizeMode="contain"
|
|
/>
|
|
</Pressable>
|
|
)}
|
|
</View>
|
|
|
|
<Motion.Text
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0.2 }}
|
|
transition={{
|
|
default: {
|
|
type: "spring",
|
|
},
|
|
opacity: {
|
|
type: "timing",
|
|
},
|
|
}}
|
|
style={{
|
|
fontSize: 16,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterRegular,
|
|
...headerTitleStyle,
|
|
}}
|
|
>
|
|
{title}
|
|
</Motion.Text>
|
|
|
|
<View style={{ flex: 1, alignItems: "flex-end" }}>
|
|
{rightComponent?.() || null}
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|