Better route splitting

App.tsx

@@ -5,32 +5,46 @@ import { style } from "./src/util/style";
 import { PostsContainer } from "./src/components/PostsContainer";
 import { NavigationContainer } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { NewPostContainer } from "./src/components/NewPostContainer";
 
 const Stack = createNativeStackNavigator();
 
 export default function App(): JSX.Element {
   return (
+    <>
+      <StatusBar style="light" />
       <NavigationContainer>
         <Stack.Navigator>
           <Stack.Screen
             name="Home"
             component={HomeScreen}
-          options={{
+            options={homeOptions}
+          />
+          <Stack.Screen name="New" component={PostScreen} />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </>
+  );
+}
+
+const homeOptions = {
   headerStyle: style.header,
   headerTitleStyle: style.headerTitle,
   headerTintColor: "#fff",
-          }}
-        />
-      </Stack.Navigator>
-    </NavigationContainer>
-  );
-}
+};
 
 function HomeScreen(): JSX.Element {
   return (
     <View style={style.app}>
-      <StatusBar style="light" />
       <PostsContainer />
     </View>
   );
 }
+
+function PostScreen(): JSX.Element {
+  return (
+    <View style={style.app}>
+      <NewPostContainer />
+    </View>
+  );
+}