update

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,35 +26,48 @@ const EmotionConvey = () => {
         subTitle="Sélectionne tes intentions émotionnelles. (2 max)"
       />
 
-      <ItemContainer height={responsiveHeight(50)}>
-        <FlatList
-          data={EMOTION_CONVEY}
-          contentContainerStyle={{
-            gap: 16,
-            flexGrow: 1,
-            zIndex: 2,
-            paddingTop: 5,
-          }}
-          renderItem={({ item, index }) => (
-            <View style={{ paddingHorizontal: 5 }}>
-              <CreateLyricsHeader colors={item.color} intensity={30} >
-                <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
+        style={{ flex: 1 }}
+        onLayout={(event) => setContainerLayout(event.nativeEvent.layout)}
+      >
+        <ItemContainer height={containerLayout?.height}>
+          <FlatList
+            data={EMOTION_CONVEY}
+            contentContainerStyle={{
+              gap: 16,
+              flexGrow: 1,
+              zIndex: 2,
+              paddingTop: 5,
+            }}
+            renderItem={({ item, index }) => {
+              const selectedItem = selected === item.title;
+
+              return (
+                <View style={{ paddingHorizontal: 5 }}>
+                  <CreateLyricsHeader
+                    colors={item.color}
+                    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>
   );
 };