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