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}
+            component={PostsContainer}
-            options={homeOptions}
+            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,26 +53,32 @@ export function PostsContainer(): JSX.Element {
 
   const getItem = (_data: unknown, index: number): Post => postData[index];
   return (
-    <SafeAreaView style={style.postsContainer}>
+    <>
-      <VirtualizedList
+      <Button
-        data={postData}
+        title="Go to Details"
-        initialNumToRender={4}
+        onPress={() => navigation.navigate("New")}
-        renderItem={({ item }) => (
-          <PostView key={item.id + item.createdAt} post={item} />
-        )}
-        keyExtractor={(item: Post) => item.id + item.createdAt}
-        getItemCount={getItemCount}
-        getItem={getItem}
-        onEndReached={handleEndReached}
-        onEndReachedThreshold={0.4}
-        refreshControl={
-          <RefreshControl
-            refreshing={refreshing}
-            onRefresh={onRefresh}
-            colors={["#007AFF"]}
-          />
-        }
       />
-    </SafeAreaView>
+      <SafeAreaView style={style.postsContainer}>
+        <VirtualizedList
+          data={postData}
+          initialNumToRender={4}
+          renderItem={({ item }) => (
+            <PostView key={item.id + item.createdAt} post={item} />
+          )}
+          keyExtractor={(item: Post) => item.id + item.createdAt}
+          getItemCount={getItemCount}
+          getItem={getItem}
+          onEndReached={handleEndReached}
+          onEndReachedThreshold={0.4}
+          refreshControl={
+            <RefreshControl
+              refreshing={refreshing}
+              onRefresh={onRefresh}
+              colors={["#007AFF"]}
+            />
+          }
+        />
+      </SafeAreaView>
+    </>
   );
 }