feat: keyboard avoiding view

src/screens/Writing/CreateLyricsWithAi.js

@@ -1,12 +1,10 @@
 import React, { useMemo, useRef, useState } from "react";
-import { Dimensions, Platform, View } from "react-native";
+import { Dimensions, KeyboardAvoidingView, Platform, View } from "react-native";
 import { responsiveHeight } from "react-native-responsive-dimensions";
 import { SwiperFlatList } from "react-native-swiper-flatlist";
-import { background, icons } from "../../assets";
 import GradientButton from "../../components/GradientButton";
 import MusicLandHeader from "../../components/MusicLandHeader";
 import { OTHER_OBJECTIVE_OPTION, OTHER_STYLE_OPTION } from "../../data/data";
-import useLayoutType from "../../hooks/useLayoutType";
 import Page from "../../layouts/Page";
 import { goBack } from "../../navigation/NavigationService";
 import { useUser } from "../../providers/UserDataProvider";
@@ -26,7 +24,6 @@ const MAX_STEP_INDEX = 8;
 const CUSTOM_SANITIZE_OPTIONS = { autoInjectPreChorus: false };
 
 const CreateLyricsWithAi = () => {
-  const { isWeb } = useLayoutType();
   const { selectedProject } = useUser();
   const scrollRef = useRef(null);
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -363,19 +360,16 @@ const CreateLyricsWithAi = () => {
   }, [selectedIndex, parentLayout?.height]);
 
   return (
-    <Page
-      headerType="NONE"
-      behavior={Platform.OS === "ios" ? "padding" : "height"}
-      keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 100}
-      backgroundImg={background.writingBG}
-    >
+    <Page>
       <MusicLandHeader onPressBack={onPressBack} progress={progress} />
-      <View
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
         style={{
           flex: 1,
           paddingBottom: gutters,
           gap: responsiveHeight(5),
         }}
+        keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 100}
       >
         <View
           style={{ flex: 1 }}
@@ -513,7 +507,7 @@ const CreateLyricsWithAi = () => {
             containerStyle={{ alignSelf: "center", width: "100%" }}
           />
         )}
-      </View>
+      </KeyboardAvoidingView>
     </Page>
   );
 };