upgrade to v4

apps/mobile/app/components/ExternalLink.tsx

@@ -0,0 +1,27 @@
+import { Link } from 'expo-router';
+import * as WebBrowser from 'expo-web-browser';
+import React from 'react';
+import { Platform } from 'react-native';
+
+export function ExternalLink(
+  props: Omit<React.ComponentProps<typeof Link>, 'href'> & { href: string },
+) {
+  return (
+    <Link
+      hrefAttrs={{
+        // On web, launch the link in a new tab.
+        target: '_blank',
+      }}
+      {...props}
+      href={props.href}
+      onPress={(e) => {
+        if (Platform.OS !== 'web') {
+          // Prevent the default behavior of linking to the default browser on native.
+          e.preventDefault();
+          // Open the link in an in-app browser.
+          WebBrowser.openBrowserAsync(props.href as string);
+        }
+      }}
+    />
+  );
+}

apps/mobile/app/components/TabBarIcon.tsx

@@ -0,0 +1,16 @@
+import { FontAwesome } from '@expo/vector-icons';
+import Colors from '../constants/Colors';
+
+type Props = {
+  focused?: boolean;
+} & React.ComponentProps<typeof FontAwesome>;
+
+export default function TabBarIcon({ focused, ...rest }: Props) {
+  return (
+    <FontAwesome
+      color={focused ? Colors.primary[300] : Colors.secondary[300]}
+      size={24}
+      {...rest}
+    />
+  );
+}

apps/mobile/app/components/item/item.tsx

@@ -0,0 +1,25 @@
+import { Image, Text, View } from 'react-native';
+
+import { TMDB_POSTER_PATH } from '../../constants/General';
+
+export default function Item() {
+  return (
+    <View className="w-full">
+      <View className="mb-2 aspect-[9/14] w-full overflow-hidden rounded-2xl">
+        <Image
+          source={{
+            uri: `${TMDB_POSTER_PATH}/w342//gdIrmf2DdY5mgN6ycVP0XlzKzbE.jpg`,
+            width: 200,
+          }}
+          className="h-full w-full object-cover"
+        />
+      </View>
+      <Text className="font-bold text-white">Hamilton</Text>
+      <View className="flex-row items-center gap-3">
+        <Text className="text-xs text-gray-600">Movie</Text>
+        <View className="h-1 w-1 rounded-3xl bg-gray-600" />
+        <Text className="text-sm text-gray-600">2023</Text>
+      </View>
+    </View>
+  );
+}

apps/mobile/app/components/layout/ScreenLayout.tsx

@@ -0,0 +1,20 @@
+import { Text, View } from 'react-native';
+
+type Props = {
+  title?: React.ReactNode | string;
+  subtitle?: string;
+  children?: React.ReactNode;
+};
+
+export default function ScreenLayout({ title, subtitle, children }: Props) {
+  return (
+    <View className="bg-shade-900 flex-1 p-12">
+      {typeof title === 'string' && (
+        <Text className="text-2xl font-bold text-white">{title}</Text>
+      )}
+      {typeof title !== 'string' && title}
+      <Text className="mt-1 text-sm font-bold text-white">{subtitle}</Text>
+      <View className="py-3">{children}</View>
+    </View>
+  );
+}