fix web flow

src/screens/Writing/SongStyle.js

@@ -1,7 +1,7 @@
 import { View, StyleSheet } from "react-native";
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import CreateLyricsHeader from "./components/CreateLyricsHeader";
-import { SONG_STYLE } from "../../data/data";
+import { OTHER_STYLE_OPTION, SONG_STYLE } from "../../data/data";
 import { Palette } from "../../styles";
 import CustomInput from "./components/CustomInput";
 import { FONT_FAMILY } from "../../styles/Fonts";
@@ -18,9 +18,16 @@ const SongStyle = ({
   const selected = selectedProp ?? internalSelected;
   const setSelected = setSelectedProp ?? setInternalSelected;
 
+  const songStyleOptions = useMemo(() => SONG_STYLE ?? [], []);
+
   const handleOtherStyleChange = (value) => {
     setOtherStyle?.(value);
-    if (value?.trim()?.length && selected != null) {
+    const trimmed = value?.trim() ?? "";
+    if (trimmed.length) {
+      if (selected !== OTHER_STYLE_OPTION) {
+        setSelected(OTHER_STYLE_OPTION);
+      }
+    } else if (selected === OTHER_STYLE_OPTION) {
       setSelected(null);
     }
   };
@@ -36,7 +43,7 @@ const SongStyle = ({
         />
         <ItemContainer>
           <ListSelection
-            options={SONG_STYLE}
+            options={songStyleOptions}
             variant="titleDescription"
             selected={selected}
             setSelected={setSelected}
@@ -47,7 +54,7 @@ const SongStyle = ({
       </View>
       <CustomInput
         label="Tu as un autre style de chanson ?"
-        placeholder="Décrire l’objectif"
+        placeholder="Décrire le style"
         value={otherStyle}
         setValue={handleOtherStyleChange}
       />