App.tsx

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

src/components/PostView.tsx

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

src/components/PostsContainer.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { View, Text } from "react-native";
 import { getPosts, Post } from "../util/api";
 import { PostView } from "./PostView";
-import { style } from "../util/style";
 
 export function PostsContainer(): JSX.Element {
   const [posts, setPosts] = React.useState<Post[]>([]);
@@ -16,11 +15,11 @@ export function PostsContainer(): JSX.Element {
   }, []);
 
   return (
-    <View style={style.postsContainer}>
+    <View style={{ height: 100, padding: 20 }}>
       <Text>Hello World!</Text>
       {posts.map((post) => (
         <PostView key={post.id} post={post} />
       ))}
     </View>
   );
-}
+}

src/util/style.ts

@@ -1,26 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export const style = StyleSheet.create({
-  app: { // Outermost container
-    flex: 1,
-    backgroundColor: '#fff', // For the "entire" app
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  postsContainer: {
-    height: '100%',
-    padding: 5,
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    backgroundColor: '#fff', // For the container holding the posts
-  },
-  postView: {
-    flexDirection: "row",
-    backgroundColor: '#fff',
-    paddingVertical: 5,
-  },
-  postFont: {
-    color: "#000",
-  },
-});