license import React from 'react' ; import { StyleSheet , View , ViewProps , } from 'react-native' ; import { FalsyFC , FalsyText , RenderProp , Overwrite , LiteralUnion , } from '../../devsupport' ; import { styled , StyledComponentProps , StyleType , } from '../../theme' ; import { TextProps } from '../text/text.component' ; type TopNavigationStyledProps = Overwrite < StyledComponentProps , { appearance ? : LiteralUnion < 'default' | 'control' > ; } > ; export interface TopNavigationProps extends ViewProps , TopNavigationStyledProps { title ? : RenderProp < TextProps > | React . ReactText ; subtitle ? : RenderProp < TextProps > | React . ReactText ; accessoryLeft ? : RenderProp ; accessoryRight ? : RenderProp ; alignment ? : AlignmentProp ; } export type TopNavigationElement = React . ReactElement < TopNavigationProps > ; type AlignmentProp = 'start' | 'center' ; extends React . Component property property property property property property property overview-example overview-example overview-example overview-example overview-example @ styled ( 'TopNavigation' ) export class TopNavigation extends React . Component < TopNavigationProps > { private getAlignmentDependentStyles = ( alignment ) => { if ( alignment === 'center' ) { return { container : styles . containerCentered , titleContainer : styles . titleContainerCentered , } ; } return { rightControlsContainer : styles . rightControlsContainerStart , } ; } ; private getComponentStyle = ( source ) => { const { titleTextAlign , titleFontFamily , titleFontSize , titleFontWeight , titleColor , subtitleTextAlign , subtitleFontFamily , subtitleFontSize , subtitleFontWeight , subtitleColor , ... containerParameters } = source ; return { container : containerParameters , title : { textAlign : titleTextAlign , fontFamily : titleFontFamily , fontSize : titleFontSize , fontWeight : titleFontWeight , color : titleColor , } , subtitle : { textAlign : subtitleTextAlign , fontFamily : subtitleFontFamily , fontSize : subtitleFontSize , color : subtitleColor , fontWeight : subtitleFontWeight , } , } ; } ; public render ( ) { const { eva , style , title , subtitle , alignment , accessoryLeft , accessoryRight , ... viewProps } = this . props ; const evaStyles = this . getComponentStyle ( eva . style ) ; const alignmentStyles = this . getAlignmentDependentStyles ( alignment ) ; return ( < View style = { [ evaStyles . container , styles . container , alignmentStyles . container , style ] } { ... viewProps } > < View style = { styles . leftControlContainer } > < FalsyFC component = { accessoryLeft } /> < /View> < View style = { alignmentStyles . titleContainer || styles . titleContainer } > < FalsyText style = { evaStyles . title } component = { title } / > < FalsyText style = { evaStyles . subtitle } component = { subtitle } / > < /View> < View style = { [ styles . rightControlsContainer , alignmentStyles . rightControlsContainer ] } > < FalsyFC component = { accessoryRight } /> < /View> < /View>); } } const styles = StyleSheet . create ( { container : { flexDirection : 'row' , alignItems : 'center' , } , containerCentered : { justifyContent : 'space-between' , } , titleContainerCentered : { ... StyleSheet . absoluteFillObject , justifyContent : 'center' , alignItems : 'center' , } , titleContainer : { flexDirection : 'row' , flex : 1 } , leftControlContainer : { flexDirection : 'row' , zIndex : 1 , } , rightControlsContainer : { flexDirection : 'row' , zIndex : 1 , } , rightControlsContainerStart : { flex : 0 , justifyContent : 'flex-end' , } , } ) ;