chore(with-router-tailwind): update styles and libs (#470)

- Avoid shadow on Android.
- Avoid hash URLs since they aren't supported.
- Update to latest patches.
- Fix responsive styles on desktop web.

with-router-tailwind/package.json

@@ -7,16 +7,16 @@
   },
   "dependencies": {
     "expo": "^50.0.1",
-    "expo-constants": "~15.4.2",
-    "expo-linking": "~6.2.1",
-    "expo-router": "~3.4.1",
-    "expo-splash-screen": "~0.26.1",
+    "expo-constants": "~15.4.5",
+    "expo-linking": "~6.2.2",
+    "expo-router": "~3.4.8",
+    "expo-splash-screen": "~0.26.4",
     "expo-status-bar": "~1.11.1",
     "nativewind": "^4.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.73.2",
-    "react-native-reanimated": "~3.6.0",
+    "react-native": "0.73.5",
+    "react-native-reanimated": "~3.6.2",
     "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "~3.29.0",
     "react-native-web": "~0.19.6",

with-router-tailwind/src/app/index.tsx

@@ -17,7 +17,7 @@ function Content() {
   return (
     <View className="flex-1">
       <View className="py-12 md:py-24 lg:py-32 xl:py-48">
-        <View className="container px-4 md:px-6">
+        <View className="px-4 md:px-6">
           <View className="flex flex-col items-center gap-4 text-center">
             <Text
               role="heading"
@@ -32,8 +32,8 @@ function Content() {
             <View className="gap-4">
               <Link
                 suppressHighlighting
-                className="flex h-9 items-center justify-center overflow-hidden rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-gray-50 shadow transition-colors hover:bg-gray-900/90 active:bg-gray-400/90 web:focus-visible:outline-none web:focus-visible:ring-1 focus-visible:ring-gray-950 disabled:pointer-events-none disabled:opacity-50 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/90 dark:focus-visible:ring-gray-300"
-                href="#"
+                className="flex h-9 items-center justify-center overflow-hidden rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-gray-50 web:shadow ios:shadow transition-colors hover:bg-gray-900/90 active:bg-gray-400/90 web:focus-visible:outline-none web:focus-visible:ring-1 focus-visible:ring-gray-950 disabled:pointer-events-none disabled:opacity-50 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/90 dark:focus-visible:ring-gray-300"
+                href="/"
               >
                 Explore
               </Link>
@@ -50,25 +50,25 @@ function Header() {
   return (
     <View style={{ paddingTop: top }}>
       <View className="px-4 lg:px-6 h-14 flex items-center flex-row justify-between ">
-        <Link className="font-bold flex-1 items-center justify-center" href="#">
+        <Link className="font-bold flex-1 items-center justify-center" href="/">
           ACME
         </Link>
         <View className="flex flex-row gap-4 sm:gap-6">
           <Link
             className="text-md font-medium hover:underline web:underline-offset-4"
-            href="#"
+            href="/"
           >
             About
           </Link>
           <Link
             className="text-md font-medium hover:underline web:underline-offset-4"
-            href="#"
+            href="/"
           >
             Product
           </Link>
           <Link
             className="text-md font-medium hover:underline web:underline-offset-4"
-            href="#"
+            href="/"
           >
             Pricing
           </Link>