feat: upgrade to native wind v5

components/ContinueWatchingPoster.tsx

@@ -73,23 +73,24 @@ const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
       ${size === "small" ? "w-32" : "w-44"}
     `}
     >
-      <View className='w-full h-full flex items-center justify-center'>
-        <Image
-          key={item.Id}
-          id={item.Id}
-          source={{
-            uri: url,
-          }}
-          cachePolicy={"memory-disk"}
-          contentFit='cover'
-          className='w-full h-full'
-        />
-        {showPlayButton && (
-          <View className='absolute inset-0 flex items-center justify-center'>
-            <Ionicons name='play-circle' size={40} color='white' />
-          </View>
-        )}
-      </View>
+      <Image
+        key={item.Id}
+        id={item.Id}
+        source={{
+          uri: url,
+        }}
+        cachePolicy={"memory-disk"}
+        contentFit='cover'
+        style={{
+          height: "100%",
+          width: "100%",
+        }}
+      />
+      {showPlayButton && (
+        <View className='absolute inset-0 flex items-center justify-center'>
+          <Ionicons name='play-circle' size={40} color='white' />
+        </View>
+      )}
       {!item.UserData?.Played && <WatchedIndicator item={item} />}
       <ProgressBar item={item} />
     </View>

components/GenreTags.tsx

@@ -22,9 +22,7 @@ export const Tag: React.FC<
 > = ({ text, textClass, textStyle, ...props }) => {
   return (
     <View className='bg-neutral-800 rounded-full px-2 py-1' {...props}>
-      <Text className={textClass} style={textStyle}>
-        {text}
-      </Text>
+      <Text className='text-white'>{text}</Text>
     </View>
   );
 };

components/ItemContent.tsx

@@ -201,7 +201,7 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
           }
         >
           <View className='flex flex-col bg-transparent shrink'>
-            <View className='flex flex-col px-4 w-full space-y-2 pt-2 mb-2 shrink'>
+            <View className='flex flex-col px-4 w-full pt-2 mb-2 shrink'>
               <ItemHeader item={item} className='mb-2' />
               {item.Type !== "Program" && !Platform.isTV && !isOffline && (
                 <View className='flex flex-row items-center justify-start w-full h-16'>
@@ -287,21 +287,21 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
             {item.Type !== "Program" && (
               <>
                 {item.Type === "Episode" && !isOffline && (
-                  <CurrentSeries item={item} className='mb-4' />
+                  <CurrentSeries item={item} className='' />
                 )}
 
                 {!isOffline && (
-                  <CastAndCrew item={item} className='mb-4' loading={loading} />
+                  <CastAndCrew item={item} className='' loading={loading} />
                 )}
 
                 {item.People && item.People.length > 0 && !isOffline && (
-                  <View className='mb-4'>
+                  <View className=''>
                     {item.People.slice(0, 3).map((person, idx) => (
                       <MoreMoviesWithActor
                         currentItem={item}
                         key={idx}
                         actorId={person.Id!}
-                        className='mb-4'
+                        className=''
                       />
                     ))}
                   </View>

components/ItemTechnicalDetails.tsx

@@ -29,7 +29,7 @@ export const ItemTechnicalDetails: React.FC<Props> = ({ source }) => {
     <View className='px-4 mt-2 mb-4'>
       <Text className='text-lg font-bold mb-4'>{t("item_card.video")}</Text>
       <TouchableOpacity onPress={() => bottomSheetModalRef.current?.present()}>
-        <View className='flex flex-row space-x-2'>
+        <View className='flex flex-row mb-2'>
           <VideoStreamInfo source={source} />
         </View>
         <Text className='text-purple-600'>{t("item_card.more_details")}</Text>

components/MoreMoviesWithActor.tsx

@@ -82,7 +82,7 @@ export const MoreMoviesWithActor: React.FC<Props> = ({
       <HorizontalScroll
         data={items}
         loading={isLoading}
-        height={247}
+        height={218}
         renderItem={(item: BaseItemDto, idx: number) => (
           <TouchableItemRouter
             key={idx}

components/common/HorizontalScroll.tsx

@@ -3,17 +3,12 @@ import React, { useImperativeHandle, useRef } from "react";
 import { View, type ViewStyle } from "react-native";
 import { Text } from "./Text";
 
-type PartialExcept<T, K extends keyof T> = Partial<T> & Pick<T, K>;
-
 export interface HorizontalScrollRef {
   scrollToIndex: (index: number, viewOffset: number) => void;
 }
 
 interface HorizontalScrollProps<T>
-  extends PartialExcept<
-    Omit<FlashListProps<T>, "renderItem">,
-    "estimatedItemSize"
-  > {
+  extends Omit<FlashListProps<T>, "renderItem" | "data"> {
   data?: T[] | null;
   renderItem: (item: T, index: number) => React.ReactNode;
   keyExtractor?: (item: T, index: number) => string;
@@ -44,7 +39,7 @@ export const HorizontalScroll = <T,>(
     ...restProps
   } = props;
 
-  const flashListRef = useRef<FlashList<T>>(null);
+  const flashListRef = useRef<React.ComponentRef<typeof FlashList<T>>>(null);
 
   useImperativeHandle(ref!, () => ({
     scrollToIndex: (index: number, viewOffset: number) => {
@@ -78,7 +73,6 @@ export const HorizontalScroll = <T,>(
         extraData={extraData}
         renderItem={renderFlashListItem}
         horizontal
-        estimatedItemSize={200}
         showsHorizontalScrollIndicator={false}
         contentContainerStyle={{
           paddingHorizontal: 16,

components/common/Text.tsx

@@ -1,20 +1,29 @@
 import { Platform, Text as RNText, type TextProps } from "react-native";
-export function Text(props: TextProps) {
-  const { style, ...otherProps } = props;
+
+interface CustomTextProps extends TextProps {
+  className?: string;
+}
+
+export function Text({ className, ...props }: CustomTextProps) {
   if (Platform.isTV)
     return (
-      <RNText
-        allowFontScaling={false}
-        style={[{ color: "white" }, style]}
-        {...otherProps}
-      />
+      <RNText allowFontScaling={false} className={clsx(className)} {...props} />
     );
 
   return (
-    <RNText
-      allowFontScaling={false}
-      style={[{ color: "white" }, style]}
-      {...otherProps}
-    />
+    <RNText allowFontScaling={false} className={clsx(className)} {...props} />
   );
 }
+
+const clsx = (className?: string) => {
+  const colorClassRegex = /\btext-[a-z]+-\d+\b/;
+  const hasColorClass = className ? colorClassRegex.test(className) : false;
+  const defaultClassName = "text-white";
+  const classes = [
+    ...(hasColorClass ? [] : [defaultClassName]),
+    ...(className ? [className] : []),
+  ]
+    .filter(Boolean)
+    .join(" ");
+  return classes;
+};

components/downloads/EpisodeCard.tsx

@@ -28,7 +28,7 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
    */
   const handleDeleteFile = useCallback(() => {
     if (item.Id) {
-      deleteFile(item.Id, "Episode");
+      deleteFile(item.Id);
       successHapticFeedback();
     }
   }, [deleteFile, item.Id]);

components/home/HomeIndex.tsx

@@ -472,7 +472,7 @@ export const HomeIndex = () => {
           paddingBottom: 16,
         }}
       >
-        <View className='flex flex-col space-y-4'>
+        <View className='flex flex-col gap-4'>
           {sections.map((section, index) => {
             if (section.type === "ScrollingCollectionList") {
               return (

components/list/ListGroup.tsx

@@ -27,18 +27,23 @@ export const ListGroup: React.FC<PropsWithChildren<Props>> = ({
         {title}
       </Text>
       <View
-        style={[]}
+        style={{
+          borderRadius: 12,
+        }}
         className='flex flex-col rounded-xl overflow-hidden pl-0 bg-neutral-900'
       >
         {Children.map(childrenArray, (child, index) => {
           if (isValidElement<{ style?: ViewStyle }>(child)) {
+            const isLastItem = index === childrenArray.length - 1;
             return cloneElement(child as any, {
-              style: StyleSheet.compose(
-                child.props.style,
-                index < childrenArray.length - 1
-                  ? styles.borderBottom
-                  : undefined,
-              ),
+              ...(isLastItem
+                ? {}
+                : {
+                    style: StyleSheet.compose(
+                      child.props.style,
+                      styles.borderBottom,
+                    ),
+                  }),
             });
           }
           return child;

components/list/ListItem.tsx

@@ -107,7 +107,7 @@ const ListItemContent = ({
           </Text>
           {subtitle && (
             <Text
-              className='text-[#9899A1] text-[12px] mt-0.5'
+              className='text-neutral-500 text-[11px] mt-0.5'
               numberOfLines={2}
             >
               {subtitle}

components/series/CurrentSeries.tsx

@@ -25,7 +25,7 @@ export const CurrentSeries: React.FC<Props> = ({ item, ...props }) => {
       </Text>
       <HorizontalScroll
         data={[item]}
-        height={247}
+        height={218}
         renderItem={(item, _index) => (
           <TouchableOpacity
             key={item?.Id}
@@ -38,7 +38,7 @@ export const CurrentSeries: React.FC<Props> = ({ item, ...props }) => {
               id={item?.Id}
               url={getPrimaryImageUrlById({ api, id: item?.ParentId })}
             />
-            <Text>{item?.SeriesName}</Text>
+            <Text className='mt-2'>{item?.SeriesName}</Text>
           </TouchableOpacity>
         )}
       />