Style demo

src/components/PostView.tsx

@@ -16,7 +16,7 @@ export function PostView({ post }: { post: Post }): JSX.Element {
 
   return (
     <View style={style.postView}>
-      <Text style={style.postFont} >{thisPost.content}</Text>
+      <Text style={style.postFont}>{thisPost.content}</Text>
     </View>
   );
 }

src/components/PostsContainer.tsx

@@ -1,26 +1,66 @@
 import React from "react";
 import { View, Text } from "react-native";
-import { getPosts, Post } from "../util/api";
+import { getPost, getPosts, Post } from "../util/api";
 import { PostView } from "./PostView";
 import { style } from "../util/style";
+import { SafeAreaView } from "react-native";
+import { VirtualizedList } from "react-native";
+
+type ItemData = {
+  id: string;
+  title: string;
+};
+
+type ItemProps = {
+  title: string;
+};
+
+const Item = ({title}: ItemProps): JSX.Element => (
+  <View style={style.postView}>
+    <Text style={style.postFont}>{title}</Text>
+  </View>
+);
 
 export function PostsContainer(): JSX.Element {
-  const [posts, setPosts] = React.useState<Post[]>([]);
+  // const [posts, setPosts] = React.useState<Post[]>([]);
 
-  React.useEffect(() => {
+  // React.useEffect(() => {
-    async function fetchPosts(): Promise<void> {
+  //   refreshPosts();
-      const posts = await getPosts();
+  // }, []);
-      setPosts(posts);
+
-    }
+  const getItemCount = (_data: unknown): number => 50;
-    fetchPosts();
+
-  }, []);
+  // function refreshPosts(): void {
+  //   async function fetchPosts(): Promise<void> {
+  //     const posts = await getPosts();
+  //     setPosts(posts);
+  //   }
+  //   fetchPosts();
+  // }
+
+  // function getItemCount(): number {
+  //   return posts.length;
+  // }
+
+  const getItem = (_data: unknown, index: number): ItemData => ({
+    id: Math.random().toString(12).substring(0),
+    title: `Item ${index + 1}`,
+  });
+
+  // const getItem = async (data: any, index: number): Promise<Post> => {
+  //   const p = await getPost(index);
+  //   return p;
+  // };
 
   return (
-    <View style={style.postsContainer}>
+    <SafeAreaView style={style.postsContainer}>
-      <Text>Hello World!</Text>
+      <VirtualizedList
-      {posts.map((post) => (
+        initialNumToRender={4}
-        <PostView key={post.id} post={post} />
+        renderItem={({ item }) => <Item title={item.title} />}
-      ))}
+        keyExtractor={(item: ItemData) => item.id}
-    </View>
+        getItemCount={getItemCount}
+        getItem={getItem}
+      />
+    </SafeAreaView>
   );
-}
+}

src/util/api.ts

@@ -63,7 +63,7 @@ export async function getPosts(): Promise<Post[]> {
  * @param {string} id - The ID of the post to fetch.
  * @returns {Promise<Post>} A promise that resolves to the requested post.
  */
-export async function getPost(id: string): Promise<Post> {
+export async function getPost(id: number): Promise<Post> {
   const res = await fetch(URL + `/api/posts/${id}`);
   const data = await res.json();
   return data;

src/util/style.ts

@@ -14,19 +14,23 @@ export const style = StyleSheet.create({
     backgroundColor: colorScheme.background, // For the "entire" app
     alignItems: 'center',
     justifyContent: 'center',
+    margin: 0,
   },
   postsContainer: {
+    margin: 0,
     height: '100%',
+    width: '100%',
     padding: 5,
-    flex: 1,
+    paddingVertical: 30,
-    alignItems: 'center',
     justifyContent: 'flex-start',
     backgroundColor: colorScheme.background, // For the container holding the posts
   },
   postView: {
+    borderRadius: 6,
     flexDirection: "row",
     backgroundColor: colorScheme.postBox,
-    paddingVertical: 5,
+    margin: 5,
+    padding: 15,
   },
   postFont: {
     color: colorScheme.postFont,