update

src/screens/Writing/CreateLyricsWithAi.js

@@ -1,8 +1,7 @@
-import { View, Text, ScrollView, Dimensions } from "react-native";
+import { View, Dimensions } from "react-native";
 import React, { useRef, useState } from "react";
 import Page from "../../layouts/Page";
 import MusicLandHeader from "../../components/MusicLandHeader";
-import CreateLyricsHeader from "./components/CreateLyricsHeader";
 import GradientButton from "../../components/GradientButton";
 import { gutters } from "../../styles";
 import { SwiperFlatList } from "react-native-swiper-flatlist";
@@ -16,6 +15,7 @@ import SongStructure from "./SongStructure";
 import CustomizeSongStructure from "./CustomizeSongStructure";
 import Rhymes from "./Rhymes";
 import CreatingLyrics from "./CreatingLyrics";
+import { responsiveHeight } from "react-native-responsive-dimensions";
 
 const { width } = Dimensions.get("window");
 
@@ -23,8 +23,7 @@ const CreateLyricsWithAi = () => {
   const scrollRef = useRef(null);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [progress, setProgress] = useState(16);
-
-  console.log("progress: ", progress);
+  const [parentLayout, setparentLayout] = useState(null);
 
   const onPressNext = () => {
     setSelectedIndex(selectedIndex + 1);
@@ -55,8 +54,18 @@ const CreateLyricsWithAi = () => {
         progress={progress}
         showSkip={selectedIndex === 4}
       />
-      <View style={{ flex: 1, marginTop: 16, paddingBottom: gutters, gap: 48 }}>
-        <View style={{ flex: 1 }}>
+      <View
+        style={{
+          flex: 1,
+          marginTop: 16,
+          paddingBottom: gutters,
+          gap: responsiveHeight(5),
+        }}
+      >
+        <View
+          style={{ flex: 1 }}
+          onLayout={(e) => setparentLayout(e.nativeEvent.layout)}
+        >
           <SwiperFlatList
             style={{ width, left: -gutters }}
             ref={scrollRef}
@@ -65,7 +74,7 @@ const CreateLyricsWithAi = () => {
             <View
               style={{
                 width: width,
-                height: "100%",
+                height: parentLayout?.height,
                 paddingHorizontal: gutters,
               }}
             >
@@ -74,7 +83,7 @@ const CreateLyricsWithAi = () => {
             <View
               style={{
                 width: width,
-                height: "100%",
+                height: parentLayout?.height,
                 paddingHorizontal: gutters,
               }}
             >
@@ -83,7 +92,7 @@ const CreateLyricsWithAi = () => {
             <View
               style={{
                 width: width,
-                height: "100%",
+                height: parentLayout?.height,
                 paddingHorizontal: gutters,
               }}
             >
@@ -92,7 +101,7 @@ const CreateLyricsWithAi = () => {
             <View
               style={{
                 width: width,
-                height: "100%",
+                height: parentLayout?.height,
                 paddingHorizontal: gutters,
               }}
             >
@@ -101,7 +110,7 @@ const CreateLyricsWithAi = () => {
             <View
               style={{
                 width: width,
-                height: "100%",
+                height: parentLayout?.height,
                 paddingHorizontal: gutters,
               }}
             >
@@ -110,7 +119,7 @@ const CreateLyricsWithAi = () => {
             <View
               style={{
                 width: width,
-                height: "100%",
+                height: parentLayout?.height,
                 paddingHorizontal: gutters,
               }}
             >
@@ -119,7 +128,7 @@ const CreateLyricsWithAi = () => {
             <View
               style={{
                 width: width,
-                height: "100%",
+                height: parentLayout?.height,
                 paddingHorizontal: gutters,
               }}
             >
@@ -128,7 +137,7 @@ const CreateLyricsWithAi = () => {
             <View
               style={{
                 width: width,
-                height: "100%",
+                height: parentLayout?.height,
                 paddingHorizontal: gutters,
               }}
             >
@@ -137,7 +146,7 @@ const CreateLyricsWithAi = () => {
             <View
               style={{
                 width: width,
-                height: "100%",
+                height: parentLayout?.height,
                 paddingHorizontal: gutters,
               }}
             >