update

src/assets/index.js

@@ -165,23 +165,37 @@ export const mockups = {
 import writingBG from "./UI/writingBG.png";
 import studioBG from "./UI/studioBG.png";
 import studioBG2 from "./UI/studioBG2.png";
+import productionBG from "./UI/productionBG.png";
+import productionBG2 from "./UI/productionBG2.png";
+import playbackBG from "./UI/playbackBG.png";
+import playbackBG2 from "./UI/playbackBG2.png";
 
 export const background = {
   writingBG,
   studioBG,
   studioBG2,
+  productionBG,
+  productionBG2,
+  playbackBG,
+  playbackBG2,
 };
 
 import nathalie from "./UI/nathalie.png";
 import theo from "./UI/theo.png";
+import bena from "./UI/bena.png";
+import john from "./UI/john.png";
 
 export const ai = {
   nathalie,
   theo,
+  bena,
+  john,
 };
 
 import placeholder from "./UI/placeholder.jpg";
+import placeholder2 from "./UI/placeholder2.jpg";
 
 export const img = {
   placeholder,
+  placeholder2,
 };

src/components/DragDropTest.js

@@ -0,0 +1,137 @@
+import { View, Text, ScrollView, StyleSheet, Dimensions } from "react-native";
+import React, { useState } from "react";
+import Animated, {
+  runOnJS,
+  useAnimatedGestureHandler,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from "react-native-reanimated";
+import { PanGestureHandler } from "react-native-gesture-handler";
+
+const { width } = Dimensions.get("window");
+
+const DragDropTest = () => {
+  const [leftItems, setLeftItems] = useState([
+    "fortnite",
+    "apex",
+    "callofduty",
+  ]);
+  const [rightItems, setRightItems] = useState([]);
+
+  const draggingItem = useSharedValue(null);
+  const translateX = useSharedValue(0);
+  const translateY = useSharedValue(0);
+
+  const moveItem = (item) => {
+    setLeftItems((items) => items.filter((i) => i !== item));
+    setRightItems((items) => [...items, item]);
+  };
+
+  const gestureHandler = useAnimatedGestureHandler({
+    onStart: (_, ctx) => {
+      ctx.startX = translateX.value;
+      ctx.startY = translateY.value;
+    },
+    onActive: (event, ctx) => {
+      translateX.value = ctx.startX + event.translationX;
+      translateY.value = ctx.startY + event.translationY;
+    },
+    onEnd: () => {
+      if (translateX.value > width / 2) {
+        runOnJS(moveItem)(draggingItem.value);
+      }
+      translateX.value = withSpring(0);
+      translateY.value = withSpring(0);
+      draggingItem.value = null;
+    },
+  });
+
+  const renderDraggable = (item) => {
+    const style = useAnimatedStyle(() => ({
+      transform: [
+        { translateX: draggingItem.value === item ? translateX.value : 0 },
+        { translateY: draggingItem.value === item ? translateY.value : 0 },
+      ],
+      zIndex: draggingItem.value === item ? 10 : 0,
+    }));
+
+    return (
+      <PanGestureHandler
+        key={item}
+        onGestureEvent={gestureHandler}
+        onHandlerStateChange={() => {
+          draggingItem.value = item;
+        }}
+      >
+        <Animated.View style={[styles.item, style]}>
+          <Text style={styles.text}>{item}</Text>
+        </Animated.View>
+      </PanGestureHandler>
+    );
+  };
+
+  return (
+    <View style={styles.scrollWrapper}>
+      <ScrollView
+        style={{
+          ...styles.scroll,
+          zIndex: 2,
+        }}
+      >
+        <Text style={styles.title}>Left</Text>
+        {leftItems.map(renderDraggable)}
+      </ScrollView>
+
+      <ScrollView
+        style={{
+          ...styles.scroll,
+          zIndex: -1,
+        }}
+      >
+        <Text style={styles.title}>Right</Text>
+        {rightItems.map((item) => (
+          <View key={item} style={[styles.item, { backgroundColor: "#bdf" }]}>
+            <Text style={styles.text}>{item}</Text>
+          </View>
+        ))}
+      </ScrollView>
+    </View>
+  );
+};
+
+export default DragDropTest;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 50,
+  },
+  scrollWrapper: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+  },
+  scroll: {
+    width: width / 2.2,
+    height: "90%",
+    backgroundColor: "#f0f0f0",
+    borderRadius: 10,
+    margin: 5,
+    padding: 10,
+  },
+  title: {
+    fontWeight: "bold",
+    fontSize: 16,
+    marginBottom: 10,
+  },
+  item: {
+    backgroundColor: "#aaf",
+    padding: 15,
+    marginVertical: 5,
+    borderRadius: 10,
+  },
+  text: {
+    color: "#333",
+    textAlign: "center",
+  },
+});

src/data/data.js

@@ -33,6 +33,186 @@ export const EMOTION_CONVEY = [
       "déclare une frustration, ressentiment, énergie tournée vers la révolte.",
     color: ["#FF0000", "#99999900"],
   },
+  {
+    title: "La Peur",
+    description:
+      "suggère l’anxiété, incertitude, perception du monde comme dangereux, tendance à l’évitement.",
+    color: ["#0900FF", "#99999900"],
+  },
+  {
+    title: "L’humour",
+    description:
+      "insinue par allusions, sous-entendus, voire absurdité et jeux de mots. Plaisante sur le contexte.",
+    color: ["#FFFFFF", "#99999900"],
+  },
+  {
+    title: "Le Courage",
+    description:
+      "invoque la force et la capacité d’avancer malgré la peur. Volonté d’affronté la vie, ouverture au changement positif.",
+    color: ["#FF441E", "#99999900"],
+  },
+  {
+    title: "L’llumination",
+    description:
+      "évoque la conscience pure, unité avec le  tout, symbole de pureté et sagesse ultime.",
+    color: ["#CBD074", "#99999900"],
+  },
+  {
+    title: "La Paix",
+    description:
+      "suggére la paix intérieure inébranlable, la sérénite, la tranquilité profonde.",
+    color: ["#6CF0FF", "#99999900"],
+  },
+  {
+    title: "La Raison",
+    description:
+      "expose l'utilisation optimale de la logique, discernement, prise de décisions objectives et détachées. Clarté mentale.",
+    color: ["#4437A9", "#99999900"],
+  },
+  {
+    title: "L’Acceptation",
+    description:
+      "laisse entendre l'arrêt de la résistance, l'équilibre obtenu, la capacité à changer ou à d'accepter ce qui ne peut lʼêtre.",
+    color: ["#80D475", "#99999900"],
+  },
+  {
+    title: "La Volonté",
+    description:
+      "déclare ma motivation à agir, l'énergie, l'autodiscipline, la recherche dʼamélioration et dʼefficacité.",
+    color: ["#FF9E1E", "#99999900"],
+  },
+  {
+    title: "Le Désir",
+    description:
+      "laisse entendre un attachement à l’acquisition, la passion, la dépendance à des besoins, des personnes ou des objets extérieurs.",
+    color: ["#8C3F2C", "#99999900"],
+  },
+  {
+    title: "La Neutralité",
+    description:
+      "mentionne l’acceptation de la vie telle qu’elle est, détachement émotionnel, l’absence de jugement.",
+    color: ["#AFAFAF", "#99999900"],
+  },
+  {
+    title: "La Fierté",
+    description:
+      "expose un sentiment de supériorité, un besoin de reconnaissance externe.",
+    color: ["#D0BE00", "#99999900"],
+  },
+  {
+    title: "Le Chagrin",
+    description:
+      "exprime la tristesse profonde, perte, état de deuil ou de dépression, la mélancolie.",
+    color: ["#53519F", "#99999900"],
+  },
+  {
+    title: "L’Apathie",
+    description:
+      "laisse entendre l’absence d’émotion, le désespoir, absence d’énergie, neutralité des réactions, résignation face à la vie.",
+    color: ["#565656", "#99999900"],
+  },
+  {
+    title: "La Culpabilité",
+    description:
+      "sous-entends l’auto-blâme, l’incapacité à se pardonner, excuses répétées, des justifications alambiquées.",
+    color: ["#7B1B1B", "#99999900"],
+  },
+  {
+    title: "La Honte",
+    description:
+      "insinue un sentiment d’humiliation profonde, perte d’estime de soi, tendance à l’auto-dépréciation.",
+    color: ["#8E4746", "#99999900"],
+  },
+];
+
+export const SONG_STYLE = [
+  {
+    title: "Upbeat",
+    description: "Pour une ambiance joyeuse et rythmée",
+  },
+  {
+    title: "Grandios(e)",
+    description: "Pour un sentiment de grandeur",
+  },
+  {
+    title: "Chill",
+    description: "Pour une ambiance détendue ou apaisante, relax",
+  },
+  {
+    title: "Epic",
+    description: "Pour un sentiment grandiose et héroïque",
+  },
+  {
+    title: "Dramatic",
+    description: "Utilisé pour des effets théâtraux ou intenses",
+  },
+  {
+    title: "Comedic",
+    description: "Pour un ton humoristique",
+  },
+  {
+    title: "Theatrical",
+    description: "Pour un style musical qui évoque le théâtre",
+  },
+  {
+    title: "Flamboyant",
+    description: "Pour un style exubérant ",
+  },
+  {
+    title: "Melancholic",
+    description: "ambiance mélancolique",
+  },
+  {
+    title: "Introspective",
+    description: "Pour un caractère introspectif",
+  },
+  {
+    title: "Urban Tragedy",
+    description: "Pour une ambiance de tragédie urbaine",
+  },
+  {
+    title: "Eerie",
+    description: "Pour une ambiance étrange ou inquiétante",
+  },
+  {
+    title: "Mysterious",
+    description: "Pour un sentiment de mystère",
+  },
+  {
+    title: "Melancholic",
+    description: "ambiance mélancolique",
+  },
+];
+
+export const CUSTOM_SONG_STRUCTURE = [
+  "Introduction instrumentale courte.",
+  "Introduction instrumentale longue.",
+  "Ajoute un pré-refrain intrumental.",
+  "Utilisé pour une section contrastant avec les couplets et refrains.",
+  "Indique une section avec un solo Guitare.",
+  "Indique une section avec un solo Guitare électrique.",
+  "Indique une section avec un solo Batterie.",
+  "Indique une section avec un solo Saxo.",
+  "Indique une section avec un solo Violon.",
+  "Indique un moment de pause ou de changement.",
+  "Indique un interlude.",
+  "Indique un interlude mélodique.",
+  "Désigne une grande finition, un apogée.",
+  "Indique un arrêt net de la musique.",
+  "Permet de terminer la chanson en baissant le volume progressivement.",
+  "Indique une transition douce vers le silence.",
+];
+
+export const SONG_STRUCTURE = [
+  "1 couplet, 1 refrain, 1 couplet, 1 refrain",
+  "1 couplet, 1 refrain, 1 couplet, 2 refrains",
+  "1 couplet, 1 refrain, 2 couplets, 1 refrain",
+  "2 couplets, 1 refrain, 2 couplets, 1 refrain",
+  "2 couplets, 1 refrain, 2 couplets, 2 refrains",
+  "2 couplets, 1 refrain, 2 couplets, 1 refrain, 2 couplets, 1 refrain",
+  "2 couplets, 1 refrain, 2 couplets, 1 refrain, 2 couplets,  2 refrains",
+  "3 couplets, 2 refrains (metal)",
+  "Pas de couplet pas de refrain, juste un texte",
 ];
 
 export const CHOOSE_GENRE = [
@@ -55,9 +235,184 @@ export const CHOOSE_GENRE = [
     title: "Blues",
     description: "Structure simple, thèmes sur les épreuves de la vie.",
   },
+  {
+    title: "Folk",
+    description:
+      "Instruments acoustiques, narration, ancrage dans la tradition populaire.",
+  },
+  {
+    title: "Punk",
+    description:
+      "Énergie brute, textes contestataires, structures simples. Mouvement contre-culturel majeur.musique rebelle aux influences sociales et politiques fortes.",
+  },
+  {
+    title: "Dance",
+    description:
+      "Musique rythmée, conçue pour la danse, souvent électronique ou pop.",
+  },
+  {
+    title: "Grunge",
+    description:
+      "Sous-genre du rock, sons sales, textes introspectifs, popularisé par Nirvana.",
+  },
+  {
+    title: "EDM",
+    description:
+      "Musique électronique dynamique orientée clubs et festivals.Style Tomorrowland.",
+  },
+  {
+    title: "Trap",
+    description:
+      "Sous-genre du rap caractérisé par ses beats lourds et son attitude street. Popularisé à Atlanta, il domine le rap mainstream actuel.",
+  },
+  {
+    title: "Latino",
+    description:
+      "Reggaeton, salsa, bachata et autres styles hispaniques, rythmes dansants et festifs.",
+  },
+  {
+    title: "Dancehall",
+    description:
+      "Style jamaïcain rythmé dérivé du reggae, apprécié pour son énergie festive et sensuelle.",
+  },
+  {
+    title: "Latin Pop",
+    description:
+      "Musique pop Caribbean, Salsa, Merengue, rythmes latinos festifs et dansants.",
+  },
+  {
+    title: "Raggaeton",
+    description:
+      "Mélange latino de reggae, rap et dancehall aux rythmes entraînants. sons latinos modernes.",
+  },
+  {
+    title: "Rock",
+    description:
+      "Genre énergique dérivé du rock'n'roll, porté par guitares électriques et batterie puissante.",
+  },
+  {
+    title: "Rock progressif",
+    description:
+      "Rock complexe, longues compositions, virtuosité instrumentale.",
+  },
+  {
+    title: "Hard Rock",
+    description: "Rock énergique, guitares puissantes, voix souvent rauques.",
+  },
+  {
+    title: "Metal",
+    description:
+      "Dérivé extrême du rock avec des guitares saturées, une batterie énergique et des thèmes souvent sombres.",
+  },
+  {
+    title: "R&B",
+    description: "Genre doux et mélodieux issu du blues, jazz et gospel.",
+  },
+  {
+    title: "Phonk",
+    description:
+      "Samples funk, des voix rap vintage de Memphis, production hachées et vissées, combine à des éléments de jazz. atmosphère sombre et rythmes hypnotiques.",
+  },
+  {
+    title: "House",
+    description:
+      "Style électronique entraînant, rythmiques régulières et grooves dansants. Ambiance clubs, radio et festivals occidentaux.",
+  },
+  {
+    title: "Alternative",
+    description:
+      "Version expérimentale et variée du rock traditionnel, populaire en festivals indé. Caractérisé par attitude anti-mainstream.",
+  },
+  {
+    title: "Indie",
+    description:
+      "Musique indépendante variée, mettant en avant créativité et originalité.",
+  },
+  {
+    title: "Country",
+    description: "Musique traditionnelle américaine d'origine rurale.",
+  },
+  {
+    title: "Synthwave",
+    description:
+      "Musique électronique inspirée de l'esthétique années 80, nostalgique et futuriste. son revival esthétique.",
+  },
+  {
+    title: "Afrobeat",
+    description:
+      "Mélange de musique traditionnelle nigériane, de jazz, du highlife ghanéen, de funk et de chant, accompagné de percussions et de styles vocaux.",
+  },
+  {
+    title: "K-Pop",
+    description:
+      "Genre musical originaire de Corée du Sud qui combine divers styles comme la pop, le hip-hop, le R&B et l'électro. Mélodies accrocheuses.",
+  },
+  {
+    title: "Techno",
+    description:
+      "Musique électronique répétitive originaire de Détroit, tempo rapide, underground. Ambiance club.",
+  },
+  {
+    title: "Funk",
+    description:
+      "Musique rythmique marquée par des basses puissantes et grooves entraînants. pop moderne.",
+  },
+  {
+    title: "Disco",
+    description:
+      "Genre dance festif des années 70 caractérisé par des rythmes répétitifs et entraînants. Vit un revival puissant avec des références pop moderne.",
+  },
+  {
+    title: "New wave",
+    description:
+      "Fusion de punk, pop et électronique, esthétique expérimentale des années 80.",
+  },
+  {
+    title: "Jazz",
+    description:
+      "Genre basé sur l’improvisation et l’expression musicale complexe.",
+  },
+  {
+    title: "Lo-Fi",
+    description:
+      "Musique relaxante à basse qualité sonore, souvent instrumentale et appréciée pour l'étude ou la détente.",
+  },
+  {
+    title: "Bedroom Pop",
+    description:
+      "Pop intimiste. sonorités douces, dream pop, avec une prédominance d'instruments acoustiques, de synthétiseurs et de voix feutrées.",
+  },
+  {
+    title: "Ambient",
+    description:
+      "Musique atmosphérique et immersive privilégiant textures sonores et ambiances relaxantes. recherche de calme.",
+  },
+  {
+    title: "Dream Pop",
+    description:
+      "Pop éthérée aux mélodies oniriques, souvent caractérisée par des effets de guitares et synthés. Adorée pour son esthétique mélancolique dans l'indie occidental.",
+  },
+  {
+    title: "Grime",
+    description:
+      "Genre électronique urbain britannique aux paroles incisives et flow rapide.",
+  },
+  {
+    title: "Hyperpop",
+    description:
+      "Musique expérimentale maximaliste combinant pop, EDM et distorsions vocales exagérées. Gen-Z.",
+  },
+  {
+    title: "Gospel",
+    description:
+      "Musique religieuse afro-américaine, chœurs puissants, influence sur soul et R&B.",
+  },
 ];
 
 export const VOICE = [
+  {
+    title: "base",
+    data: [
       "Une voix féminine interpretra ta chanson.",
       "Une voix masculine interpretera ta chanson.",
       "Deux voix pour interpreter ta chanson.",
@@ -68,7 +423,11 @@ export const VOICE = [
       "Voix qui raconte une histoire, souvent sans chanter.",
       "Paroles déclamées plutôt que chantées, souvent dans un style poétique ou de slam.",
       "Technique vocale entre parler et chanter, typique de la musique expressionniste.",
-  "Sensibilité ",
+    ],
+  },
+  {
+    title: "Sensibilité",
+    data: [
       "Voix séduisante et sensuelle.",
       "Voix profonde et résonnante.",
       "Voix légère et aérienne.",
@@ -78,7 +437,11 @@ export const VOICE = [
       "Effet de distorsion (rendu + agressif).",
       "Slam (Chant parlé).",
       "Rap moderne.",
-  "Technique",
+    ],
+  },
+  {
+    title: "Technique",
+    data: [
       "Chant chargé d'émotion.",
       "Technique vocale rugueuse pour le métal ou le rock.",
       "Voix robotisée ou mécanique, genres électro ou futuristes.",
@@ -98,6 +461,8 @@ export const VOICE = [
       "Chœur avec une tonalité légère et céleste.",
       "Inspiration et expiration sonores (effets dramatiques).",
       "Changements de volume ou de tonalité dans une même phrase.",
+    ],
+  },
 ];
 
 export const INSTRUMENTS = [

src/navigation/MainStack.js

@@ -30,6 +30,8 @@ import PouchReady from "../screens/Studio/PouchReady";
 import PhotoCover from "../screens/Studio/PhotoCover";
 import AddPhotoCover from "../screens/Studio/AddPhotoCover";
 import FinishCompose from "../screens/Studio/FinishCompose";
+import Production from "../screens/Production/Production";
+import ProductionOnboarding from "../screens/Production/ProductionOnboarding";
 
 const screenOptions = {
   headerShown: false,
@@ -133,6 +135,14 @@ const screens = [
     name: Routes.FinishCompose,
     component: FinishCompose,
   },
+  {
+    name: Routes.ProductionOnboarding,
+    component: ProductionOnboarding,
+  },
+  {
+    name: Routes.Production,
+    component: Production,
+  },
 ];
 
 export default function Main() {

src/navigation/Routes.js

@@ -39,4 +39,7 @@ export const Routes = {
   PhotoCover: "PhotoCover",
   AddPhotoCover: "AddPhotoCover",
   FinishCompose: "FinishCompose",
+
+  ProductionOnboarding: "ProductionOnboarding",
+  Production: "Production",
 };

src/screens/Onboarding.js

@@ -17,6 +17,7 @@ export default ({ navigation }) => {
     >
       <Button text="WRITING" onPress={() => navigate(Routes.Writing)} />
       <Button text="STUDIO" onPress={() => navigate(Routes.Studio)} />
+      <Button text="PRODUCTION" onPress={() => navigate(Routes.ProductionOnboarding)} />
     </View>
   );
 };

src/screens/Production/DownloadSongs.js

@@ -0,0 +1,12 @@
+import { View, Text } from "react-native";
+import React from "react";
+
+const DownloadSongs = () => {
+  return (
+    <View>
+      <Text>DownloadSongs</Text>
+    </View>
+  );
+};
+
+export default DownloadSongs;

src/screens/Production/Production.js

@@ -0,0 +1,37 @@
+import { View } from "react-native";
+import React from "react";
+import Page from "../../layouts/Page";
+import { background } from "../../assets";
+import { gutters } from "../../styles";
+import GradientButton from "../../components/GradientButton";
+import MusicLandHeader from "../../components/MusicLandHeader";
+import { goBack } from "../../navigation/NavigationService";
+import BorderGradientButton from "../../components/BorderGradientButton";
+
+const Production = () => {
+  return (
+    <Page headerType="NONE" backgroundImg={background.productionBG}>
+      <MusicLandHeader onPressBack={goBack} progress={9} />
+      <View
+        style={{
+          flex: 1,
+          paddingBottom: gutters * 2,
+          justifyContent: "flex-end",
+          gap: 37,
+        }}
+      >
+        <BorderGradientButton title="Je télécharge ma chanson" />
+        <View style={{ gap: 12 }}>
+          <GradientButton title="Je veux devenir Playbacker" />
+          <BorderGradientButton title="Voir exemples" />
+        </View>
+        <View style={{ gap: 12 }}>
+          <GradientButton title="Je veux créer un Clip" />
+          <BorderGradientButton title="Voir exemples" />
+        </View>
+      </View>
+    </Page>
+  );
+};
+
+export default Production;

src/screens/Production/ProductionOnboarding.js

@@ -0,0 +1,29 @@
+import { View, Text } from "react-native";
+import React from "react";
+import Page from "../../layouts/Page";
+import { background } from "../../assets";
+import { gutters } from "../../styles";
+import GradientButton from "../../components/GradientButton";
+import { navigate } from "../../navigation/NavigationService";
+import { Routes } from "../../navigation";
+
+const ProductionOnboarding = () => {
+  return (
+    <Page headerType="NONE" backgroundImg={background.productionBG}>
+      <View
+        style={{
+          flex: 1,
+          paddingBottom: gutters * 2,
+          justifyContent: "flex-end",
+        }}
+      >
+        <GradientButton
+          title="Commence"
+          onPress={() => navigate(Routes.Production)}
+        />
+      </View>
+    </Page>
+  );
+};
+
+export default ProductionOnboarding;

src/screens/Studio/ChooseGenre.js

@@ -1,33 +1,56 @@
-import { View, Text, StyleSheet, FlatList } from "react-native";
-import React from "react";
+import { View, Text, FlatList } from "react-native";
+import React, { useState } from "react";
 import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 import { responsiveHeight } from "react-native-responsive-dimensions";
-import { BlurView } from "expo-blur";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import { Palette } from "../../styles";
 import { CHOOSE_GENRE } from "../../data/data";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
 
 const ChooseGenre = () => {
+  const [containerLayout, setContainerLayout] = useState(null);
+  const [selected, setSelected] = useState(null);
+
+  const onPressSelect = (item) => {
+    if (selected === item) {
+      setSelected(null);
+    } else {
+      setSelected(item);
+    }
+  };
+
   return (
     <View style={{ flex: 1, gap: 10, paddingTop: 16 }}>
       <CreateLyricsHeader
         title="Choisis un genre"
         subTitle="Tu peux choisir jusqu’à 2 genres différents"
       />
-      <ItemContainer height={responsiveHeight(55)}>
+      <View
+        style={{ flex: 1 }}
+        onLayout={(event) => setContainerLayout(event.nativeEvent.layout)}
+      >
+        <ItemContainer height={containerLayout?.height}>
           <FlatList
             data={CHOOSE_GENRE}
             contentContainerStyle={{
               gap: 16,
               flexGrow: 1,
               zIndex: 2,
+              paddingTop: 5,
             }}
-          renderItem={({ item, index }) => (
-            <View style={{ borderRadius: 14, overflow: "hidden" }}>
-              <BlurView
-                intensity={30}
-                style={{ paddingVertical: 14, paddingHorizontal: 12 }}
+            renderItem={({ item, index }) => {
+              const selectedItem = selected === item.title;
+
+              return (
+                <View style={{ paddingHorizontal: 5 }}>
+                  <CreateLyricsHeader
+                    colors={
+                      selectedItem
+                        ? ["#FFFFFF00", "#FFFFFF"]
+                        : [Palette.tran, Palette.tran]
+                    }
+                    tint={selectedItem ? "default" : "dark"}
+                    onPress={() => onPressSelect(item.title)}
                   >
                     <Text
                       style={{
@@ -41,36 +64,15 @@ const ChooseGenre = () => {
                       </Text>{" "}
                       : {item.description}
                     </Text>
-              </BlurView>
+                  </CreateLyricsHeader>
                 </View>
-          )}
+              );
+            }}
           />
         </ItemContainer>
       </View>
+    </View>
   );
 };
 
 export default ChooseGenre;
-
-const styles = StyleSheet.create({
-  borderGradientStyle: {
-    borderWidth: 1,
-    borderRadius: 20,
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 100,
-    position: "absolute",
-    width: "100%",
-  },
-  blurContainer: {
-    borderRadius: 20,
-    overflow: "hidden",
-    zIndex: 1,
-    maxHeight: responsiveHeight(55),
-  },
-});

src/screens/Studio/ChooseInstruments.js

@@ -9,6 +9,15 @@ import { INSTRUMENTS } from "../../data/data";
 
 const ChooseInstruments = () => {
   const [containerLayout, setContainerLayout] = useState(null);
+  const [selected, setSelected] = useState(null);
+
+  const onPressSelect = (item) => {
+    if (selected === item) {
+      setSelected(null);
+    } else {
+      setSelected(item);
+    }
+  };
 
   return (
     <View style={{ flex: 1, gap: 10, paddingTop: 16 }}>
@@ -25,21 +34,33 @@ const ChooseInstruments = () => {
             data={INSTRUMENTS}
             showsVerticalScrollIndicator={false}
             contentContainerStyle={styles.contentContainer}
-            renderItem={({ item }) => (
-              <View style={styles.itemContainer}>
-                <BlurView
-                  intensity={30}
+            renderItem={({ item }) => {
+              const selectedItem = selected === item;
+
+              return (
+                <CreateLyricsHeader
+                  onPress={() => onPressSelect(item)}
+                  tint={selectedItem ? "default" : "dark"}
+                  colors={
+                    selectedItem
+                      ? ["#FFFFFF00", "#FFFFFF"]
+                      : [Palette.tran, Palette.tran]
+                  }
+                  containerStyle={{
+                    ...styles.itemContainer,
+                  }}
+                >
+                  <View
                     style={{
-                    flex: 1,
-                    backgroundColor: Palette.glass,
-                    paddingHorizontal: 12,
+                      height: 40,
                       justifyContent: "center",
                     }}
                   >
                     <Text style={styles.itemText}>{item}</Text>
-                </BlurView>
                   </View>
-            )}
+                </CreateLyricsHeader>
+              );
+            }}
           />
         </ItemContainer>
       </View>

src/screens/Studio/ChooseRhythm.js

@@ -1,5 +1,5 @@
 import { View, Text, FlatList, StyleSheet } from "react-native";
-import React from "react";
+import React, { useState } from "react";
 import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
 import { BlurView } from "expo-blur";
@@ -8,6 +8,16 @@ import { FONT_FAMILY } from "../../styles/Fonts";
 import { RHYTHM } from "../../data/data";
 
 const ChooseRhythm = () => {
+  const [selected, setSelected] = useState(null);
+
+  const onPressSelect = (item) => {
+    if (selected === item) {
+      setSelected(null);
+    } else {
+      setSelected(item);
+    }
+  };
+
   return (
     <View style={{ flex: 1, gap: 10, paddingTop: 16 }}>
       <CreateLyricsHeader title="Choisis un rythme" />
@@ -17,21 +27,33 @@ const ChooseRhythm = () => {
             data={RHYTHM}
             showsVerticalScrollIndicator={false}
             contentContainerStyle={styles.contentContainer}
-            renderItem={({ item }) => (
-              <View style={styles.itemContainer}>
-                <BlurView
-                  intensity={30}
+            renderItem={({ item }) => {
+              const selectedItem = selected === item;
+
+              return (
+                <CreateLyricsHeader
+                  onPress={() => onPressSelect(item)}
+                  tint={selectedItem ? "default" : "dark"}
+                  colors={
+                    selectedItem
+                      ? ["#FFFFFF00", "#FFFFFF"]
+                      : [Palette.tran, Palette.tran]
+                  }
+                  containerStyle={{
+                    ...styles.itemContainer,
+                  }}
+                >
+                  <View
                     style={{
-                    flex: 1,
-                    backgroundColor: Palette.glass,
-                    paddingHorizontal: 12,
+                      height: 40,
                       justifyContent: "center",
                     }}
                   >
                     <Text style={styles.itemText}>{item}</Text>
-                </BlurView>
                   </View>
-            )}
+                </CreateLyricsHeader>
+              );
+            }}
           />
         </ItemContainer>
       </View>

src/screens/Studio/CustomizeVoice.js

@@ -1,4 +1,4 @@
-import { View, Text, FlatList, StyleSheet } from "react-native";
+import { View, Text, FlatList, StyleSheet, SectionList } from "react-native";
 import React, { useState } from "react";
 import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
@@ -9,6 +9,15 @@ import { VOICE } from "../../data/data";
 
 const CustomizeVoice = () => {
   const [containerLayout, setContainerLayout] = useState(null);
+  const [selected, setSelected] = useState(null);
+
+  const onPressSelect = (item) => {
+    if (selected === item) {
+      setSelected(null);
+    } else {
+      setSelected(item);
+    }
+  };
 
   return (
     <View style={{ flex: 1, gap: 10, paddingTop: 16 }}>
@@ -22,35 +31,47 @@ const CustomizeVoice = () => {
       >
         <ItemContainer height={containerLayout?.height}>
           <View style={{ flex: 1, gap: 10 }}>
+            <SectionList
+              sections={VOICE}
+              showsVerticalScrollIndicator={false}
+              contentContainerStyle={styles.contentContainer}
+              renderItem={({ item }) => {
+                const selectedItem = selected === item;
+
+                return (
+                  <CreateLyricsHeader
+                    onPress={() => onPressSelect(item)}
+                    tint={selectedItem ? "default" : "dark"}
+                    colors={
+                      selectedItem
+                        ? ["#FFFFFF00", "#FFFFFF"]
+                        : [Palette.tran, Palette.tran]
+                    }
+                    containerStyle={{
+                      ...styles.itemContainer,
+                    }}
+                  >
+                    <View
+                      style={{
+                        paddingVertical: 6,
+                      }}
+                    >
+                      <Text style={styles.itemText}>{item}</Text>
+                    </View>
+                  </CreateLyricsHeader>
+                );
+              }}
+              renderSectionHeader={({ section: { title } }) => (
                 <Text
                   style={{
                     fontSize: 16,
                     color: Palette.white,
                     fontFamily: FONT_FAMILY.InterBold,
-                left: 16,
-                marginTop: 5,
+                    left: 10,
                   }}
                 >
-              Base
+                  {title}
                 </Text>
-            <FlatList
-              data={VOICE}
-              showsVerticalScrollIndicator={false}
-              contentContainerStyle={styles.contentContainer}
-              renderItem={({ item }) => (
-                <View style={styles.itemContainer}>
-                  <BlurView
-                    intensity={30}
-                    style={{
-                      flex: 1,
-                      backgroundColor: Palette.glass,
-                      paddingHorizontal: 12,
-                      paddingVertical: 14,
-                    }}
-                  >
-                    <Text style={styles.itemText}>{item}</Text>
-                  </BlurView>
-                </View>
               )}
             />
           </View>

src/screens/Writing/CreatingLyrics.js

@@ -68,6 +68,7 @@ const CreatingLyrics = ({ active }) => {
         >
           <BlurView
             intensity={40}
+            tint="dark"
             style={{ flex: 1, padding: 10, paddingBottom: 20 }}
           >
             <Pressable

src/screens/Writing/CustomizeSongStructure.js

@@ -5,6 +5,8 @@ import { BlurView } from "expo-blur";
 import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
+import { CUSTOM_SONG_STRUCTURE } from "../../data/data";
+import DragDropTest from "../../components/DragDropTest";
 
 const CustomizeSongStructure = () => {
   const [containerLayout, setContainerLayout] = useState(null);
@@ -15,7 +17,7 @@ const CustomizeSongStructure = () => {
         title="Personnalise la structure de ta chanson"
         subTitle="Intègre en Drag and drop"
       />
-      <View style={{ flex: 1, gap: 10 }}>
+      {/* <View style={{ flex: 1, gap: 10 }}>
         <View
           style={{ flex: 1 }}
           onLayout={(e) => {
@@ -24,18 +26,20 @@ const CustomizeSongStructure = () => {
         >
           <ItemContainer height={containerLayout?.height}>
             <ScrollView contentContainerStyle={{ gap: 10, paddingBottom: 20 }}>
-              {Array.from({ length: 10 }).map((_, index) => (
+              {["Couplet", "Refrain", "Couplet", "Refrain"].map(
+                (item, index) => (
                   <View key={index} style={styles.dropzoneContainer}>
-                  <Text style={styles.dropzone}>Couplet</Text>
+                    <Text style={styles.dropzone}>{item}</Text>
                   </View>
-              ))}
+                )
+              )}
             </ScrollView>
           </ItemContainer>
         </View>
         <View style={{ flex: 1 }}>
           <ItemContainer height={containerLayout?.height}>
             <ScrollView contentContainerStyle={{ gap: 10, paddingBottom: 20 }}>
-              {Array.from({ length: 10 }).map((_, index) => (
+              {CUSTOM_SONG_STRUCTURE.map((item, index) => (
                 <View key={index} style={styles.itemContainer}>
                   <BlurView
                     intensity={30}
@@ -46,15 +50,16 @@ const CustomizeSongStructure = () => {
                       paddingHorizontal: 12,
                     }}
                   >
-                    <Text style={styles.dropzone}>
-                      Introduction instrumentale longue.
-                    </Text>
+                    <Text style={styles.dropzone}>{item}</Text>
                   </BlurView>
                 </View>
               ))}
             </ScrollView>
           </ItemContainer>
         </View>
+      </View> */}
+      <View style={{ flex: 1 }}>
+        <DragDropTest />
       </View>
     </View>
   );

src/screens/Writing/EmotionConvey.js

@@ -1,5 +1,5 @@
 import { View, Text, FlatList } from "react-native";
-import React from "react";
+import React, { useState } from "react";
 import CreateLyricsHeader from "./components/CreateLyricsHeader";
 import { responsiveHeight } from "react-native-responsive-dimensions";
 import { Palette } from "../../styles";
@@ -8,6 +8,17 @@ import { EMOTION_CONVEY } from "../../data/data";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
 
 const EmotionConvey = () => {
+  const [containerLayout, setContainerLayout] = useState(null);
+  const [selected, setSelected] = useState(null);
+
+  const onPressSelect = (item) => {
+    if (selected === item) {
+      setSelected(null);
+    } else {
+      setSelected(item);
+    }
+  };
+
   return (
     <View style={{ flex: 1, gap: 10, marginTop: 16 }}>
       <CreateLyricsHeader
@@ -15,7 +26,11 @@ const EmotionConvey = () => {
         subTitle="Sélectionne tes intentions émotionnelles. (2 max)"
       />
 
-      <ItemContainer height={responsiveHeight(50)}>
+      <View
+        style={{ flex: 1 }}
+        onLayout={(event) => setContainerLayout(event.nativeEvent.layout)}
+      >
+        <ItemContainer height={containerLayout?.height}>
           <FlatList
             data={EMOTION_CONVEY}
             contentContainerStyle={{
@@ -24,9 +39,16 @@ const EmotionConvey = () => {
               zIndex: 2,
               paddingTop: 5,
             }}
-          renderItem={({ item, index }) => (
+            renderItem={({ item, index }) => {
+              const selectedItem = selected === item.title;
+
+              return (
                 <View style={{ paddingHorizontal: 5 }}>
-              <CreateLyricsHeader colors={item.color} intensity={30} >
+                  <CreateLyricsHeader
+                    colors={item.color}
+                    tint={selectedItem ? "default" : "dark"}
+                    onPress={() => onPressSelect(item.title)}
+                  >
                     <Text
                       style={{
                         fontSize: 16,
@@ -41,10 +63,12 @@ const EmotionConvey = () => {
                     </Text>
                   </CreateLyricsHeader>
                 </View>
-          )}
+              );
+            }}
           />
         </ItemContainer>
       </View>
+    </View>
   );
 };
 

src/screens/Writing/Goals.js

@@ -1,14 +1,23 @@
 import { View, Text, FlatList, StyleSheet, Pressable } from "react-native";
-import React from "react";
+import React, { useState } from "react";
 import CreateLyricsHeader from "./components/CreateLyricsHeader";
 import { Palette, Style } from "../../styles";
-import { BlurView } from "expo-blur";
 import { GOALS } from "../../data/data";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import CustomInput from "./components/CustomInput";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
 
 const Goals = () => {
+  const [selected, setSelected] = useState(null);
+
+  const onPressSelect = (item) => {
+    if (selected === item) {
+      setSelected(null);
+    } else {
+      setSelected(item);
+    }
+  };
+
   return (
     <View style={{ flex: 1, gap: 16, marginTop: 16 }}>
       <View style={{ gap: 10 }}>
@@ -18,21 +27,33 @@ const Goals = () => {
             data={GOALS}
             showsVerticalScrollIndicator={false}
             contentContainerStyle={styles.contentContainer}
-            renderItem={({ item }) => (
-              <Pressable style={styles.itemContainer}>
-                <BlurView
-                  intensity={30}
+            renderItem={({ item }) => {
+              const selectedItem = selected === item;
+
+              return (
+                <CreateLyricsHeader
+                  onPress={() => onPressSelect(item)}
+                  tint={selectedItem ? "default" : "dark"}
+                  colors={
+                    selectedItem
+                      ? ["#FFFFFF00", "#FFFFFF"]
+                      : [Palette.tran, Palette.tran]
+                  }
+                  containerStyle={{
+                    ...styles.itemContainer,
+                  }}
+                >
+                  <View
                     style={{
-                    flex: 1,
-                    backgroundColor: Palette.glass,
-                    paddingHorizontal: 12,
+                      height: 40,
                       ...Style.containerCenter,
                     }}
                   >
                     <Text style={styles.itemText}>{item}</Text>
-                </BlurView>
-              </Pressable>
-            )}
+                  </View>
+                </CreateLyricsHeader>
+              );
+            }}
           />
         </ItemContainer>
       </View>
@@ -55,10 +76,7 @@ const styles = StyleSheet.create({
     paddingBottom: 50,
   },
   itemContainer: {
-    height: 54,
-    backgroundColor: Palette.glass,
     borderRadius: 14,
-    overflow: "hidden",
     shadowColor: "#00000040",
     shadowOffset: {
       width: 0,

src/screens/Writing/Rhymes.js

@@ -1,34 +1,58 @@
 import { View, Text, StyleSheet } from "react-native";
-import React from "react";
+import React, { useState } from "react";
 import CreateLyricsHeader from "./components/CreateLyricsHeader";
 import { BlurView } from "expo-blur";
-import { Palette } from "../../styles";
+import { Palette, Style } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
 
 const Rhymes = () => {
+  const [selected, setSelected] = useState(null);
+
+  const onPressSelect = (item) => {
+    if (selected === item) {
+      setSelected(null);
+    } else {
+      setSelected(item);
+    }
+  };
+
   return (
     <View style={{ flex: 1, gap: 10, marginTop: 16 }}>
       <CreateLyricsHeader title="Avec ou sans rimes" />
       <ItemContainer height={200}>
         <View style={{ gap: 10 }}>
-          {Array.from({ length: 3 }).map((_, index) => (
-            <View key={index} style={styles.itemContainer}>
-              <BlurView
-                intensity={30}
-                style={{
-                  flex: 1,
-                  backgroundColor: Palette.glass,
-                  justifyContent: "center",
-                  paddingHorizontal: 12,
+          {["Avec rimes", "Sans rimes", "Mélange des deux"].map(
+            (item, index) => {
+              const selectedItem = selected === item;
+
+              return (
+                <CreateLyricsHeader
+                  key={index}
+                  onPress={() => onPressSelect(item)}
+                  tint={selectedItem ? "default" : "dark"}
+                  colors={
+                    selectedItem
+                      ? ["#FFFFFF00", "#FFFFFF"]
+                      : [Palette.tran, Palette.tran]
+                  }
+                  containerStyle={{
+                    ...styles.itemContainer,
                   }}
                 >
-                <Text style={styles.dropzone}>
-                  Introduction instrumentale longue.
-                </Text>
-              </BlurView>
+                  <View
+                    style={{
+                      height: 40,
+                      ...Style.containerCenter,
+                      paddingHorizontal: 14,
+                    }}
+                  >
+                    <Text style={styles.dropzone}>{item}</Text>
                   </View>
-          ))}
+                </CreateLyricsHeader>
+              );
+            }
+          )}
         </View>
       </ItemContainer>
     </View>
@@ -56,5 +80,6 @@ const styles = StyleSheet.create({
     fontSize: 16,
     color: Palette.white,
     fontFamily: FONT_FAMILY.InterRegular,
+    textAlign: "center",
   },
 });

src/screens/Writing/SongStructure.js

@@ -1,13 +1,23 @@
 import { View, Text, StyleSheet, FlatList, Pressable } from "react-native";
-import React from "react";
+import React, { useState } from "react";
 import CreateLyricsHeader from "./components/CreateLyricsHeader";
 import { BlurView } from "expo-blur";
-import { GOALS } from "../../data/data";
+import { GOALS, SONG_STRUCTURE } from "../../data/data";
 import { Palette, Style } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
 
 const SongStructure = () => {
+  const [selected, setSelected] = useState(null);
+
+  const onPressSelect = (item) => {
+    if (selected === item) {
+      setSelected(null);
+    } else {
+      setSelected(item);
+    }
+  };
+
   return (
     <View style={{ flex: 1, gap: 10, marginTop: 16 }}>
       <CreateLyricsHeader
@@ -16,23 +26,37 @@ const SongStructure = () => {
       />
       <ItemContainer>
         <FlatList
-          data={GOALS}
+          data={SONG_STRUCTURE}
           showsVerticalScrollIndicator={false}
           contentContainerStyle={styles.contentContainer}
-          renderItem={({ item }) => (
-            <Pressable style={styles.itemContainer}>
-              <BlurView
-                intensity={30}
+          renderItem={({ item }) => {
+            const selectedItem = selected === item;
+
+            return (
+              <CreateLyricsHeader
+                onPress={() => onPressSelect(item)}
+                tint={selectedItem ? "default" : "dark"}
+                colors={
+                  selectedItem
+                    ? ["#FFFFFF00", "#FFFFFF"]
+                    : [Palette.tran, Palette.tran]
+                }
+                containerStyle={{
+                  ...styles.itemContainer,
+                }}
+              >
+                <View
                   style={{
-                  flex: 1,
-                  backgroundColor: Palette.glass,
-                  ...Style.containerCenter,
+                    height: 40,
+                    paddingHorizontal: 14,
+                    justifyContent: "center",
                   }}
                 >
                   <Text style={styles.itemText}>{item}</Text>
-              </BlurView>
-            </Pressable>
-          )}
+                </View>
+              </CreateLyricsHeader>
+            );
+          }}
         />
       </ItemContainer>
     </View>
@@ -51,9 +75,7 @@ const styles = StyleSheet.create({
   },
   itemContainer: {
     height: 54,
-    backgroundColor: Palette.glass,
     borderRadius: 14,
-    overflow: "hidden",
     shadowColor: "#00000040",
     shadowOffset: {
       width: 0,

src/screens/Writing/SongStyle.js

@@ -1,14 +1,24 @@
 import { View, Text, FlatList, Pressable, StyleSheet } from "react-native";
-import React from "react";
+import React, { useState } from "react";
 import CreateLyricsHeader from "./components/CreateLyricsHeader";
 import { BlurView } from "expo-blur";
-import { GOALS } from "../../data/data";
+import { GOALS, SONG_STYLE } from "../../data/data";
 import { Palette, Style } from "../../styles";
 import CustomInput from "./components/CustomInput";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
 
 const SongStyle = () => {
+  const [selected, setSelected] = useState(null);
+
+  const onPressSelect = (item) => {
+    if (selected === item) {
+      setSelected(null);
+    } else {
+      setSelected(item);
+    }
+  };
+
   return (
     <View style={{ flex: 1, gap: 16, marginTop: 16 }}>
       <View style={{ gap: 10 }}>
@@ -18,24 +28,42 @@ const SongStyle = () => {
         />
         <ItemContainer>
           <FlatList
-            data={GOALS}
+            data={SONG_STYLE}
             showsVerticalScrollIndicator={false}
             contentContainerStyle={styles.contentContainer}
-            renderItem={({ item }) => (
-              <Pressable style={styles.itemContainer}>
-                <BlurView
-                  intensity={30}
-                  style={{
-                    flex: 1,
-                    backgroundColor: Palette.glass,
-                    paddingHorizontal: 14,
-                    ...Style.containerCenter,
+            renderItem={({ item }) => {
+              const selectedItem = selected === item.title;
+
+              return (
+                <CreateLyricsHeader
+                  colors={
+                    selectedItem
+                      ? ["#FFFFFF00", "#FFFFFF"]
+                      : [Palette.tran, Palette.tran]
+                  }
+                  tint={selectedItem ? "default" : "dark"}
+                  onPress={() => onPressSelect(item.title)}
+                  containerStyle={{
+                    ...styles.itemContainer,
                   }}
                 >
-                  <Text style={styles.itemText}>{item}</Text>
-                </BlurView>
-              </Pressable>
-            )}
+                  <View style={{ paddingVertical: 6 }}>
+                    <Text
+                      style={{
+                        fontSize: 16,
+                        color: Palette.white,
+                        fontFamily: FONT_FAMILY.InterRegular,
+                      }}
+                    >
+                      <Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
+                        {item.title}
+                      </Text>{" "}
+                      : {item.description}
+                    </Text>
+                  </View>
+                </CreateLyricsHeader>
+              );
+            }}
           />
         </ItemContainer>
       </View>
@@ -58,10 +86,7 @@ const styles = StyleSheet.create({
     paddingBottom: 50,
   },
   itemContainer: {
-    height: 54,
-    backgroundColor: Palette.glass,
     borderRadius: 14,
-    overflow: "hidden",
     shadowColor: "#00000040",
     shadowOffset: {
       width: 0,

src/screens/Writing/components/CreateLyricsHeader.js

@@ -14,12 +14,14 @@ const CreateLyricsHeader = ({
   gradientProps,
   intensity = 40,
   tint = "dark",
+  containerStyle = {},
+  onPress,
 }) => {
   const [onLayout, setOnLayout] = useState(null);
   const { isWeb } = useLayoutType();
 
   return (
-    <View>
+    <Pressable onPress={onPress}>
       <BorderGradient
         gradientProps={{
           colors: colors,
@@ -33,21 +35,21 @@ const CreateLyricsHeader = ({
           top: isWeb ? -1 : 0,
           right: isWeb ? -1 : 0,
           borderWidth: 1,
-          borderRadius: 18,
+          borderRadius: containerStyle?.borderRadius ?? 18,
           position: "absolute",
           width: "100%",
         }}
       />
-      <Pressable
+      <View
         style={{
           backgroundColor: Palette.glass,
           borderRadius: 18,
           overflow: "hidden",
+          ...containerStyle,
         }}
         onLayout={(event) => {
           setOnLayout(event.nativeEvent.layout);
         }}
-        onPress={() => console.log("PRESSED")}
       >
         <BlurView
           intensity={intensity}
@@ -82,8 +84,8 @@ const CreateLyricsHeader = ({
           )}
           {children}
         </BlurView>
-      </Pressable>
       </View>
+    </Pressable>
   );
 };