Basic styling

App.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import { PostsContainer } from './src/components/PostsContainer';
 
-export default function App() {
+export default function App(): JSX.Element {
   return (
     <View style={styles.container}>
       <Text>Open up App.tsx to start working on your app!</Text>
@@ -16,7 +16,7 @@ export default function App() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
+    backgroundColor: '#fff', // For the "entire" app
     alignItems: 'center',
     justifyContent: 'center',
   },

src/components/PostView.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { View, Text } from "react-native";
 import { Post } from "../util/api";
+import { StyleSheet } from "react-native";
 
 /**
  * This is the component that holds a single Post
@@ -14,8 +15,19 @@ export function PostView({ post }: { post: Post }): JSX.Element {
   const [thisPost, setThisPost] = React.useState<Post>(post);
 
   return (
-    <View style={{ flexDirection: "row", height: 100, padding: 20 }}>
-      <Text>{thisPost.content}</Text>
+    <View style={style.container}>
+      <Text style={style.font} >{thisPost.content}</Text>
     </View>
   );
 }
+
+const style = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    backgroundColor: '#fff',
+    paddingVertical: 5,
+  },
+  font: {
+    color: "#000",
+  }
+});

src/components/PostsContainer.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { View, Text } from "react-native";
 import { getPosts, Post } from "../util/api";
 import { PostView } from "./PostView";
+import { StyleSheet } from "react-native";
 
 export function PostsContainer(): JSX.Element {
   const [posts, setPosts] = React.useState<Post[]>([]);
@@ -15,7 +16,7 @@ export function PostsContainer(): JSX.Element {
   }, []);
 
   return (
-    <View style={{ height: 100, padding: 20 }}>
+    <View style={style.container}>
       <Text>Hello World!</Text>
       {posts.map((post) => (
         <PostView key={post.id} post={post} />
@@ -23,3 +24,14 @@ export function PostsContainer(): JSX.Element {
     </View>
   );
 }
+
+const style = StyleSheet.create({
+  container: {
+    height: '100%',
+    padding: 5,
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    backgroundColor: '#fff', // For the container holding the posts
+  },
+});