I can't fix my image in React native app

Question

A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll.

A string that defines an alternative text description of the image, which will be read by the screen reader when the user interacts with it. Using this will automatically mark this element as accessible.

**My code output is **

My expected design is

const SinglePostLayout3 = ({data}) => {
  return (
    <SafeAreaView style={styles.container}>
      <StatusBar translucent backgroundColor={ColorPalette.bgColor} />
      <View>
        <Text style={styles.postTitle}>{data.title}</Text>
        <View style={styles.postMetaContainer}>
          <View style={styles.authorContainer}>
            <Image
              style={styles.authorImage}
              alt=""
              source={data.author_image}
            />
            <Text style={styles.authorName}>{data.author}</Text>
            <Text style={styles.date}>{data.date}</Text>
          </View>
        </View>

        <View style={styles.imageContainer}>
          <Image source={data.image} alt="" style={styles.postImage} />
          <Text style={styles.category}>{data.categories}</Text>
        </View>
        <View style={styles.contentContainer}>
          <Text style={styles.content}>{data.excerpt}</Text>
        </View>
      </View>
    </SafeAreaView>
  );
};

Css code here

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 15,
    paddingVertical: 25,
    backgroundColor: ColorPalette.bgColor,
    flex: 1,
  },
  postTitle: {
    color: ColorPalette.primaryColor,
    fontSize: 25,
    fontWeight: '600',
    marginBottom: 20,
    lineHeight: 30,
  },
  postMetaContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 15,
  },
  authorContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 5,
  },
  authorImage: {
    height: 40,
    width: 40,
    borderRadius: 50,
  },
  authorName: {
    color: ColorPalette.primaryColor,
    fontWeight: '500',
    fontSize: 18,
  },
  date: {
    fontSize: 15,
    color: ColorPalette.secondaryColor,
    marginLeft: 15,
  },

  imageContainer: {
    position: 'relative',
  },
  category: {
    position: 'absolute',
    top: 10,
    left: 10,
    backgroundColor: ColorPalette.bgColor,
    borderRadius: 20,
    paddingHorizontal: 15,
    paddingVertical: 6,
    color: ColorPalette.primaryColor,
  },
  postImage: {
    height: 300,
    borderRadius: 15,
  },
  contentContainer: {
    marginTop: 25,
  },
  content: {
    color: ColorPalette.primaryColor,
    fontSize: 15,
    lineHeight: 25,
  },
});