NavButton breakout

src/components/PostsContainer.tsx

@@ -52,12 +52,10 @@ export function PostsContainer({ navigation }): JSX.Element {
   const getItemCount = (_data: unknown): number => postData.length;
 
   const getItem = (_data: unknown, index: number): Post => postData[index];
+
   return (
     <>
-      <Button
+      <NavButton onPress={() => navigation.navigate("New")} text="New Post" />
-        title="Go to Details"
-        onPress={() => navigation.navigate("New")}
-      />
       <SafeAreaView style={style.postsContainer}>
         <VirtualizedList
           data={postData}
@@ -82,3 +80,15 @@ export function PostsContainer({ navigation }): JSX.Element {
     </>
   );
 }
+
+function NavButton({
+  onPress,
+  text,
+}: {
+  onPress: () => void;
+  text: string;
+}): JSX.Element {
+  return (
+    <Button title={text} onPress={onPress} color={style.navButton.color} />
+  );
+}

src/util/style.ts

@@ -62,4 +62,8 @@ export const style = StyleSheet.create({
   errorText: {
     color: colorScheme.error,
   },
+  navButton: {
+    backgroundColor: colorScheme.background,
+    color: colorScheme.postFont,
+  },
 });