diff --git a/src/screens/HitParade/HitParade.js b/src/screens/HitParade/HitParade.js
index 4d779fc..d359d35 100644
--- a/src/screens/HitParade/HitParade.js
+++ b/src/screens/HitParade/HitParade.js
@@ -66,6 +66,8 @@ const HitParade = () => {
style={{
...Style.containerRow,
justifyContent: "space-between",
+ gap: "10%",
+ width: "auto",
}}
>
{/*{["Chansons", "Playbacks", "Clips"].map((item, index) => (*/}
@@ -76,7 +78,7 @@ const HitParade = () => {
onPress={() => setSelected(item)}
tint={selected === item ? "light" : "dark"}
containerStyle={{
- width: 100,
+ width: "50%",
}}
titleStyle={{
fontSize: 16,
diff --git a/src/screens/Library/MusicDetails.js b/src/screens/Library/MusicDetails.js
index 9123dfb..c78aae9 100644
--- a/src/screens/Library/MusicDetails.js
+++ b/src/screens/Library/MusicDetails.js
@@ -525,8 +525,8 @@ export default MusicDetails;
const styles = StyleSheet.create({
img: {
- width: 292,
- height: 290,
+ width: 160,
+ height: 160,
borderRadius: 24,
alignSelf: "center",
},
diff --git a/src/screens/Library/components/BackTracks.js b/src/screens/Library/components/BackTracks.js
index 1e9ffc5..fa98f91 100644
--- a/src/screens/Library/components/BackTracks.js
+++ b/src/screens/Library/components/BackTracks.js
@@ -1,21 +1,47 @@
-import { View, Text, Image } from "react-native";
-import React from "react";
-import { img } from "../../../assets";
+import React, { useState } from "react";
+import { FlatList, Image, Text, View, useWindowDimensions } from "react-native";
+import { useUserData } from "../../../providers/UserDataProvider";
import { Style } from "../../../styles";
import CardContainer from "./CardContainer";
-
const BackTracks = () => {
+ const { userPlaybacks } = useUserData();
+ const items = Array.isArray(userPlaybacks) ? userPlaybacks.slice(0, 3) : [];
+ const { width: screenWidth } = useWindowDimensions();
+ const [containerWidth, setContainerWidth] = useState(screenWidth);
+ const numColumns = 3;
+ const gap = 8;
+ const itemWidth = Math.max(
+ 0,
+ Math.floor((containerWidth - gap * (numColumns - 1)) / numColumns)
+ );
+
return (
-
- {Array.from({ length: 3 }).map((_, index) => (
-
-
-
- ))}
+
+ {items.length > 0 ? (
+ setContainerWidth(e.nativeEvent.layout.width)}
+ data={items}
+ numColumns={numColumns}
+ key={numColumns}
+ columnWrapperStyle={{ gap }}
+ keyExtractor={(item) => item.id}
+ renderItem={({ item }) => (
+
+
+
+ )}
+ />
+ ) : (
+ Aucun playback pour l'instant
+ )}
);
diff --git a/src/screens/Library/components/LikedMusic.js b/src/screens/Library/components/LikedMusic.js
index de5c311..4900e10 100644
--- a/src/screens/Library/components/LikedMusic.js
+++ b/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 (
navigate(Routes.AllMyLikedMusic)}
>
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 }) => (
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 = () => {
diff --git a/src/screens/Profile/Profile.js b/src/screens/Profile/Profile.js
index 481b163..e7b7155 100644
--- a/src/screens/Profile/Profile.js
+++ b/src/screens/Profile/Profile.js
@@ -65,7 +65,7 @@ const Profile = () => {
setFollowers(
Array.isArray(currentUserData?.followedBy)
? currentUserData.followedBy.length
- : 0,
+ : 0
);
return;
}
@@ -119,6 +119,7 @@ const Profile = () => {
data={data}
contentContainerStyle={{
gap: 10,
+ marginBottom: 80,
}}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (