update

src/screens/Studio/CustomizeVoice.js

@@ -5,12 +5,13 @@ import ItemContainer from "../../components/ItemContainer/ItemContainer";
 import { Palette, Style } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import { BlurView } from "expo-blur";
+import { VOICE } from "../../data/data";
 
 const CustomizeVoice = () => {
   const [containerLayout, setContainerLayout] = useState(null);
 
   return (
-    <View style={{ flex: 1, gap: 10 }}>
+    <View style={{ flex: 1, gap: 10, paddingTop: 16 }}>
       <CreateLyricsHeader
         title="Personnalise la voix que tu veux pour ta chanson"
         subTitle="Choisis maximum 1 option par catégorie."
@@ -33,10 +34,10 @@ const CustomizeVoice = () => {
               Base
             </Text>
             <FlatList
-              data={Array.from({ length: 10 })}
+              data={VOICE}
               showsVerticalScrollIndicator={false}
               contentContainerStyle={styles.contentContainer}
-              renderItem={() => (
+              renderItem={({ item }) => (
                 <View style={styles.itemContainer}>
                   <BlurView
                     intensity={30}
@@ -44,10 +45,10 @@ const CustomizeVoice = () => {
                       flex: 1,
                       backgroundColor: Palette.glass,
                       paddingHorizontal: 12,
-                      justifyContent: "center",
+                      paddingVertical: 14,
                     }}
                   >
-                    <Text style={styles.itemText}>Une voix féminine interpretra ta chanson.</Text>
+                    <Text style={styles.itemText}>{item}</Text>
                   </BlurView>
                 </View>
               )}
@@ -70,7 +71,6 @@ const styles = StyleSheet.create({
     paddingBottom: 50,
   },
   itemContainer: {
-    height: 54,
     backgroundColor: Palette.glass,
     borderRadius: 14,
     overflow: "hidden",