fix: use stylesheets here because nativewind is broken on iOS

apps/expo/src/app/(tabs)/_layout.tsx

@@ -1,5 +1,5 @@
 import { useRef } from "react";
-import { Platform, View } from "react-native";
+import { Platform, StyleSheet, View } from "react-native";
 import * as Haptics from "expo-haptics";
 import { Tabs } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
@@ -9,7 +9,6 @@ import { defaultTheme } from "@movie-web/tailwind-config/themes";
 import { MovieWebSvg } from "~/components/Icon";
 import SvgTabBarIcon from "~/components/SvgTabBarIcon";
 import TabBarIcon from "~/components/TabBarIcon";
-import { cn } from "~/lib/utils";
 import SearchTabContext from "../../components/ui/SearchTabContext";
 
 export default function TabLayout() {
@@ -84,13 +83,10 @@ export default function TabLayout() {
             tabBarLabel: "",
             tabBarIcon: ({ focused }) => (
               <View
-                className={cn(
+                style={[
-                  `top-2 flex h-14 w-14 items-center justify-center overflow-hidden rounded-full text-center align-middle text-2xl text-white ${focused ? "bg-tabBar-active" : "bg-tabBar-inactive"}`,
+                  styles.searchTab,
-                  {
+                  focused ? styles.active : styles.inactive,
-                    "bg-tabBar-active": focused,
+                ]}
-                    "bg-tabBar-inactive": !focused,
-                  },
-                )}
               >
                 <TabBarIcon name="search" color="#FFF" />
               </View>
@@ -121,3 +117,23 @@ export default function TabLayout() {
     </SearchTabContext.Provider>
   );
 }
+
+const styles = StyleSheet.create({
+  searchTab: {
+    top: 2,
+    height: 56, // 14 units in your scale
+    width: 56, // 14 units in your scale
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    borderRadius: 100,
+    textAlign: "center",
+    // 'alignMiddle' and 'text2xl' would be dependent on your specific implementation
+  },
+  active: {
+    backgroundColor: defaultTheme.extend.colors.tabBar.active,
+  },
+  inactive: {
+    backgroundColor: defaultTheme.extend.colors.tabBar.inactive,
+  },
+});

apps/expo/src/components/player/ScrapeCard.tsx

@@ -1,11 +1,10 @@
 import type { ReactNode } from "react";
 import React from "react";
-import { View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
 
 import { defaultTheme } from "@movie-web/tailwind-config/themes";
 
-import { cn } from "~/lib/utils";
 import { Text } from "../ui/Text";
 
 export interface ScrapeItemProps {
@@ -83,37 +82,87 @@ export function ScrapeItem(props: ScrapeItemProps) {
   const text = statusTextMap[props.status];
 
   return (
-    <View className="flex flex-col">
+    <View style={styles.scrapeItemContainer}>
-      <View className="flex flex-row items-center gap-4">
+      <View style={styles.itemRow}>
         <StatusCircle type={props.status} percentage={props.percentage ?? 0} />
         <Text
-          className={cn("text-lg", {
+          style={[
-            "text-white": props.status === "pending",
+            styles.itemText,
-            "text-type-secondary": props.status !== "pending",
+            props.status === "pending"
-          })}
+              ? styles.textPending
+              : styles.textSecondary,
+          ]}
         >
           {props.name}
         </Text>
       </View>
-      <View className="flex flex-row gap-4">
+      <View style={styles.textRow}>
-        <View style={{ width: 40 }} />
+        <View style={styles.spacer} />
-        <View>{text && <Text className="mt-1 text-lg">{text}</Text>}</View>
+        <View>{text && <Text style={styles.statusText}>{text}</Text>}</View>
       </View>
-      <View className="ml-12">{props.children}</View>
+      <View style={styles.childrenContainer}>{props.children}</View>
     </View>
   );
 }
 
 export function ScrapeCard(props: ScrapeCardProps) {
   return (
-    <View className="w-96">
+    <View style={styles.cardContainer}>
       <View
-        className={cn("w-96 rounded-xl px-6 py-3", {
+        style={[
-          "bg-video-scraping-card": props.hasChildren,
+          styles.cardContent,
-        })}
+          props.hasChildren ? styles.cardBackground : null,
+        ]}
       >
         <ScrapeItem {...props} />
       </View>
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  scrapeItemContainer: {
+    flex: 1,
+    flexDirection: "column",
+  },
+  itemRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 16,
+  },
+  itemText: {
+    fontSize: 18,
+  },
+  textPending: {
+    color: "white",
+  },
+  textSecondary: {
+    color: "secondaryColor",
+  },
+  textRow: {
+    flexDirection: "row",
+    gap: 16,
+  },
+  spacer: {
+    width: 40,
+  },
+  statusText: {
+    marginTop: 4,
+    fontSize: 18,
+  },
+  childrenContainer: {
+    marginLeft: 48,
+  },
+  cardContainer: {
+    width: 384,
+  },
+  cardContent: {
+    width: 384,
+    borderRadius: 10,
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+  },
+  cardBackground: {
+    backgroundColor: "cardBackgroundColor",
+  },
+});