Dynamically mount modal's children according to their "scrollability"

alephium · Oct 16, 2024 · 7fdfa69 · 7fdfa69
1 parent 690aa7b
commit 7fdfa69
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 13 deletions.
diff --git a/apps/mobile-wallet/src/features/modals/BottomModal.tsx b/apps/mobile-wallet/src/features/modals/BottomModal.tsx
@@ -56,7 +56,7 @@ const BottomModal = ({
       <AnimatedScrollView
         onContentSizeChange={modalState.handleContentSizeChange}
         keyboardShouldPersistTaps="handled"
-        scrollEnabled={modalState.isScrollable}
+        scrollEnabled={modalState.isContentScrollable}
         scrollEventThrottle={16}
         contentContainerStyle={[
           contentContainerStyle,

diff --git a/apps/mobile-wallet/src/features/modals/BottomModalBase.tsx b/apps/mobile-wallet/src/features/modals/BottomModalBase.tsx
@@ -17,7 +17,7 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { ReactNode } from 'react'
-import { KeyboardAvoidingView, Pressable } from 'react-native'
+import { KeyboardAvoidingView, Pressable, View } from 'react-native'
 import { GestureDetector } from 'react-native-gesture-handler'
 import Animated from 'react-native-reanimated'
 import styled from 'styled-components/native'
@@ -50,6 +50,7 @@ const BottomModalBase = ({
   panGesture,
   navHeight,
   title,
+  isContentScrollable,
   children
 }: BottomModalBaseProps) => (
   <KeyboardAvoidingViewStyled behavior="height" enabled={!maximisedContent}>
@@ -60,15 +61,18 @@ const BottomModalBase = ({
           <Handle style={handleAnimatedStyle} />
         </HandleContainer>
         <GestureDetector gesture={panGesture}>
-          <Navigation style={{ height: navHeight }}>
-            <NavigationButtonContainer align="left" />
-            <Title semiBold>{title}</Title>
-            <NavigationButtonContainer align="right">
-              <CloseButton onPress={handleClose} compact />
-            </NavigationButtonContainer>
-          </Navigation>
+          <View>
+            <Navigation style={{ height: navHeight }}>
+              <NavigationButtonContainer align="left" />
+              <Title semiBold>{title}</Title>
+              <NavigationButtonContainer align="right">
+                <CloseButton onPress={handleClose} compact />
+              </NavigationButtonContainer>
+            </Navigation>
+            {!isContentScrollable && children}
+          </View>
         </GestureDetector>
-        {children}
+        {isContentScrollable && children}
       </ModalStyled>
     </Container>
   </KeyboardAvoidingViewStyled>

diff --git a/apps/mobile-wallet/src/features/modals/useBottomModalState.tsx b/apps/mobile-wallet/src/features/modals/useBottomModalState.tsx
@@ -83,7 +83,7 @@ export const useBottomModalState = ({
 
   const offsetY = useSharedValue(0)
 
-  const [isScrollable, setIsScrollable] = useState(false)
+  const [isContentScrollable, setIsContentScrollable] = useState(false)
 
   const isModalClosing = useAppSelector((s) => selectModalById(s, modalId)?.isClosing)
 
@@ -134,7 +134,7 @@ export const useBottomModalState = ({
           shouldMaximizeOnOpen.value ? handleMaximize() : handleMinimize()
 
           // Determine if scrolling is needed
-          runOnJS(setIsScrollable)(contentHeight.value > dimensions.height * 0.9)
+          runOnJS(setIsContentScrollable)(contentHeight.value > dimensions.height * 0.9)
         })()
       }
     },
@@ -257,6 +257,6 @@ export const useBottomModalState = ({
     panGesture,
     handleClose,
     contentScrollHandlers,
-    isScrollable
+    isContentScrollable
   }
 }