renderMethods.ts

renderHeaderContent = () => {
        return (
            <$GridLayout padding={`0 20`} rows={[
                new ItemSpec(1, 'star'), //Background
                new ItemSpec(30, 'pixel') // Padding to allow for the search input overlay
            ]} columns={[
                new ItemSpec(30, 'pixel'),
                new ItemSpec(1, 'star'),
                new ItemSpec(30, 'pixel')
            ]} row={0} background={normalRed} height={150}>
                <$Label row={0} color={new Color('white')} verticalAlignment={'middle'} textAlignment={'center'} col={0} text={IconSet.Ionicons['ios-arrow-back']} className={`Ionicons size30`} />
                <$Label col={1} verticalAlignment={'middle'} fontSize={20} textAlignment={'center'} row={0} color={new Color('#fff')} text={'Doctor'} />
                <$Label row={0} color={new Color('white')} verticalAlignment={'middle'} textAlignment={'center'} col={2} text={IconSet.Ionicons['ios-menu']} className={`Ionicons size30`} />
            </$GridLayout>
        )
    }

    renderSearchBox = () => {
        return (
            <$GridLayout marginTop={-25} row={1} background={`rgba(1,0,0,0)`} columns={[
                new ItemSpec(searchMargin, 'pixel'),
                new ItemSpec(1, 'star'),
                new ItemSpec(searchMargin, 'pixel')
            ]} width={screen.mainScreen.heightDIPs} height={50}>
                <$GridLayout columns={[
                    new ItemSpec(1, 'star'),
                    new ItemSpec(1, 'auto')
                ]} background={'white'} borderRadius={25} padding={`0 20`} col={1}>
                    <$Label col={0} className={'size16'} text={'SEARCH'} verticalAlignment={'middle'} />
                    <$Label className={'Ionicons size25'} verticalAlignment={'middle'} col={1} text={IconSet.Ionicons['md-search']} />
                </$GridLayout>
            </$GridLayout>
        )
    }