feat: keyboard avoiding view

src/screens/Writing/CreateLyricsWithAi.js

@@ -23,7 +23,6 @@ import SpecificityContext from './SpecificityContext'
 const { width: windowWidth } = Dimensions.get('window')
 const MAX_STEP_INDEX = 8
 const CUSTOM_SANITIZE_OPTIONS = { autoInjectPreChorus: false }
-const CTA_BUTTON_HEIGHT = 50
 const CTA_BUTTON_MAX_WIDTH = 500
 
 const CreateLyricsWithAi = () => {
@@ -342,14 +341,6 @@ const CreateLyricsWithAi = () => {
   }, [selectedIndex, parentLayout?.height])
 
   const isCtaVisible = selectedIndex !== 8
-  const ctaBottomOffset = gutters
-  const ctaReservedSpace = isCtaVisible
-    ? CTA_BUTTON_HEIGHT + ctaBottomOffset + gutters
-    : gutters
-  const contentHeight =
-    typeof parentLayout?.height === 'number'
-      ? Math.max(0, parentLayout.height - ctaReservedSpace)
-      : parentLayout?.height
 
   return (
     <Page headerType="NONE" backgroundImg={background.writingMobileBackground}>
@@ -367,12 +358,13 @@ const CreateLyricsWithAi = () => {
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         style={{
           flex: 1,
-          gap: responsiveHeight(5),
+          // gap: responsiveHeight(5),
+          // paddingBottom: gutters * 3,
         }}
         keyboardVerticalOffset={headerHeight}
       >
         <View
-          style={{ flex: 1, paddingBottom: ctaReservedSpace }}
+          style={{ flex: 1 }}
           onLayout={(e) => setparentLayout(e.nativeEvent.layout)}
         >
           <SwiperFlatList
@@ -388,7 +380,7 @@ const CreateLyricsWithAi = () => {
             <View
               style={{
                 width: containerWidth,
-                height: contentHeight,
+                height: '100%',
                 paddingHorizontal: gutters,
               }}
             >
@@ -402,7 +394,7 @@ const CreateLyricsWithAi = () => {
             <View
               style={{
                 width: containerWidth,
-                height: contentHeight,
+                height: '100%',
                 paddingHorizontal: gutters,
               }}
             >
@@ -411,7 +403,7 @@ const CreateLyricsWithAi = () => {
             <View
               style={{
                 width: containerWidth,
-                height: contentHeight,
+                height: '100%',
                 paddingHorizontal: gutters,
               }}
             >
@@ -420,7 +412,7 @@ const CreateLyricsWithAi = () => {
             <View
               style={{
                 width: containerWidth,
-                height: contentHeight,
+                height: '100%',
                 paddingHorizontal: gutters,
               }}
             >
@@ -434,7 +426,7 @@ const CreateLyricsWithAi = () => {
             <View
               style={{
                 width: containerWidth,
-                height: contentHeight,
+                height: '100%',
                 paddingHorizontal: gutters,
               }}
             >
@@ -443,7 +435,7 @@ const CreateLyricsWithAi = () => {
             <View
               style={{
                 width: containerWidth,
-                height: contentHeight,
+                height: '100%',
                 paddingHorizontal: gutters,
               }}
             >
@@ -452,7 +444,7 @@ const CreateLyricsWithAi = () => {
             <View
               style={{
                 width: containerWidth,
-                height: contentHeight,
+                height: '100%',
                 paddingHorizontal: gutters,
               }}
             >
@@ -464,7 +456,7 @@ const CreateLyricsWithAi = () => {
             <View
               style={{
                 width: containerWidth,
-                height: contentHeight,
+                height: '100%',
                 paddingHorizontal: gutters,
               }}
             >
@@ -473,7 +465,7 @@ const CreateLyricsWithAi = () => {
             <View
               style={{
                 width: containerWidth,
-                height: contentHeight,
+                height: '100%',
                 paddingHorizontal: gutters,
               }}
             >
@@ -501,11 +493,10 @@ const CreateLyricsWithAi = () => {
         {isCtaVisible && (
           <View
             style={{
-              position: 'absolute',
-              left: gutters,
-              right: gutters,
-              bottom: ctaBottomOffset,
+              paddingHorizontal: gutters,
               alignItems: 'center',
+              paddingTop: 20,
+              paddingBottom: 50
             }}
           >
             <GradientButton