import React from 'react' ; import { View , StyleSheet , Text , Image , TouchableOpacity , Dimensions } from 'react-native' ; import { WHITE , GREEN , TINT_GRAY } from '../utils/colors' ; import { UserProps } from '../utils/interfaceHelper' ; const UserHeaderView = ( { userImage , userName , userMessage , imageArrow , onImageClick } ) => { return ( < View style = { styles . parentStyle } > { imageArrow && ( < TouchableOpacity onPress = { ( ) => { onImageClick && onImageClick ( ) ; } } style = { styles . imgLeftArrow } > < Image style = { styles . imgLeftArrow } source = { imageArrow } / > < /TouchableOpacity>)} { userImage && ( < Image source = { userImage } style = { styles . circleDiv } / > ) } < View style = { styles . verticalStyle } > < Text style = { styles . titleStyle } > { userName } < /Text> < Text style = { styles . descStyle } > { userMessage } < /Text> < /View> < /View>); } ; export default UserHeaderView ; const styles = StyleSheet . create ( { parentStyle : { position : 'absolute' , top : 0 , left : 0 , right : 0 , marginTop : '10%' , justifyContent : 'flex-start' , flexDirection : 'row' , alignItems : 'flex-start' , backgroundColor : TINT_GRAY , paddingBottom : '3%' } , titleStyle : { fontSize : 18 , fontWeight : 'bold' , color : WHITE , marginTop : 2 } , descStyle : { fontSize : 14 , fontWeight : '400' , color : WHITE , marginTop : 5 , } , circleDiv : { width : 50 , height : 50 , borderRadius : 50 / 2 , justifyContent : 'center' , alignSelf : 'center' , marginLeft : '2%' , } , verticalStyle : { flexDirection : 'column' , marginLeft : '3%' , justifyContent : 'center' , width : '70%' } , imgLeftArrow : { width : 24 , height : 24 , justifyContent : 'center' , alignSelf : 'center' , marginLeft : '3%' , } , } ) ;