Styling in style.ts, minor refactor

App.tsx

@@ -1,23 +1,15 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { StatusBar } from "expo-status-bar";
+import { Text, View } from "react-native";
+import { style } from "./src/util/style";
 
-import { PostsContainer } from './src/components/PostsContainer';
+import { PostsContainer } from "./src/components/PostsContainer";
 
 export default function App(): JSX.Element {
   return (
-    <View style={styles.container}>
+    <View style={style.app}>
       <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', // For the "entire" app
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

src/components/PostView.tsx

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

src/components/PostsContainer.tsx

@@ -2,7 +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";
+import { style } from "../util/style";
 
 export function PostsContainer(): JSX.Element {
   const [posts, setPosts] = React.useState<Post[]>([]);
@@ -16,7 +16,7 @@ export function PostsContainer(): JSX.Element {
   }, []);
 
   return (
-    <View style={style.container}>
+    <View style={style.postsContainer}>
       <Text>Hello World!</Text>
       {posts.map((post) => (
         <PostView key={post.id} post={post} />
@@ -24,14 +24,3 @@ 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
-  },
-});

src/util/style.ts

@@ -0,0 +1,26 @@
+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",
+  },
+});