Slight restructure, basic navigation

App.tsx

@@ -1,5 +1,4 @@
 import { StatusBar } from "expo-status-bar";
-import { View } from "react-native";
 import { style } from "./src/util/style";
 
 import { PostsContainer } from "./src/components/PostsContainer";
@@ -17,34 +16,22 @@ export default function App(): JSX.Element {
         <Stack.Navigator>
           <Stack.Screen
             name="Home"
-            component={HomeScreen}
-            options={homeOptions}
+            component={PostsContainer}
+            options={options}
+          />
+          <Stack.Screen
+            name="New"
+            options={options}
+            component={NewPostContainer}
           />
-          <Stack.Screen name="New" component={PostScreen} />
         </Stack.Navigator>
       </NavigationContainer>
     </>
   );
 }
 
-const homeOptions = {
+const options = {
   headerStyle: style.header,
   headerTitleStyle: style.headerTitle,
   headerTintColor: "#fff",
 };
-
-function HomeScreen(): JSX.Element {
-  return (
-    <View style={style.app}>
-      <PostsContainer />
-    </View>
-  );
-}
-
-function PostScreen(): JSX.Element {
-  return (
-    <View style={style.app}>
-      <NewPostContainer />
-    </View>
-  );
-}

src/components/NewPostContainer.tsx

@@ -3,7 +3,7 @@ import { View, Text, TextInput, Button } from "react-native";
 import { style } from "../util/style";
 import { createPost, NewPost } from "../util/api";
 
-export function NewPostContainer(): JSX.Element {
+export function NewPostContainer({ navigation }): JSX.Element {
   const [currentInput, setCurrentInput] = React.useState<string>("");
   const [currentInputError, setCurrentInputError] = React.useState<string>("");
 

src/components/PostsContainer.tsx

@@ -1,12 +1,12 @@
 import React from "react";
-import { RefreshControl } from "react-native";
+import { Button, RefreshControl } from "react-native";
 import { getPostsInterval, Post } from "../util/api";
 import { PostView } from "./PostView";
 import { style } from "../util/style";
 import { SafeAreaView } from "react-native";
 import { VirtualizedList } from "react-native";
 
-export function PostsContainer(): JSX.Element {
+export function PostsContainer({ navigation }): JSX.Element {
   const [postData, setPostData] = React.useState<Post[]>([]);
   const [page, setPage] = React.useState<number>(0);
   const [refreshing, setRefreshing] = React.useState<boolean>(false);
@@ -53,6 +53,11 @@ export function PostsContainer(): JSX.Element {
 
   const getItem = (_data: unknown, index: number): Post => postData[index];
   return (
+    <>
+      <Button
+        title="Go to Details"
+        onPress={() => navigation.navigate("New")}
+      />
       <SafeAreaView style={style.postsContainer}>
         <VirtualizedList
           data={postData}
@@ -74,5 +79,6 @@ export function PostsContainer(): JSX.Element {
           }
         />
       </SafeAreaView>
+    </>
   );
 }