update

src/screens/Studio/ChooseGenre.js

@@ -1,76 +1,78 @@
-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)}>
-        <FlatList
-          data={CHOOSE_GENRE}
-          contentContainerStyle={{
-            gap: 16,
-            flexGrow: 1,
-            zIndex: 2,
-          }}
-          renderItem={({ item, index }) => (
-            <View style={{ borderRadius: 14, overflow: "hidden" }}>
-              <BlurView
-                intensity={30}
-                style={{ paddingVertical: 14, paddingHorizontal: 12 }}
-              >
-                <Text
-                  style={{
-                    fontSize: 16,
-                    color: Palette.white,
-                    fontFamily: FONT_FAMILY.InterRegular,
-                  }}
-                >
-                  <Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
-                    {item.title}
-                  </Text>{" "}
-                  : {item.description}
-                </Text>
-              </BlurView>
-            </View>
-          )}
-        />
-      </ItemContainer>
+      <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 }) => {
+              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={{
+                        fontSize: 16,
+                        color: Palette.white,
+                        fontFamily: FONT_FAMILY.InterRegular,
+                      }}
+                    >
+                      <Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
+                        {item.title}
+                      </Text>{" "}
+                      : {item.description}
+                    </Text>
+                  </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),
-  },
-});