I created a page by using the card component and adding a total of three components to the component, one image and two text. I want the image to automatically fit the screen. What className can I use to do this?

At the same time, I want the date text that appears at the bottom to stick to the right. I tried align-end and it didn’t work.

    import React from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';

const AnnouncementsCard = ({title, content, imageSrc}) => {
  return (
    <View className="bg-white items-center justify-center rounded-lg p-2 m-2">
      <Image className="flex flex-1 h-48 w-48 m-2 items-center justify-center" source={{uri: imageSrc}}/>
      <Text className="flex flex-1 text-l font-bold m-2">{title}</Text>
      <Text className="flex flex-1 text-l align-end items-end justify-end font-light m-2">{content}</Text>
    </View>
  )
    ;
};
export default AnnouncementsCard;