import React from "react" ; import { Header , Left , Button , Icon , Title , Body , Right , Text } from "native-base" ; import { RouteComponentProps , withRouter } from "react-router-native" ; import { FormattedMessage } from "react-intl" ; import { Platform } from "react-native" ; interface Props extends RouteComponentProps < any > { titleId ? : string ; title ? : string ; rightTextId ? : string ; rightIconName ? : string ; rightAction ? : ( ) => void ; disableBackButton ? : boolean ; } interface States { } class HeaderWithBack extends React . Component < Props , States > { render ( ) { const HEADER_MARGIN = 10 ; const HEADER_MARGIN_RIGHT = Platform . OS === "android" ? HEADER_MARGIN : 0 ; const HEADER_MARGIN_LEFT = Platform . OS === "android" ? 0 : HEADER_MARGIN ; return < Header style = { { display : "flex" , flexDirection : "row" } } > < Left style = { { flex : 0 , marginRight : HEADER_MARGIN_RIGHT , marginLeft : HEADER_MARGIN_LEFT } } > { this . props . disableBackButton ? undefined : < Button transparent onPress = { this . props . history . goBack } > < Icon name = "arrow-back" /> < /Button>} < /Left> < Body style = { { flex : 1 , marginRight : HEADER_MARGIN } } > < Title > { this . props . titleId ? < FormattedMessage id = { this . props . titleId } /> : this . props . title ? this . props . title : undefined } < /Title> < /Body> { this . props . rightTextId || this . props . rightIconName ? < Right style = { { flex : 0 } } > < Button transparent onPress = { this . props . rightAction } > { this . props . rightTextId ? < Text > < FormattedMessage id = { this . props . rightTextId } /> < /Text> : < Icon name = { this . props . rightIconName as string } / > } < /Button> < /Right> : < Right style = { { flex : 0 } } > { } < /Right>} < /Header>; } } export default withRouter ( HeaderWithBack ) ;