From f40d5c8051d4d36365441bb587fcc3d2e8d02bb0 Mon Sep 17 00:00:00 2001
From: Victor <victordebournet@gmail.com>
Date: Wed, 17 Sep 2025 16:24:06 +0200
Subject: [PATCH] fix - input & profile flatlist

---
 src/components/Input.js        |  94 +++++++++---------
 src/screens/Profile/Profile.js | 173 ++++++++++++++++-----------------
 2 files changed, 129 insertions(+), 138 deletions(-)

diff --git a/src/components/Input.js b/src/components/Input.js
index 67505ec..4ccf62a 100644
--- a/src/components/Input.js
+++ b/src/components/Input.js
@@ -166,57 +166,57 @@ const Input = ({
               }}
             />
           ) : */}
-          (
-          <TextInput
-            ref={inputRef}
-            placeholder={placeholder}
-            placeholderTextColor={Palette.gray}
-            value={value}
-            onChangeText={setValue}
-            multiline={type === 'textarea'}
-            editable={type !== 'countryPicker'}
-            onFocus={() => setIsFocused(true)}
-            onBlur={() => setIsFocused(false)}
-            style={{
-              width: '100%',
-              ...(isRoundedRectangle
+          {type !== 'countryPicker' && (
+            <TextInput
+              ref={inputRef}
+              placeholder={placeholder}
+              placeholderTextColor={Palette.gray}
+              value={value}
+              onChangeText={setValue}
+              multiline={type === 'textarea'}
+              editable={type !== 'countryPicker'}
+              onFocus={() => setIsFocused(true)}
+              onBlur={() => setIsFocused(false)}
+              style={{
+                width: '100%',
+                ...(isRoundedRectangle
+                  ? {
+                      height: '100%',
+                      flex: 1,
+                      textAlignVertical: type === 'textarea' ? 'top' : 'center',
+                    }
+                  : { textAlign: 'center' }),
+                fontSize: 14,
+                color: Palette.white,
+                fontFamily: FONT_FAMILY.InterRegular,
+                ...(isWeb
+                  ? {
+                      lineHeight: 'auto',
+                    }
+                  : {}),
+                ...textInputStyle,
+              }}
+              {...(type === 'password'
                 ? {
-                    height: '100%',
-                    flex: 1,
-                    textAlignVertical: type === 'textarea' ? 'top' : 'center',
+                    secureTextEntry: !showPassword,
+                    autoCapitalize: 'none',
+                    autoCompleteType: 'password',
+                    textContentType: 'password',
                   }
-                : { textAlign: 'center' }),
-              fontSize: 14,
-              color: Palette.white,
-              fontFamily: FONT_FAMILY.InterRegular,
-              ...(isWeb
+                : {})}
+              {...(type === 'email'
                 ? {
-                    lineHeight: 'auto',
+                    keyboardType: 'email-address',
+                    autoCapitalize: 'none',
+                    autoCompleteType: 'email',
+                    textContentType: 'emailAddress',
                   }
-                : {}),
-              ...textInputStyle,
-            }}
-            {...(type === 'password'
-              ? {
-                  secureTextEntry: !showPassword,
-                  autoCapitalize: 'none',
-                  autoCompleteType: 'password',
-                  textContentType: 'password',
-                }
-              : {})}
-            {...(type === 'email'
-              ? {
-                  keyboardType: 'email-address',
-                  autoCapitalize: 'none',
-                  autoCompleteType: 'email',
-                  textContentType: 'emailAddress',
-                }
-              : {})}
-            keyboardType={isNumeric ? 'numeric' : 'default'}
-            keyboardAppearance='dark'
-            inputAccessoryViewID={inputAccessoryViewID}
-            {...textInputProps}
-          />
+                : {})}
+              keyboardType={isNumeric ? 'numeric' : 'default'}
+              keyboardAppearance='dark'
+              inputAccessoryViewID={inputAccessoryViewID}
+              {...textInputProps}
+            />
           )}
           {type === 'password' ? (
             <Pressable onPress={() => setShowPassword(!showPassword)}>
diff --git a/src/screens/Profile/Profile.js b/src/screens/Profile/Profile.js
index d0ce542..34e52c6 100644
--- a/src/screens/Profile/Profile.js
+++ b/src/screens/Profile/Profile.js
@@ -1,7 +1,7 @@
-import { useRoute } from "@react-navigation/native";
-import { BlurView } from "expo-blur";
-import { Image as ExpoImage } from "expo-image";
-import React, { useEffect, useMemo, useState } from "react";
+import { useRoute } from '@react-navigation/native';
+import { BlurView } from 'expo-blur';
+import { Image as ExpoImage } from 'expo-image';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   FlatList,
   Image,
@@ -11,27 +11,27 @@ import {
   StyleSheet,
   Text,
   View,
-} from "react-native";
-import { SheetManager } from "react-native-actions-sheet";
-import { responsiveHeight } from "react-native-responsive-dimensions";
-import { useGlobal } from "reactn";
-import { background, icons, img } from "../../assets";
-import BorderGradient from "../../components/BorderGradient/BorderGradient";
-import MoreMenu from "../../components/MoreMenu";
-import { projectsRef, usersRef } from "../../config/firebase";
-import useDataFromRef from "../../hooks/useDataFromRef";
-import Page from "../../layouts/Page";
-import { Routes } from "../../navigation";
-import { navigate, push } from "../../navigation/NavigationService";
-import { useUser } from "../../providers/UserDataProvider";
-import { Palette } from "../../styles";
-import { FONT_FAMILY } from "../../styles/Fonts";
-import Style, { gutters, size } from "../../styles/Style";
-import MusicCard from "../Library/components/MusicCard";
+} from 'react-native';
+import { SheetManager } from 'react-native-actions-sheet';
+import { responsiveHeight } from 'react-native-responsive-dimensions';
+import { useGlobal } from 'reactn';
+import { background, icons, img } from '../../assets';
+import BorderGradient from '../../components/BorderGradient/BorderGradient';
+import MoreMenu from '../../components/MoreMenu';
+import { projectsRef, usersRef } from '../../config/firebase';
+import useDataFromRef from '../../hooks/useDataFromRef';
+import Page from '../../layouts/Page';
+import { Routes } from '../../navigation';
+import { navigate, push } from '../../navigation/NavigationService';
+import { useUser } from '../../providers/UserDataProvider';
+import { Palette } from '../../styles';
+import { FONT_FAMILY } from '../../styles/Fonts';
+import Style, { gutters, size } from '../../styles/Style';
+import MusicCard from '../Library/components/MusicCard';
 
 const Profile = () => {
   const { params } = useRoute();
-  const [selected, setSelected] = useState("Chansons");
+  const [selected, setSelected] = useState('Chansons');
   const {
     userProjects: selfProjects,
     userPlaybacks: selfPlaybacks,
@@ -41,10 +41,10 @@ const Profile = () => {
     followUser,
     unfollowUser,
   } = useUser();
-  const [currentUID] = useGlobal("currentUID");
+  const [currentUID] = useGlobal('currentUID');
   const targetUserId = params?.userId || currentUID || null;
   const isSelf = !!currentUID && targetUserId === currentUID;
-  const [, setTooltip] = useGlobal("_tooltip");
+  const [, setTooltip] = useGlobal('_tooltip');
   const [userData, setUserData] = useState(null);
   const [isFollowing, setIsFollowing] = useState(false);
   const [followers, setFollowers] = useState(0);
@@ -65,7 +65,7 @@ const Profile = () => {
         setFollowers(
           Array.isArray(currentUserData?.followedBy)
             ? currentUserData.followedBy.length
-            : 0,
+            : 0
         );
         return;
       }
@@ -82,7 +82,7 @@ const Profile = () => {
   const followingQueryRef = useMemo(() => {
     try {
       return targetUserId
-        ? usersRef.where("followedBy", "array-contains", targetUserId)
+        ? usersRef.where('followedBy', 'array-contains', targetUserId)
         : null;
     } catch (e) {
       return null;
@@ -113,7 +113,7 @@ const Profile = () => {
 
   // Composant factorisé pour afficher la liste de musiques
   const MusicListSection = ({ data, emptyText }) => (
-    <ScrollView style={{ flex: 1 }}>
+    <ScrollView style={{ flex: 1, marginBottom: 70 }}>
       {Array.isArray(data) && data.length > 0 ? (
         <FlatList
           data={data}
@@ -124,10 +124,10 @@ const Profile = () => {
           keyExtractor={(item) => item.id}
           renderItem={({ item }) => (
             <MusicCard
-              title={item?.title || "Sans titre"}
+              title={item?.title || 'Sans titre'}
               subtitle={
                 (isSelf ? currentUserData?.userName : userData?.userName) ||
-                "MusicLand"
+                'MusicLand'
               }
               imageUri={item?.coverUrl || null}
               projectId={item?.id}
@@ -156,25 +156,25 @@ const Profile = () => {
           isSelf
             ? [
                 {
-                  label: "Supprimer",
+                  label: 'Supprimer',
                   onPress: () =>
-                    SheetManager.show("Delete", {
+                    SheetManager.show('Delete', {
                       payload: {
-                        title: "Supprimer le projet",
+                        title: 'Supprimer le projet',
                         message:
-                          "Cette action supprimera définitivement ce projet.",
+                          'Cette action supprimera définitivement ce projet.',
                         onConfirm: async () => {
                           try {
                             if (!selectedProjectId) return;
                             await projectsRef.doc(selectedProjectId).delete();
                             setTooltip({
-                              type: "success",
-                              text: "Projet supprimé",
+                              type: 'success',
+                              text: 'Projet supprimé',
                             });
                           } catch (e) {
                             setTooltip({
-                              type: "error",
-                              text: e?.message || "Suppression impossible",
+                              type: 'error',
+                              text: e?.message || 'Suppression impossible',
                             });
                           }
                         },
@@ -196,8 +196,7 @@ const Profile = () => {
           color: Palette.white,
           fontFamily: FONT_FAMILY.InterRegular,
           opacity: 0.8,
-        }}
-      >
+        }}>
         {text}
       </Text>
     </View>
@@ -208,8 +207,8 @@ const Profile = () => {
     try {
       if (!targetUserId || isSelf) return null;
       return projectsRef
-        .where("userId", "==", targetUserId)
-        .orderBy("updatedAt", "desc");
+        .where('userId', '==', targetUserId)
+        .orderBy('updatedAt', 'desc');
     } catch (e) {
       return null;
     }
@@ -229,24 +228,23 @@ const Profile = () => {
   return (
     <Page
       backgroundImg={background.profileBG}
-      headerType="NAVIGATE"
+      headerType='NAVIGATE'
       hideBackButton={params?.noBack}
       contentContainerStyle={{
         paddingBottom: gutters * 2,
       }}
       containerStyle={{
-        backgroundColor: "#0000004D",
+        backgroundColor: '#0000004D',
       }}
       rightComponent={() =>
         isSelf ? (
-          <Pressable onPress={() => SheetManager.show("ProfileSettings")}>
+          <Pressable onPress={() => SheetManager.show('ProfileSettings')}>
             <Image source={icons.more} style={{ ...size({ size: 24 }) }} />
           </Pressable>
         ) : null
-      }
-    >
+      }>
       <View style={{ flex: 1, marginTop: responsiveHeight(2), gap: 20 }}>
-        <View style={{ borderRadius: 20, overflow: "hidden" }}>
+        <View style={{ borderRadius: 20, overflow: 'hidden' }}>
           <BlurView
             intensity={20}
             style={{
@@ -258,7 +256,7 @@ const Profile = () => {
             //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
             // }
           >
-            <View style={{ alignItems: "center" }}>
+            <View style={{ alignItems: 'center' }}>
               <ExpoImage
                 source={
                   (
@@ -273,9 +271,9 @@ const Profile = () => {
                       }
                     : img.profile
                 }
-                cachePolicy="memory-disk"
-                priority="high"
-                contentFit="cover"
+                cachePolicy='memory-disk'
+                priority='high'
+                contentFit='cover'
                 transition={100}
                 style={{
                   ...size({ size: 108 }),
@@ -287,14 +285,13 @@ const Profile = () => {
                   fontSize: 22,
                   color: Palette.white,
                   fontFamily: FONT_FAMILY.InterSemiBold,
-                }}
-              >
+                }}>
                 {(isSelf ? currentUserData?.userName : userData?.userName) ||
-                  "Profil"}
+                  'Profil'}
               </Text>
             </View>
             <View style={{ ...Style.containerRow, gap: 10, marginTop: 10 }}>
-              <View style={{ flex: 1, alignItems: "center" }}>
+              <View style={{ flex: 1, alignItems: 'center' }}>
                 <Text style={styles.value}>
                   {Array.isArray(displayedProjects)
                     ? displayedProjects.length
@@ -303,14 +300,13 @@ const Profile = () => {
                 <Text style={styles.label}>projets</Text>
               </View>
               <Pressable
-                style={{ flex: 1, alignItems: "center" }}
+                style={{ flex: 1, alignItems: 'center' }}
                 onPress={() =>
                   push(Routes.Follows, {
-                    selected: "Abonnés",
+                    selected: 'Abonnés',
                     ...(isSelf ? {} : { userId: targetUserId }),
                   })
-                }
-              >
+                }>
                 <Text style={styles.value}>
                   {isSelf
                     ? currentUserData?.followedBy?.length || 0
@@ -319,14 +315,13 @@ const Profile = () => {
                 <Text style={styles.label}>abonnés</Text>
               </Pressable>
               <Pressable
-                style={{ flex: 1, alignItems: "center" }}
+                style={{ flex: 1, alignItems: 'center' }}
                 onPress={() =>
                   push(Routes.Follows, {
-                    selected: "Abonnements",
+                    selected: 'Abonnements',
                     ...(isSelf ? {} : { userId: targetUserId }),
                   })
-                }
-              >
+                }>
                 <Text style={styles.value}>
                   {isSelf ? followingCount : following}
                 </Text>
@@ -339,23 +334,21 @@ const Profile = () => {
                   style={{
                     height: 36,
                     borderRadius: 100,
-                    overflow: "hidden",
-                    backgroundColor: "#FFFFFF22",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    width: "80%",
-                    alignSelf: "center",
+                    overflow: 'hidden',
+                    backgroundColor: '#FFFFFF22',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: '80%',
+                    alignSelf: 'center',
                     marginTop: 18,
-                  }}
-                >
+                  }}>
                   <Text
                     style={{
                       fontSize: 12,
                       color: Palette.white,
                       fontFamily: FONT_FAMILY.InterSemiBold,
-                    }}
-                  >
-                    {isFollowing ? "Ne plus suivre" : "Suivre"}
+                    }}>
+                    {isFollowing ? 'Ne plus suivre' : 'Suivre'}
                   </Text>
                 </View>
               </Pressable>
@@ -366,20 +359,18 @@ const Profile = () => {
           style={{
             ...Style.containerRow,
             gap: 6,
-          }}
-        >
+          }}>
           {/*{["Chansons", "Playbacks", "Clips"].map((item, index) => (*/}
-          {["Chansons", "Playbacks"].map((item, index) => (
+          {['Chansons', 'Playbacks'].map((item, index) => (
             <Pressable
               key={index}
               onPress={() => onPressMenu(item)}
-              style={{ flex: 1 }}
-            >
+              style={{ flex: 1 }}>
               <BorderGradient
                 gradientProps={{
                   colors:
                     selected === item
-                      ? ["#FFFFFF00", "#FFFFFF"]
+                      ? ['#FFFFFF00', '#FFFFFF']
                       : [Palette.tran, Palette.tran],
                   locations: [0, 1],
                   start: { x: 0, y: 0 },
@@ -401,22 +392,22 @@ const Profile = () => {
             </Pressable>
           ))}
         </View>
-        {selected === "Playbacks" && (
+        {selected === 'Playbacks' && (
           <MusicListSection
             data={displayedPlaybacks}
-            emptyText="Aucun playback pour le moment"
+            emptyText='Aucun playback pour le moment'
           />
         )}
-        {selected === "Chansons" && (
+        {selected === 'Chansons' && (
           <MusicListSection
             data={displayedProjects}
-            emptyText="Aucune chanson pour le moment"
+            emptyText='Aucune chanson pour le moment'
           />
         )}
 
-        {selected === "Clips" && (
+        {selected === 'Clips' && (
           <View style={{ flex: 1 }}>
-            <EmptyText text={"Aucun clip pour le moment"} />
+            <EmptyText text={'Aucun clip pour le moment'} />
           </View>
         )}
       </View>
@@ -446,20 +437,20 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: 10,
     height: 33,
-    position: "absolute",
+    position: 'absolute',
     zIndex: 1,
-    width: "100%",
+    width: '100%',
   },
   blurContainer: {
     height: 33,
     zIndex: -1,
     borderRadius: 10,
-    overflow: "hidden",
+    overflow: 'hidden',
     backgroundColor: Palette.glass,
   },
   blurView: {
-    width: "100%",
-    height: "100%",
+    width: '100%',
+    height: '100%',
     paddingHorizontal: 10,
     ...Style.containerCenter,
   },