// @flow import * as React from "react"; import {Body, Header, Input, Item, Left, Right, 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 CustomMaterialIcon from "./CustomMaterialIcon"; import i18n from "i18n-js"; import { NavigationActions } from 'react-navigation'; type Props = { hasBackButton: boolean, hasSearchField: boolean, searchCallback: Function, shouldFocusSearchBar: boolean, leftButton: React.Node, rightButton: React.Node, title: 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: '', leftButton: , rightButton: , hasTabs: false, }; componentDidMount() { if (this.refs.searchInput !== undefined && this.refs.searchInput._root !== undefined && this.props.shouldFocusSearchBar) { // does not work if called to early for some reason... setTimeout(() => this.refs.searchInput._root.focus(), 500); } } getSearchBar() { return ( this.props.searchCallback(text)}/> ); } render() { let button; // Does the app have a back button or a burger menu ? if (this.props.hasBackButton) button = { const backAction = NavigationActions.back(); this.props.navigation.dispatch(backAction); }}> ; else button = this.props.leftButton; return (
{button} {this.props.hasSearchField ? this.getSearchBar() : {this.props.title}} {this.props.rightButton}
); } }; // Fix header in status bar on Android const styles = StyleSheet.create({ header: { paddingTop: getStatusBarHeight(), height: 54 + getStatusBarHeight(), }, });