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 (
-    <NavigationContainer>
-      <Stack.Navigator>
-        <Stack.Screen
-          name="Home"
-          component={HomeScreen}
-          options={{
-            headerStyle: style.header,
-            headerTitleStyle: style.headerTitle,
-            headerTintColor: "#fff",
-          }}
-        />
-      </Stack.Navigator>
-    </NavigationContainer>
+    <>
+      <StatusBar style="light" />
+      <NavigationContainer>
+        <Stack.Navigator>
+          <Stack.Screen
+            name="Home"
+            component={HomeScreen}
+            options={homeOptions}
+          />
+          <Stack.Screen name="New" component={PostScreen} />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </>
   );
 }
 
+const homeOptions = {
+  headerStyle: style.header,
+  headerTitleStyle: style.headerTitle,
+  headerTintColor: "#fff",
+};
+
 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>
+  );
+}