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
|
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>
)
}
|
