React native UI example/template. Social network home posts list

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

const posts = [
  {
    id: 1,
    author: 'Jane Doe',
    avatar: 'https://www.bootdey.com/img/Content/avatar/avatar1.png',
    image: 'https://www.bootdey.com/image/280x280/FF00FF/000000',
    caption: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.',
    likes: 32,
    comments: [
      {
        id: 1,
        author: 'John Doe',
        avatar: 'https://www.bootdey.com/img/Content/avatar/avatar5.png',
        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.',
      },
      {
        id: 2,
        author: 'Jane Doe',
        avatar: 'https://www.bootdey.com/img/Content/avatar/avatar4.png',
        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.',
      },
    ],
  },
  {
    id: 2,
    author: 'John Doe',
    avatar: 'https://www.bootdey.com/img/Content/avatar/avatar3.png',
    image: 'https://www.bootdey.com/image/280x280/FF00FF/000000',
    caption: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.',
    likes: 20,
    comments: [
      {
        id: 1,
        author: 'Jane Doe',
        avatar: 'https://www.bootdey.com/img/Content/avatar/avatar2.png',
        content: 'Lorem'
      },
    ],
  },
];

const HomeScreen = () => {
  return (
    <ScrollView>
      {posts.map(post => (
        <View key={post.id} style={styles.postContainer}>
          <View style={styles.postHeader}>
            <Image source={{ uri: post.avatar }} style={styles.avatar} />
            <Text style={styles.author}>{post.author}</Text>
          </View>
          <Image source={{ uri: post.image }} style={styles.postImage} />
          <View style={styles.postActions}>
            <Text style={styles.likes}>{post.likes} likes</Text>
            <Text style={styles.caption}>{post.caption}</Text>
            {post.comments.map(comment => (
              <View key={comment.id} style={styles.comment}>
                <View style={styles.commentHeader}>
                  <Image source={{ uri: comment.avatar }} style={styles.commentAvatar} />
                  <Text style={styles.commentAuthor}>{comment.author}</Text>
                </View>
                <Text style={styles.commentContent}>{comment.content}</Text>
              </View>
            ))}
          </View>
        </View>
      ))}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  postContainer: {
    marginBottom: 20,
    marginHorizontal:10,
    borderBottomWidth:1,
    borderBottomColor:'#A9A9A9',
  },
  postHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  avatar: {
    width: 40,
    height: 40,
    borderRadius: 20,
    marginRight: 10,
  },
  author: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  postImage: {
    width: '100%',
    height: 200,
  },
  postActions: {
    marginTop: 10,
  },
  likes: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  caption: {
    fontSize: 14,
    marginBottom: 10,
  },
  comment: {
    marginBottom: 10,
  },
  commentHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  commentAvatar: {
    width: 20,
    height: 20,
    borderRadius: 20,
    marginRight: 10,
  },
  commentAuthor: {
    fontSize: 14,
    fontWeight: 'bold',
    marginRight: 10,
  },
  commentContent: {
    fontSize: 14,
  },
});

export default HomeScreen;