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