feat: horizontal scroll for ItemListSection

apps/expo/src/components/HomeScreenContent.tsx

@@ -107,7 +107,7 @@ export default function HomeScreenContent() {
       <ScrollView
         onScrollBeginDrag={handleScrollBegin}
         onMomentumScrollEnd={handleScrollEnd}
-        scrollEnabled={data && data.length > 0 ? true : false}
+        scrollEnabled={searchResultsLoaded ? true : false}
         keyboardDismissMode="on-drag"
         keyboardShouldPersistTaps="handled"
       >
@@ -134,8 +134,14 @@ export default function HomeScreenContent() {
                 bookmarks.length > 0 || watching.length > 0 ? true : false
               }
             >
-              <ItemListSection title="Bookmarks" items={bookmarks} />
-              <ItemListSection title="Continue Watching" items={watching} />
+              <ItemListSection
+                title="Bookmarks"
+                items={bookmarks.concat(watching)}
+              />
+              <ItemListSection
+                title="Continue Watching"
+                items={watching.concat(bookmarks)}
+              />
             </ScrollView>
           )}
         </ScreenLayout>

apps/expo/src/components/item/ItemListSection.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Text, View } from "react-native";
+import { Dimensions, ScrollView, Text, View } from "react-native";
 
 import type { ItemData } from "~/components/item/item";
 import Item from "~/components/item/item";
@@ -42,6 +42,10 @@ export const watching: ItemData[] = [
   },
 ];
 
+const padding = 20;
+const screenWidth = Dimensions.get("window").width;
+const itemWidth = screenWidth / 2.3 - padding;
+
 export const ItemListSection = ({
   title,
   items,
@@ -54,13 +58,24 @@ export const ItemListSection = ({
       <Text className="mb-2 mt-4 text-xl font-semibold text-white">
         {title}
       </Text>
-      <View className="flex w-full flex-1 flex-row flex-wrap justify-start">
+      <ScrollView
+        horizontal={true}
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ paddingHorizontal: 3 }}
+      >
         {items.map((item, index) => (
-          <View key={index} className="basis-1/2 px-3 pb-3">
+          <View
+            key={index}
+            style={{
+              width: itemWidth,
+              paddingHorizontal: padding / 2,
+              paddingBottom: padding,
+            }}
+          >
             <Item data={item} />
           </View>
         ))}
-      </View>
+      </ScrollView>
     </View>
   );
 };