diff options
Diffstat (limited to 'app/components/header/header.tsx')
-rw-r--r-- | app/components/header/header.tsx | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/app/components/header/header.tsx b/app/components/header/header.tsx new file mode 100644 index 0000000..b4a6634 --- /dev/null +++ b/app/components/header/header.tsx @@ -0,0 +1,61 @@ +import React from "react" +import { View, ViewStyle, TextStyle } from "react-native" +import { HeaderProps } from "./header.props" +import { Button } from "../button/button" +import { Text } from "../text/text" +import { Icon } from "../icon/icon" +import { spacing } from "../../theme" +import { translate } from "../../i18n/" + +// static styles +const ROOT: ViewStyle = { + flexDirection: "row", + paddingHorizontal: spacing[4], + alignItems: "center", + paddingTop: spacing[5], + paddingBottom: spacing[5], + justifyContent: "flex-start", +} +const TITLE: TextStyle = { textAlign: "center" } +const TITLE_MIDDLE: ViewStyle = { flex: 1, justifyContent: "center" } +const LEFT: ViewStyle = { width: 32 } +const RIGHT: ViewStyle = { width: 32 } + +/** + * Header that appears on many screens. Will hold navigation buttons and screen title. + */ +export function Header(props: HeaderProps) { + const { + onLeftPress, + onRightPress, + rightIcon, + leftIcon, + headerText, + headerTx, + style, + titleStyle, + } = props + const header = headerText || (headerTx && translate(headerTx)) || "" + + return ( + <View style={[ROOT, style]}> + {leftIcon ? ( + <Button preset="link" onPress={onLeftPress}> + <Icon icon={leftIcon} /> + </Button> + ) : ( + <View style={LEFT} /> + )} + <View style={TITLE_MIDDLE}> + <Text style={[TITLE, titleStyle]} text={header} /> + </View> + {rightIcon ? ( + <Button preset="link" onPress={onRightPress}> + <Icon icon={rightIcon} /> + </Button> + ) : ( + <View style={RIGHT} /> + )} + </View> + ) +} |