React-Nav-Melon/components/organisms/Headers/SectionHeader.js

import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import React from 'react'
import Header from '../../atoms/Header'
import { List } from 'react-native-paper'
import colors from '../../../theme/colors'
import fonts from '../../../theme/fonts'

const SectionHeader = ({ label, onPress }) => {
    return (
        <Header style={styles.recentHeader}>
            <Text style={styles.recentHeaderText}>{label}</Text>
            <TouchableOpacity onPress={onPress} style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}>
                <Text style={styles.seeAllText}>See All</Text>
                <List.Icon style={styles.recentHeaderIcon} icon="arrow-right" color={colors.topColor} />
            </TouchableOpacity>
        </Header>
    )
}

export default SectionHeader

const styles = StyleSheet.create({
    recentHeader: {
        paddingHorizontal: fonts.getSize(16),
      },
      recentHeaderText: {
        fontFamily: fonts.type.semibold,
        fontSize: fonts.getSize(16),
        color: colors.black
      },
      seeAllText: {
        fontFamily: fonts.type.semibold,
        color: colors.topColor,
        paddingRight: 16,
        alignSelf: 'stretch'
    
      },
      recentHeaderIcon: {
    
      },
      recentCardContainer: {
        flexDirection: 'column',
        paddingHorizontal: 16,
        overflow: 'hidden'
      },
})