import React from 'react' ; import { View , StyleSheet , Image , BackHandler , Alert } from 'react-native' ; import ScreenHeader from '../paneHeader/PaneHeader' ; import { IHeader } from '../../shared/screenStore/headerStore/header.interface' ; import { Style , StyleText , StyleImage } from '../../utilities/interfaces' ; import utility from '../../utilities/utility.methods' ; interface IPaneHeaderContainerProps { isGoBack : boolean ; screenHeader : IHeader | undefined ; goBack : ( ) => any ; configDefaultHeader : Style ; configDefaultHeaderText : StyleText ; configDefaultHeaderIcon : StyleImage ; } const PaneHeaderContainer = ( props ) => { const { isGoBack , screenHeader , goBack , configDefaultHeader , configDefaultHeaderText , configDefaultHeaderIcon } = props ; const backActionHandler = ( ) => { if ( isGoBack && screenHeader ?. canGoBack !== false ) { goBack ( ) ; } else { Alert . alert ( "Alert!" , "Are you sure you want to exit app?" , [ { text : "Cancel" , onPress : ( ) => null , style : "cancel" } , { text : "Yes" , onPress : ( ) => BackHandler . exitApp ( ) } ] ) ; } return true ; } ; utility . useBackHandler ( backActionHandler ) ; return ( < View style = { { flex : 1 } } > { isGoBack && screenHeader ?. canGoBack !== false ? ( < ScreenHeader style = { [ paneHeaderContainerStyles . HeaderDefault , configDefaultHeader ! ] } defaultHeaderTitle = { configDefaultHeaderText } title = { screenHeader ?. title } leftIcon = { screenHeader ?. leftIcon ? ( screenHeader ?. leftIcon ) : ( < Image source = { require ( '../images/back.png' ) } style = { [ paneHeaderContainerStyles . defaultIcon , configDefaultHeaderIcon ! ] } / > ) } IconPress = { screenHeader ?. IconPress ? screenHeader ?. IconPress : ( ) => { goBack ( ) ; } } / > ) : ( < ScreenHeader style = { [ paneHeaderContainerStyles . HeaderDefault , configDefaultHeader ! ] } defaultHeaderTitle = { configDefaultHeaderText } title = { screenHeader ?. title } leftIcon = { screenHeader ?. leftIcon && screenHeader ?. leftIcon } IconPress = { screenHeader ?. IconPress && screenHeader ?. IconPress } />)} < /View>); } ; const paneHeaderContainerStyles = StyleSheet . create ( { HeaderDefault : { paddingHorizontal : 18 , backgroundColor : '#0078d4' } , defaultIcon : { width : 30 , height : 30 , tintColor : 'white' } } ) ; export default PaneHeaderContainer ;