update

src/screens/Studio/ChooseInstruments.js

@@ -5,12 +5,13 @@ import ItemContainer from "../../components/ItemContainer/ItemContainer";
 import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import { BlurView } from "expo-blur";
+import { INSTRUMENTS } from "../../data/data";
 
 const ChooseInstruments = () => {
   const [containerLayout, setContainerLayout] = useState(null);
 
   return (
-    <View style={{ flex: 1, gap: 10 }}>
+    <View style={{ flex: 1, gap: 10, paddingTop: 16 }}>
       <CreateLyricsHeader
         title="Choisis des instruments"
         subTitle="Tu peux choisir jusqu’à 5 instruments différents"
@@ -21,10 +22,10 @@ const ChooseInstruments = () => {
       >
         <ItemContainer height={containerLayout?.height}>
           <FlatList
-            data={Array.from({ length: 10 })}
+            data={INSTRUMENTS}
             showsVerticalScrollIndicator={false}
             contentContainerStyle={styles.contentContainer}
-            renderItem={() => (
+            renderItem={({ item }) => (
               <View style={styles.itemContainer}>
                 <BlurView
                   intensity={30}
@@ -35,7 +36,7 @@ const ChooseInstruments = () => {
                     justifyContent: "center",
                   }}
                 >
-                  <Text style={styles.itemText}>Piano classique</Text>
+                  <Text style={styles.itemText}>{item}</Text>
                 </BlurView>
               </View>
             )}