From 5f54352d3c58c643e5df78284ab3c7890df5b4a5 Mon Sep 17 00:00:00 2001 From: Shivam25092001 Date: Fri, 27 Dec 2024 17:19:43 +0530 Subject: [PATCH 1/2] fix: padding in scrollview bottomsheet --- src/components/common/CustomView.res | 45 +++++++++++++++++++++-- src/components/elements/ConfirmButton.res | 2 - src/routes/FullScreenSheetWrapper.res | 11 ------ src/routes/GlobalConfirmButton.res | 5 +-- 4 files changed, 42 insertions(+), 21 deletions(-) diff --git a/src/components/common/CustomView.res b/src/components/common/CustomView.res index e4ef1b9a..67ff1aa3 100644 --- a/src/components/common/CustomView.res +++ b/src/components/common/CustomView.res @@ -1,12 +1,13 @@ 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, (), ) => { @@ -68,14 +69,50 @@ module Wrapper = { let make = (~onModalClose, ~width=100.->pct, ~children=React.null) => { let {bgColor} = ThemebasedStyle.useThemeBasedStyle() - { + 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 -. navigationBarHeight) + let (isScrollable, setIsScrollable) = React.useState(_ => false) + + { + 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, ])}> children - + } } diff --git a/src/components/elements/ConfirmButton.res b/src/components/elements/ConfirmButton.res index 5e754106..f0a2144d 100644 --- 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. ? : React.null} } diff --git a/src/routes/FullScreenSheetWrapper.res b/src/routes/FullScreenSheetWrapper.res index b78985a3..512ec5bc 100644 --- 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 - } - }, []) - { {children} - diff --git a/src/routes/GlobalConfirmButton.res b/src/routes/GlobalConfirmButton.res index 8df2d158..10dc44b3 100644 --- a/src/routes/GlobalConfirmButton.res +++ b/src/routes/GlobalConfirmButton.res @@ -2,8 +2,5 @@ open ReactNative @react.component let make = (~confirmButtonDataRef) => { - - {confirmButtonDataRef} - - + {confirmButtonDataRef} } From 3381f7ef47049c16eaae7c9b56ca2b800fdf3faa Mon Sep 17 00:00:00 2001 From: Shivam25092001 Date: Thu, 2 Jan 2025 14:40:48 +0530 Subject: [PATCH 2/2] refactor: shift navbar height calculation logic to context variable --- src/components/common/CustomView.res | 26 +++++++------------ src/contexts/ViewportContext.res | 37 ++++++++++++++++++++++++++++ src/routes/App.res | 16 ++++++------ 3 files changed, 55 insertions(+), 24 deletions(-) create mode 100644 src/contexts/ViewportContext.res diff --git a/src/components/common/CustomView.res b/src/components/common/CustomView.res index 67ff1aa3..40442f61 100644 --- a/src/components/common/CustomView.res +++ b/src/components/common/CustomView.res @@ -11,6 +11,7 @@ let make = ( ~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 { @@ -52,7 +53,7 @@ let make = ( ~borderBottomLeftRadius=0., ~borderBottomRightRadius=0., ~overflow=#hidden, - ~maxHeight=95.->pct, + ~maxHeight=viewPortContants.maxPaymentSheetHeight->pct, ~alignItems=#center, ~justifyContent=#center, (), @@ -68,22 +69,11 @@ module Wrapper = { @react.component let make = (~onModalClose, ~width=100.->pct, ~children=React.null) => { let {bgColor} = ThemebasedStyle.useThemeBasedStyle() + let (viewPortContants, _) = React.useContext(ViewportContext.viewPortContext) - 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 -. navigationBarHeight) + let maxScrollViewHeight = + viewPortContants.windowHeight *. viewPortContants.maxPaymentSheetHeight /. 100. -. + viewPortContants.navigationBarHeight let (isScrollable, setIsScrollable) = React.useState(_ => false) dp : navigationBarHeight->dp, + ~paddingBottom=isScrollable + ? (viewPortContants.navigationBarHeight +. 15.)->dp + : viewPortContants.navigationBarHeight->dp, (), )} keyboardShouldPersistTaps={#handled} diff --git a/src/contexts/ViewportContext.res b/src/contexts/ViewportContext.res new file mode 100644 index 00000000..3128ac46 --- /dev/null +++ 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]) + + children +} diff --git a/src/routes/App.res b/src/routes/App.res index 05580a05..09d0c6a4 100644 --- a/src/routes/App.res +++ b/src/routes/App.res @@ -8,13 +8,15 @@ module ContextWrapper = { - - - - children - - - + + + + + children + + + +