fix write lyrics flow

src/screens/Writing/CreateLyricsWithAi.web.js

@@ -1,5 +1,5 @@
-import React, { useMemo, useRef, useState } from "react";
-import { Dimensions, FlatList, Platform, View } from "react-native";
+import React, { useMemo, useState } from "react";
+import { Platform, View } from "react-native";
 import { responsiveHeight } from "react-native-responsive-dimensions";
 import { background, icons } from "../../assets";
 import GradientButton from "../../components/GradientButton";
@@ -21,16 +21,10 @@ import SongStyle from "./SongStyle";
 import SongTo from "./SongTo";
 import SpecificityContext from "./SpecificityContext";
 
-const { width: windowWidth } = Dimensions.get("window");
-
 const CreateLyricsWithAi = () => {
   const { selectedProject, updateProjectData } = useUser();
   const hasLyrics = selectedProject?.hasLyrics === true;
-  const scrollRef = useRef(null);
   const [selectedIndex, setSelectedIndex] = useState(hasLyrics ? 5 : 0);
-  const [progress, setProgress] = useState(16);
-  const [parentLayout, setParentLayout] = useState(null);
-  const containerWidth = parentLayout?.width || windowWidth || 1;
 
   // Collected state across steps
   const [objective, setObjective] = useState(null); // from Goals list
@@ -200,6 +194,11 @@ const CreateLyricsWithAi = () => {
     }
   }, [hasLyrics]);
 
+  const progress = useMemo(
+    () => 16 + selectedIndex * 9,
+    [selectedIndex]
+  );
+
   const lyricsConfig = useMemo(() => {
     const resolvedObjective = shouldUseOtherObjective
       ? persistedOtherObjective || undefined
@@ -435,28 +434,7 @@ const CreateLyricsWithAi = () => {
     },
   ];
 
-  const getItemLayout = React.useCallback(
-    (_, index) => ({
-      length: containerWidth,
-      offset: containerWidth * index,
-      index,
-    }),
-    [containerWidth]
-  );
-
-  // Sync scroll position and progress with selectedIndex
-  React.useEffect(() => {
-    if (!parentLayout?.height) return;
-    try {
-      const nextProgress = 16 + selectedIndex * 9;
-      setProgress(nextProgress);
-      scrollRef.current?.scrollToIndex?.({
-        index: selectedIndex,
-        animated: true,
-        viewPosition: 0,
-      });
-    } catch (_) {}
-  }, [selectedIndex, parentLayout?.height, containerWidth]);
+  const currentStep = steps[selectedIndex];
 
   return (
     <Page
@@ -479,31 +457,18 @@ const CreateLyricsWithAi = () => {
       >
         <View
           style={{ flex: 1 }}
-          onLayout={(e) => setParentLayout(e.nativeEvent.layout)}
         >
-          <FlatList
-            ref={scrollRef}
-            data={steps}
-            keyExtractor={(item) => item.key}
-            horizontal
-            pagingEnabled
-            scrollEnabled={false}
-            showsHorizontalScrollIndicator={false}
-            initialScrollIndex={selectedIndex}
-            getItemLayout={getItemLayout}
-            style={{ width: containerWidth }}
-            renderItem={({ item }) => (
-              <View
-                style={{
-                  width: containerWidth,
-                  height: parentLayout?.height,
-                  paddingHorizontal: gutters,
-                }}
-              >
-                {item.render()}
-              </View>
-            )}
-          />
+          {currentStep ? (
+            <View
+              key={currentStep.key}
+              style={{
+                flex: 1,
+                paddingHorizontal: gutters,
+              }}
+            >
+              {currentStep.render()}
+            </View>
+          ) : null}
         </View>
         {selectedIndex !== 8 && (
           <GradientButton