import React , { FC , memo , ReactNode } from 'react' ; import { StyleProp , Text , TouchableOpacity , View , ViewStyle } from 'react-native' ; import { Icon , TopNavigation } from '@ui-kitten/components' ; import styles from './styles' ; interface IGenericHeader { BodyHeader ? : ReactNode ; LeftAction ? : ReactNode ; title ? : string ; RightAction ? : ReactNode ; onBackClicked ? : ( ) => void ; style ? : StyleProp < ViewStyle > ; subtitle ? : string ; withShadow ? : boolean ; } const GenericHeader = ( { BodyHeader , LeftAction , title , RightAction , onBackClicked , style = { } , subtitle = undefined , withShadow = false , } ) => { return ( < TopNavigation alignment = "center" style = { [ style , styles . headerContainer , withShadow && styles . HeaderShadow ] } title = { ( ) => ( < View style = { styles . bodyContainer } > { } < View style = { styles . BodyContent } > { ! ! title && ( < Text style = { styles . mainPageTitle } numberOfLines = { 1 } ellipsizeMode = "tail" > { title } < /Text>)} { BodyHeader } < /View> < /View>)} accessoryLeft={() => (<View> { } { ! ! onBackClicked && ( < TouchableOpacity onPress = { onBackClicked } style = { styles . backButtonContainer } > < Icon pack = "Ionicons" name = "arrow-back" style = { styles . backButtonIcon } / > { } < /TouchableOpacity>)} { } { LeftAction } < /View>)} accessoryRight={() => (<View> { } { RightAction } < /View>)} subtitle={evaProps => (!subtitle ? <></ > : < Text { ... evaProps } > { subtitle } < /Text>)}/ > ) ; } ; export default memo ( GenericHeader ) ;