Better route splitting

.eslintrc.cjs

@@ -1,6 +1,6 @@
 /* eslint-env node */
 module.exports = {
-    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', "prettier"],
     parser: '@typescript-eslint/parser',
     plugins: ['@typescript-eslint'],
     root: true,

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>
+  );
+}

package-lock.json

@@ -23,6 +23,8 @@
         "@typescript-eslint/eslint-plugin": "^6.14.0",
         "@typescript-eslint/parser": "^6.14.0",
         "eslint": "^8.55.0",
+        "eslint-config-prettier": "^9.1.0",
+        "prettier": "3.1.1",
         "typescript": "^5.3.3"
       }
     },
@@ -8081,6 +8083,18 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint-config-prettier": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
+      "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
+      "dev": true,
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
     "node_modules/eslint-scope": {
       "version": "7.2.2",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
@@ -12705,6 +12719,21 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.1.1.tgz",
+      "integrity": "sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",

package.json

@@ -7,7 +7,8 @@
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
-    "lint": "tsc --noEmit && eslint --ext .js,.jsx,.ts,.tsx ./"
+    "lint": "tsc --noEmit && eslint --ext .js,.jsx,.ts,.tsx ./",
+    "format": "prettier --write ."
   },
   "dependencies": {
     "@react-navigation/native": "^6.1.9",
@@ -25,6 +26,8 @@
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
     "eslint": "^8.55.0",
+    "eslint-config-prettier": "^9.1.0",
+    "prettier": "3.1.1",
     "typescript": "^5.3.3"
   },
   "private": true