fix: padding in scrollview bottomsheet (#172)

juspay · Jan 2, 2025 · 9799eba · 9799eba
1 parent 0145a42
commit 9799eba
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 29 deletions.
diff --git a/src/components/common/CustomView.res b/src/components/common/CustomView.res
@@ -1,15 +1,17 @@
 open ReactNative
 open Style
 type modalPosition = [#center | #top | #bottom]
+
 @react.component
 let make = (
   ~onDismiss=() => (),
   ~children,
   ~closeOnClickOutSide=true,
-  ~modalPosition: modalPosition=#bottom,
+  ~modalPosition=#bottom,
   ~bottomModalWidth=100.->pct,
   (),
 ) => {
+  let (viewPortContants, _) = React.useContext(ViewportContext.viewPortContext)
   let modalPosStyle = array([
     viewStyle(~flex=1., ~width=100.->pct, ~height=100.->pct, ~alignItems=#center, ()),
     switch modalPosition {
@@ -51,7 +53,7 @@ let make = (
         ~borderBottomLeftRadius=0.,
         ~borderBottomRightRadius=0.,
         ~overflow=#hidden,
-        ~maxHeight=95.->pct,
+        ~maxHeight=viewPortContants.maxPaymentSheetHeight->pct,
         ~alignItems=#center,
         ~justifyContent=#center,
         (),
@@ -67,15 +69,42 @@ module Wrapper = {
   @react.component
   let make = (~onModalClose, ~width=100.->pct, ~children=React.null) => {
     let {bgColor} = ThemebasedStyle.useThemeBasedStyle()
+    let (viewPortContants, _) = React.useContext(ViewportContext.viewPortContext)
+
+    let maxScrollViewHeight =
+      viewPortContants.windowHeight *. viewPortContants.maxPaymentSheetHeight /. 100. -.
+        viewPortContants.navigationBarHeight
+    let (isScrollable, setIsScrollable) = React.useState(_ => false)
 
-    <Animated.ScrollView
+    <ScrollView
+      onLayout={event => {
+        let height = event.nativeEvent.layout.height
+        if height > maxScrollViewHeight {
+          setIsScrollable(_ => true)
+        } else {
+          setIsScrollable(_ => false)
+        }
+      }}
+      contentContainerStyle={viewStyle(
+        ~paddingBottom=isScrollable
+          ? (viewPortContants.navigationBarHeight +. 15.)->dp
+          : viewPortContants.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/contexts/ViewportContext.res b/src/contexts/ViewportContext.res
@@ -0,0 +1,37 @@
+type viewPortContants = {
+  windowHeight: float,
+  navigationBarHeight: float,
+  maxPaymentSheetHeight: float,
+}
+
+let defaultNavbarHeight = 25.
+let windowHeight = ReactNative.Dimensions.get(#window).height
+let screenHeight = ReactNative.Dimensions.get(#screen).height
+let statusBarHeight = ReactNative.StatusBar.currentHeight
+
+let navigationBarHeight = if ReactNative.Platform.os !== #android {
+  defaultNavbarHeight
+} else {
+  let navigationHeight = screenHeight -. windowHeight -. statusBarHeight
+  Math.min(75., Math.max(0., navigationHeight) +. defaultNavbarHeight)
+}
+
+let maxPaymentSheetHeight = 95. // pct
+
+let defaultVal: viewPortContants = {windowHeight, navigationBarHeight, maxPaymentSheetHeight}
+
+let viewPortContext = React.createContext((defaultVal, (_: viewPortContants) => ()))
+
+module Provider = {
+  let make = React.Context.provider(viewPortContext)
+}
+@react.component
+let make = (~children) => {
+  let (state, setState) = React.useState(_ => defaultVal)
+
+  let setState = React.useCallback1(val => {
+    setState(_ => val)
+  }, [setState])
+
+  <Provider value=(state, setState)> children </Provider>
+}
diff --git a/src/routes/App.res b/src/routes/App.res
@@ -8,13 +8,15 @@ module ContextWrapper = {
       <NativePropContext nativeProp={SdkTypes.nativeJsonToRecord(props, rootTag)}>
         <PaymentScreenContext>
           <ThemeContext>
-            <LoggerContext>
-              <CardDataContext>
-                <AllApiDataContext>
-                  <CustomKeyboardAvoidingView> children </CustomKeyboardAvoidingView>
-                </AllApiDataContext>
-              </CardDataContext>
-            </LoggerContext>
+            <ViewportContext>
+              <LoggerContext>
+                <CardDataContext>
+                  <AllApiDataContext>
+                    <CustomKeyboardAvoidingView> children </CustomKeyboardAvoidingView>
+                  </AllApiDataContext>
+                </CardDataContext>
+              </LoggerContext>
+            </ViewportContext>
           </ThemeContext>
         </PaymentScreenContext>
       </NativePropContext>

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>
 }