continue flow integartion

src/screens/Studio/ChooseGenre.js

@@ -1,21 +1,24 @@
 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 { FONT_FAMILY } from "../../styles/Fonts";
 import { Palette } from "../../styles";
 import { CHOOSE_GENRE } from "../../data/data";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
+import _ from "lodash";
 
-const ChooseGenre = () => {
+const ChooseGenre = ({ selected = [], setSelected }) => {
   const [containerLayout, setContainerLayout] = useState(null);
-  const [selected, setSelected] = useState(null);
 
   const onPressSelect = (item) => {
-    if (selected === item) {
-      setSelected(null);
-    } else {
-      setSelected(item);
+    if (!setSelected) return;
+    const value = item?.title;
+    const list = _.isArray(selected) ? selected : [];
+    const exists = _.includes(list, value);
+    if (exists) {
+      setSelected(_.filter(list, (v) => !_.isEqual(v, value)));
+    } else if (_.size(list) < 2) {
+      setSelected([...list, value]);
     }
   };
 
@@ -39,18 +42,19 @@ const ChooseGenre = () => {
               paddingTop: 5,
             }}
             renderItem={({ item, index }) => {
-              const selectedItem = selected === item.title;
+              const list = Array.isArray(selected) ? selected : [];
+              const selectedItem = _.includes(list, item.title);
 
               return (
                 <View style={{ paddingHorizontal: 5 }}>
                   <CreateLyricsHeader
-                    colors={
-                      selectedItem
-                        ? ["#FFFFFF00", "#FFFFFF"]
-                        : [Palette.tran, Palette.tran]
-                    }
+                    colors={[Palette.tran, Palette.tran]}
                     tint={selectedItem ? "default" : "dark"}
-                    onPress={() => onPressSelect(item.title)}
+                    onPress={() => onPressSelect(item)}
+                    containerStyle={{
+                      borderWidth: selectedItem ? 2 : 0,
+                      borderColor: selectedItem ? "#F94697" : "transparent",
+                    }}
                   >
                     <Text
                       style={{