{this.props.title}

// @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"; 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, }; searchBarRef: Input; componentDidMount() { if (this.searchBarRef !== undefined && this.props.shouldFocusSearchBar) this.searchBarRef.focus(); } getSearchBar() { return ( this.searchBarRef = ref} placeholder={i18n.t('proximoScreen.search')} placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor} onChangeText={(text) => this.props.searchCallback(text)}/> ); } render() { let button; // Does the app have a back button or a burger menu ? if (this.props.hasBackButton) button = this.props.navigation.goBack()}> ; else button = this.props.leftButton; return (

{button} {this.props.hasSearchField ? this.getSearchBar() : {this.props.title}} {this.props.rightButton} {this.props.hasBackButton ? : this.props.navigation.navigate('SettingsScreen')}> }

); } }; // Fix header in status bar on Android const styles = StyleSheet.create({ header: { paddingTop: getStatusBarHeight(), height: 54 + getStatusBarHeight(), }, });