// @flow import * as React from "react"; import {Body, Header, Input, Item, Left, Right, Subtitle, Title} from "native-base"; import {Platform, StyleSheet, View} from "react-native"; import {getStatusBarHeight} from "react-native-status-bar-height"; import Touchable from 'react-native-platform-touchable'; import ThemeManager from "../utils/ThemeManager"; import {MaterialCommunityIcons} from "@expo/vector-icons"; import i18n from "i18n-js"; type Props = { hasBackButton: boolean, hasSearchField: boolean, searchCallback: Function, shouldFocusSearchBar: boolean, leftButton: React.Node, rightButton: React.Node, title: string, subtitle: string, navigation: Object, hasTabs: boolean, }; /** * Custom component defining a header using native base * * @prop hasBackButton {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 */ export default class CustomHeader extends React.Component { static defaultProps = { hasBackButton: false, hasSearchField: false, searchCallback: null, shouldFocusSearchBar: false, title: '', subtitle: '', leftButton: , rightButton: , hasTabs: false, }; onPressBack: Function; constructor() { super(); this.onPressBack = this.onPressBack.bind(this); } shouldComponentUpdate(nextProps: Props): boolean { return nextProps.title !== this.props.title || nextProps.subtitle !== this.props.subtitle || nextProps.hasBackButton !== this.props.hasBackButton || nextProps.hasSearchField !== this.props.hasSearchField || nextProps.shouldFocusSearchBar !== this.props.shouldFocusSearchBar || nextProps.hasTabs !== this.props.hasTabs || nextProps.rightButton !== this.props.rightButton || nextProps.leftButton !== this.props.leftButton; } componentDidMount() { if (this.refs.searchInput !== undefined && this.refs.searchInput._root !== undefined && this.props.shouldFocusSearchBar) { // does not work if called too early for some reason... setTimeout(this.refs.searchInput._root.focus, 500); } } getSearchBar() { return ( ); } getHeaderTitle() { return ( {this.props.title} {this.props.subtitle !== '' ? {this.props.subtitle} : null} ); } onPressBack() { this.props.navigation.goBack(); } render() { // console.log("rendering CustomHeader"); let button; // Does the app have a back button or a burger menu ? if (this.props.hasBackButton) button = ; else button = this.props.leftButton; return (
{button} {this.props.hasSearchField ? this.getSearchBar() : this.getHeaderTitle()} {this.props.rightButton}
); } }; // Fix header in status bar on Android const styles = StyleSheet.create({ header: { paddingTop: getStatusBarHeight(), height: 54 + getStatusBarHeight(), }, });