fix: padding in scrollview bottomsheet

juspay · Dec 25, 2024 · ac8c410 · ac8c410
1 parent 54f2284
commit ac8c410
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 20 deletions.
diff --git a/src/components/common/CustomView.res b/src/components/common/CustomView.res
@@ -68,14 +68,50 @@ module Wrapper = {
   let make = (~onModalClose, ~width=100.->pct, ~children=React.null) => {
     let {bgColor} = ThemebasedStyle.useThemeBasedStyle()
 
-    <Animated.ScrollView
+    let defaultHeight = 25.
+    let navigationBarHeight = React.useMemo(() => {
+      if Platform.os !== #android {
+        defaultHeight
+      } else {
+        let screenHeight = Dimensions.get(#screen).height
+        let windowHeight = Dimensions.get(#window).height
+        let statusBarHeight = StatusBar.currentHeight
+        let navigationHeight = screenHeight -. windowHeight -. statusBarHeight
+        Math.min(75., Math.max(0., navigationHeight) +. defaultHeight)
+      }
+    }, [])
+
+    let windowHeight = Dimensions.get(#window).height
+    let maxScrollViewHeight = windowHeight *. 0.95
+    let (isScrollable, setIsScrollable) = React.useState(_ => false)
+
+    <ScrollView
+      onLayout={event => {
+        let height = event.nativeEvent.layout.height
+        if height > maxScrollViewHeight {
+          setIsScrollable(_ => true)
+        } else {
+          setIsScrollable(_ => false)
+        }
+      }}
+      contentContainerStyle={viewStyle(
+        ~paddingBottom=isScrollable ? (navigationBarHeight +. 15.)->dp : navigationBarHeight->dp,
+        (),
+      )}
       keyboardShouldPersistTaps={#handled}
       style={array([
-        viewStyle(~flexGrow=1., ~width, ~minHeight=250.->dp, ~padding=20.->dp, ()),
+        viewStyle(
+          ~flexGrow=1.,
+          ~width,
+          ~minHeight=250.->dp,
+          ~paddingHorizontal=20.->dp,
+          ~paddingTop=20.->dp,
+          (),
+        ),
         bgColor,
       ])}>
       <ModalHeader onModalClose />
       children
-    </Animated.ScrollView>
+    </ScrollView>
   }
 }
diff --git a/src/components/elements/ConfirmButton.res b/src/components/elements/ConfirmButton.res
@@ -7,7 +7,6 @@ let make = (
   ~paymentMethod: string,
   ~paymentExperience=?,
   ~errorText=None,
-  ~bottomSpace=0.,
 ) => {
   let (nativeProp, _) = React.useContext(NativePropContext.nativePropContext)
   let (allApiData, _) = React.useContext(AllApiDataContext.allApiDataContext)
@@ -35,6 +34,5 @@ let make = (
               : localeObject.payNowButton
           }}
         />}
-    {bottomSpace > 0. ? <Space height={bottomSpace} /> : React.null}
   </>
 }
diff --git a/src/routes/FullScreenSheetWrapper.res b/src/routes/FullScreenSheetWrapper.res
@@ -52,16 +52,6 @@ let make = (~children) => {
     None
   }, [loading])
 
-  let navigationBarHeight = React.useMemo(() => {
-    if Platform.os !== #android {
-      0.
-    } else {
-      let screenHeight = Dimensions.get(#screen).height
-      let windowHeight = Dimensions.get(#window).height
-      screenHeight -. windowHeight
-    }
-  }, [])
-
   <View
     style={viewStyle(
       ~flex=1.,
@@ -80,7 +70,6 @@ let make = (~children) => {
       <CustomView onDismiss=onModalClose>
         <CustomView.Wrapper onModalClose>
           {children}
-          <Space height={navigationBarHeight} />
         </CustomView.Wrapper>
       </CustomView>
     </Animated.View>

diff --git a/src/routes/GlobalConfirmButton.res b/src/routes/GlobalConfirmButton.res
@@ -2,8 +2,5 @@ open ReactNative
 
 @react.component
 let make = (~confirmButtonDataRef) => {
-  <View>
-    {confirmButtonDataRef}
-    <Space />
-  </View>
+  <View> {confirmButtonDataRef} </View>
 }