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

import { Image, StyleSheet, Text, View, ImageBackground, TouchableOpacity } from 'react-native'
import React from 'react'
import Card from '../../atoms/Card'
import fonts from '../../../theme/fonts'
import metrics from '../../../theme/metrics'
import images from '../../../assets/images/images'
import LinearGradient from 'react-native-linear-gradient'
import colors from '../../../theme/colors'

const ImageBGCard = ({image, author, headline, onPress, }) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <ImageBackground source={image}
        imageStyle={{ borderRadius: fonts.getSize(8), }}
        style={styles.cardImage}
      >
        <LinearGradient
          colors={['transparent', 'black']}
          style={styles.gradient}
          start={{ x: 0.5, y: 0.3 }}

        >
          <Text style={styles.authorText}>
            by {author}
          </Text>
          <Text style={styles.headlineText}>{headline}</Text>
        </LinearGradient>
      </ImageBackground>

    </TouchableOpacity>
  )
}

export default ImageBGCard

const styles = StyleSheet.create({
  cardImage: {
    height: 'auto',
    width: 'auto',

  },
  gradient: {
    borderRadius: fonts.getSize(8),
    height: fonts.getSize(240),
    justifyContent: 'flex-end',
    paddingHorizontal: fonts.getSize(16),
    paddingVertical: fonts.getSize(10)
  },
  authorText: {
    color: colors.white,
    fontFamily: fonts.type.bold,
    fontSize: fonts.getSize(12)
  },
  headlineText: {
    color: colors.white,
    fontFamily: fonts.type.medium,
    fontSize: fonts.getSize(16)
  }
})