React native UI example/template. blog post detail with comments and related posts

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

export default BlogPost = () => {
  const post = {
    id: 1,
    title: 'My Awesome Blog Post',
    image: 'https://www.bootdey.com/image/280x280/6495ED/000000',
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
    comments: [
      {
        id: 1,
        author: 'Jane Doe',
        authorAvatar: 'https://www.bootdey.com/img/Content/avatar/avatar2.png',
        text: 'Great post!',
      },
      {
        id: 2,
        author: 'John Smith',
        authorAvatar: 'https://www.bootdey.com/img/Content/avatar/avatar3.png',
        text: 'I agree, this was a very informative and well-written post.',
      },
    ],
    relatedPosts: [
      {
        id: 2,
        title: '5 Tips for Better Blog Writing',
        image: 'https://www.bootdey.com/image/280x280/ADFF2F/000000',
      },
      {
        id: 3,
        title: 'The Importance of SEO in Blogging',
        image: 'https://www.bootdey.com/image/280x280/FF69B4/000000',
      },
    ],
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>{post.title}</Text>
      <Image source={{ uri: post.image }} style={styles.image} />
      <Text style={styles.content}>{post.content}</Text>
      <Text style={styles.sectionTitle}>Comments</Text>
      <FlatList
        data={post.comments}
        keyExtractor={item => item.id.toString()}
        renderItem={({ item }) => (
          <View style={styles.commentContainer}>
            <Image source={{ uri: item.authorAvatar }} style={styles.commentAvatar} />
            <View style={styles.commentTextContainer}>
              <Text style={styles.commentAuthor}>{item.author}</Text>
              <Text style={styles.commentText}>{item.text}</Text>
            </View>
          </View>
        )}
      />
      <Text style={styles.sectionTitle}>Related Posts</Text>
      <FlatList
        data={post.relatedPosts}
        keyExtractor={item => item.id.toString()}
        renderItem={({ item }) => (
          <View style={styles.relatedPostContainer}>
            <Image source={{ uri: item.image }} style={styles.relatedPostImage} />
            <Text style={styles.relatedPostTitle}>{item.title}</Text>
          </View>
        )}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 40,
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  image: {
    height: 200,
    marginVertical: 20,
  },
  content: {
    fontSize: 16,
    lineHeight: 24,
  },
  sectionTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    marginTop: 30,
  },
  commentContainer: {
    flexDirection: 'row',
    marginTop: 10,
  },
  commentAvatar: {
    width: 50,
    height: 50,
    borderRadius: 25,
  },
  commentTextContainer: {
    marginLeft: 10,
  },
  commentAuthor: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  commentText: {
    fontSize: 16,
  },

  relatedPostContainer: {
    flexDirection: 'row',
    marginTop: 10,
  },
  relatedPostImage: {
    width: 50,
    height: 50,
  },
  relatedPostTitle: {
    fontSize: 16,
    marginLeft: 10,
  },
})