2019-06-29 13:37:21 +02:00
|
|
|
// @flow
|
|
|
|
|
|
|
|
|
|
import * as React from "react";
|
|
|
|
|
import {Body, Header, Icon, Left, Right, Title} from "native-base";
|
2019-06-25 22:20:24 +02:00
|
|
|
import {StyleSheet} from "react-native";
|
|
|
|
|
import {getStatusBarHeight} from "react-native-status-bar-height";
|
2019-06-27 10:17:51 +02:00
|
|
|
import Touchable from 'react-native-platform-touchable';
|
|
|
|
|
|
2019-06-29 13:37:21 +02:00
|
|
|
type Props = {
|
|
|
|
|
backButton: boolean,
|
|
|
|
|
rightMenu: React.Node,
|
|
|
|
|
title: string,
|
|
|
|
|
navigation: Object,
|
|
|
|
|
};
|
|
|
|
|
|
2019-06-29 15:43:57 +02:00
|
|
|
/**
|
|
|
|
|
* Custom component defining a header using native base
|
|
|
|
|
*
|
|
|
|
|
* @prop backButton {boolean} Whether to show a back button or a burger menu. Use burger if unspecified
|
|
|
|
|
* @prop rightMenu {React.Node} Element to place at the right of the header. Use nothing if unspecified
|
|
|
|
|
* @prop title {string} This header title
|
|
|
|
|
* @prop navigation {Object} The navigation object from react navigation
|
|
|
|
|
*/
|
2019-06-29 13:37:21 +02:00
|
|
|
export default class CustomHeader extends React.Component<Props> {
|
|
|
|
|
|
|
|
|
|
static defaultProps = {
|
|
|
|
|
backButton: false,
|
|
|
|
|
rightMenu: <Right/>,
|
|
|
|
|
};
|
2019-06-25 22:20:24 +02:00
|
|
|
|
|
|
|
|
render() {
|
2019-06-27 10:17:51 +02:00
|
|
|
let button;
|
2019-06-29 13:37:21 +02:00
|
|
|
if (this.props.backButton)
|
2019-06-27 10:17:51 +02:00
|
|
|
button =
|
|
|
|
|
<Touchable
|
|
|
|
|
style={{padding: 6}}
|
|
|
|
|
onPress={() => this.props.navigation.goBack()}>
|
|
|
|
|
<Icon
|
|
|
|
|
style={{color: "#fff"}}
|
|
|
|
|
name="arrow-left"
|
|
|
|
|
type={'MaterialCommunityIcons'}/>
|
|
|
|
|
</Touchable>;
|
|
|
|
|
else
|
|
|
|
|
button =
|
|
|
|
|
<Touchable
|
|
|
|
|
style={{padding: 6}}
|
|
|
|
|
onPress={() => this.props.navigation.toggleDrawer()}>
|
|
|
|
|
<Icon
|
|
|
|
|
style={{color: "#fff"}}
|
|
|
|
|
name="menu"
|
|
|
|
|
type={'MaterialCommunityIcons'}/>
|
|
|
|
|
</Touchable>;
|
|
|
|
|
|
2019-06-25 22:20:24 +02:00
|
|
|
return (
|
|
|
|
|
<Header style={styles.header}>
|
|
|
|
|
<Left>
|
2019-06-27 10:17:51 +02:00
|
|
|
{button}
|
2019-06-25 22:20:24 +02:00
|
|
|
</Left>
|
|
|
|
|
<Body>
|
|
|
|
|
<Title>{this.props.title}</Title>
|
|
|
|
|
</Body>
|
2019-06-29 13:37:21 +02:00
|
|
|
{this.props.rightMenu}
|
2019-06-25 22:20:24 +02:00
|
|
|
</Header>);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Fix header in status bar on Android
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
|
header: {
|
|
|
|
|
paddingTop: getStatusBarHeight(),
|
|
|
|
|
height: 54 + getStatusBarHeight(),
|
|
|
|
|
},
|
2019-06-27 10:17:51 +02:00
|
|
|
});
|
