React-Nav-Melon/components/organisms/Cards/VerticalNewsCard.js

import { Image, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
import React from 'react'
import metrics from '../../../theme/metrics'
import fonts from '../../../theme/fonts'
import colors from '../../../theme/colors'
import images from '../../../assets/images/images'

const VerticalNewsCard = ({image,headline,tagline,style, onPress}) => {
  return (
    <TouchableWithoutFeedback onPress={onPress}>
        <View style={[styles.cardContainer, style]}>
           <View style={styles.imagesContainer}>
           <Image source={image ?? images.verticalCard} style={styles.image}/>
           </View>
           <View style={styles.textContainer}>
                <Text style={styles.headline}> {headline ?? "Aston Villa avoid relegation on final day"}</Text>
                <Text style={styles.tagline}>{tagline ?? "The reason behind their disappointment is that iPir disappointment is that iPhonsers have been."}</Text>
           </View>
        </View>
    </TouchableWithoutFeedback>
  )
}

export default VerticalNewsCard

const styles = StyleSheet.create({
    cardContainer: {
        width: 'auto',
        maxWidth: fonts.getSize(210),
        backgroundColor: colors.white,
        borderRadius: fonts.getSize(4),
        height: fonts.getSize(300),
        maxHeight: fonts.getSize(300),
        marginRight: fonts.getSize(16),
        paddingBottom:fonts.getSize(24)
    },
    textContainer:{
        width: fonts.getSize(210),
        maxWidth:  metrics.screenWidth,
        height:"50%",
        paddingHorizontal: fonts.getSize(14),
        paddingVertical: fonts.getSize(8)
    },  
    imagesContainer:{
        width: '100%',
        height: '50%'
        
    },
    image:{
        borderRadius: fonts.getSize(4),
        width:'100%',
        height:'100%'
    },
    headline: {
        fontFamily: fonts.type.medium,
        textDecorationLine: 'underline',
        fontSize: fonts.getSize(16),
        color: colors.black,
        paddingBottom: fonts.getSize(8)
    },
    tagline: {
        fontSize: fonts.getSize(12),
        fontFamily: fonts.type.regular,
        maxHeight: '40%',
        overflow: 'hidden',
        
    }
})