styels

src/screens/Library/components/LikedMusic.js

@@ -1,6 +1,11 @@
-import React from "react";
-import { FlatList, Pressable, useWindowDimensions, Image as RNImage } from "react-native";
 import { Image as ExpoImage } from "expo-image";
+import React, { useState } from "react";
+import {
+  FlatList,
+  Pressable,
+  Image as RNImage,
+  useWindowDimensions,
+} from "react-native";
 import { img } from "../../../assets";
 import { Routes } from "../../../navigation";
 import { navigate } from "../../../navigation/NavigationService";
@@ -10,29 +15,33 @@ import CardContainer from "./CardContainer";
 const LikedMusic = () => {
   const { userLikedProjects = [] } = useUser();
   const items = Array.isArray(userLikedProjects)
-    ? userLikedProjects.slice(0, 6)
+    ? userLikedProjects.slice(0, 3)
     : [];
   const { width: screenWidth } = useWindowDimensions();
+  const [containerWidth, setContainerWidth] = useState(screenWidth);
   const numColumns = 3;
-  const gap = 6;
-  const containerGap = 10;
-  const totalGap = gap * (numColumns - 1) + containerGap * 2;
-  const itemWidth = (screenWidth - totalGap) / numColumns;
+  const gap = 8;
+  const itemWidth = Math.max(
+    0,
+    Math.floor((containerWidth - gap * (numColumns - 1)) / numColumns)
+  );
   return (
     <CardContainer
       label="Musiques likées"
       onPress={() => navigate(Routes.AllMyLikedMusic)}
     >
       <FlatList
+        onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
         scrollEnabled={false}
         data={items}
         numColumns={numColumns}
-        contentContainerStyle={{ gap: containerGap }}
-        columnWrapperStyle={{ gap }}
+        key={numColumns}
+        contentContainerStyle={{}}
+        columnWrapperStyle={numColumns > 1 ? { gap } : null}
         keyExtractor={(item) => item.id}
         renderItem={({ item }) => (
           <Pressable
-            style={{ flex: 1 }}
+            style={{ width: itemWidth }}
             onPress={() =>
               navigate(Routes.MusicDetails, { projectId: item.id })
             }
@@ -45,7 +54,8 @@ const LikedMusic = () => {
                 contentFit="cover"
                 transition={100}
                 style={{
-                  height: itemWidth - containerGap,
+                  width: "100%",
+                  height: itemWidth,
                   borderRadius: 10,
                 }}
               />
@@ -53,7 +63,8 @@ const LikedMusic = () => {
               <RNImage
                 source={img.placeholder3}
                 style={{
-                  height: itemWidth - containerGap,
+                  width: "100%",
+                  height: itemWidth,
                   borderRadius: 10,
                 }}
               />