fix(mobile): couldn’t properly scroll in sheet (#5025)

When the list of safes was big one was not able to scroll inside of it.

Author: compojoom

apps/mobile/package.json

@@ -113,7 +113,7 @@
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.26.3",
     "@eslint/js": "^9.18.0",
-    "@gorhom/bottom-sheet": "^5.0.6",
+    "@gorhom/bottom-sheet": "^5.1.1",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/datetimepicker": "8.2.0",
     "@react-native-community/slider": "4.5.5",

apps/mobile/src/components/SafeBottomSheet/SafeBottomSheet.tsx

@@ -1,15 +1,17 @@
 import { BackdropComponent, BackgroundComponent } from '@/src/components/Dropdown/sheetComponents'
 import { getTokenValue, H5, View } from 'tamagui'
-import React, { useCallback } from 'react'
+import React, { useCallback, useEffect, useRef } from 'react'
 import BottomSheet, {
   BottomSheetFooterProps,
   BottomSheetModalProps,
   BottomSheetView,
   BottomSheetScrollView,
+  BottomSheetFooter,
 } from '@gorhom/bottom-sheet'
 import DraggableFlatList, { DragEndParams, RenderItemParams, ScaleDecorator } from 'react-native-draggable-flatlist'
 import { StyleSheet } from 'react-native'
 import { useRouter } from 'expo-router'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 interface SafeBottomSheetProps<T> {
   children?: React.ReactNode
@@ -19,7 +21,7 @@ interface SafeBottomSheetProps<T> {
   items?: T[]
   snapPoints?: BottomSheetModalProps['snapPoints']
   actions?: React.ReactNode
-  footerComponent?: React.FC<BottomSheetFooterProps>
+  FooterComponent?: React.FC
   renderItem?: React.FC<{ item: T; isDragging?: boolean; drag?: () => void; onClose: () => void }>
   keyExtractor?: ({ item, index }: { item: T; index: number }) => string
 }
@@ -29,14 +31,17 @@ export function SafeBottomSheet<T>({
   title,
   sortable,
   items,
-  snapPoints = [600, '90%'],
+  snapPoints = [600, '100%'],
   keyExtractor,
   actions,
   renderItem: Render,
-  footerComponent,
+  FooterComponent,
   onDragEnd,
 }: SafeBottomSheetProps<T>) {
+  const ref = useRef<BottomSheet>(null)
   const router = useRouter()
+  const insets = useSafeAreaInsets()
+  const [footerHeight, setFooterHeight] = React.useState(0)
   const hasCustomItems = items && Render
   const isSortable = items && sortable
 
@@ -77,8 +82,34 @@ export function SafeBottomSheet<T>({
     }
   }, [])
 
+  // Auto-expand when sorting is enabled
+  useEffect(() => {
+    if (sortable && ref.current) {
+      ref.current.expand()
+    }
+  }, [sortable])
+
+  // Wrapping the footer component with a function to get the height of the footer
+  const renderFooter: React.FC<BottomSheetFooterProps> = useCallback(
+    (props) => {
+      return (
+        <BottomSheetFooter animatedFooterPosition={props.animatedFooterPosition}>
+          <View
+            onLayout={(e) => {
+              setFooterHeight(e.nativeEvent.layout.height)
+            }}
+          >
+            {FooterComponent && <FooterComponent />}
+          </View>
+        </BottomSheetFooter>
+      )
+    },
+    [FooterComponent, setFooterHeight],
+  )
+
   return (
     <BottomSheet
+      ref={ref}
       enableOverDrag={false}
       snapPoints={snapPoints}
       enableDynamicSizing={true}
@@ -87,21 +118,35 @@ export function SafeBottomSheet<T>({
       overDragResistanceFactor={10}
       backgroundComponent={BackgroundComponent}
       backdropComponent={BackdropComponent}
-      footerComponent={footerComponent}
+      footerComponent={isSortable ? undefined : renderFooter}
+      topInset={insets.top}
     >
-      {!isSortable && !!title && <TitleHeader />}
-      <BottomSheetView style={[styles.contentContainer, !isSortable ? { flex: 1 } : undefined]}>
+      <BottomSheetView
+        style={[
+          styles.contentContainer,
+          {
+            paddingBottom: insets.bottom,
+          },
+        ]}
+      >
+        <TitleHeader />
         {isSortable ? (
           <DraggableFlatList<T>
             data={items}
-            containerStyle={{ height: '90%' }}
-            ListHeaderComponent={title ? <TitleHeader /> : undefined}
+            style={{ marginBottom: insets.bottom }}
+            containerStyle={{ height: '100%' }}
+            contentContainerStyle={{ paddingBottom: 50 }}
             onDragEnd={onDragEnd}
             keyExtractor={(item, index) => (keyExtractor ? keyExtractor({ item, index }) : index.toString())}
             renderItem={renderItem}
           />
         ) : (
-          <BottomSheetScrollView contentContainerStyle={styles.scrollInnerContainer}>
+          <BottomSheetScrollView
+            style={{
+              marginBottom: (!sortable && FooterComponent ? footerHeight : 0) + 12,
+            }}
+            contentContainerStyle={[styles.scrollInnerContainer]}
+          >
             <View minHeight={200} alignItems="center" paddingVertical="$3">
               <View alignItems="flex-start" paddingBottom="$4" width="100%">
                 {hasCustomItems
@@ -126,5 +171,7 @@ const styles = StyleSheet.create({
   contentContainer: {
     justifyContent: 'space-around',
   },
-  scrollInnerContainer: { paddingHorizontal: getTokenValue('$3'), paddingBottom: getTokenValue('$5') },
+  scrollInnerContainer: {
+    paddingHorizontal: getTokenValue('$3'),
+  },
 })

apps/mobile/src/features/AccountsSheet/AccountsSheet.container.tsx

@@ -21,7 +21,7 @@ export const AccountsSheetContainer = () => {
       title="My accounts"
       items={safes}
       keyExtractor={({ item }) => item.SafeInfo.address.value}
-      footerComponent={MyAccountsFooter}
+      FooterComponent={MyAccountsFooter}
       renderItem={MyAccountsContainer}
       sortable={isEdit}
       onDragEnd={onDragEnd}

apps/mobile/src/features/AccountsSheet/MyAccounts/MyAccountsFooter.test.tsx

@@ -1,10 +1,9 @@
 import { render } from '@/src/tests/test-utils'
 import { MyAccountsFooter } from './MyAccountsFooter'
-import { SharedValue } from 'react-native-reanimated'
 
 describe('MyAccountsFooter', () => {
   it('should render the defualt template', () => {
-    const container = render(<MyAccountsFooter animatedFooterPosition={2 as unknown as SharedValue<number>} />)
+    const container = render(<MyAccountsFooter />)
 
     expect(container.getByText('Add Existing Account')).toBeDefined()
     expect(container.getByText('Join New Account')).toBeDefined()

apps/mobile/src/features/AccountsSheet/MyAccounts/MyAccountsFooter.tsx

@@ -1,6 +1,5 @@
 import { Badge } from '@/src/components/Badge'
 import { SafeFontIcon } from '@/src/components/SafeFontIcon'
-import { BottomSheetFooter, BottomSheetFooterProps } from '@gorhom/bottom-sheet'
 import React from 'react'
 import { TouchableOpacity } from 'react-native'
 import { styled, Text, View } from 'tamagui'
@@ -9,53 +8,49 @@ import { Link } from 'expo-router'
 const MyAccountsFooterContainer = styled(View, {
   borderTopWidth: 1,
   borderTopColor: '$colorSecondary',
-  paddingVertical: '$7',
-  paddingHorizontal: '$5',
+  paddingVertical: '$4',
+  paddingHorizontal: '$4',
   backgroundColor: '$backgroundPaper',
 })
 
 const MyAccountsButton = styled(View, {
   columnGap: '$2',
   alignItems: 'center',
   flexDirection: 'row',
-  marginBottom: '$4',
+  padding: '$2',
 })
 
-interface CustomFooterProps extends BottomSheetFooterProps {}
-
-export function MyAccountsFooter({ animatedFooterPosition }: CustomFooterProps) {
-  const onAddAccountClick = () => null
+export function MyAccountsFooter() {
   const onJoinAccountClick = () => null
-
   return (
-    <BottomSheetFooter animatedFooterPosition={animatedFooterPosition}>
-      <MyAccountsFooterContainer>
-        <TouchableOpacity onPress={onAddAccountClick}>
-          <Link href={'/(import-accounts)'} asChild>
-            <MyAccountsButton testID="add-existing-account">
-              <Badge
-                themeName="badge_background"
-                circleSize="$10"
-                content={<SafeFontIcon size={20} name="plus-filled" />}
-              />
-
-              <Text fontSize="$4" fontWeight={600}>
-                Add Existing Account
-              </Text>
-            </MyAccountsButton>
-          </Link>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={onJoinAccountClick}>
-          <MyAccountsButton testID="join-new-account">
+    <MyAccountsFooterContainer paddingBottom={'$7'}>
+      <Link href={'/(import-accounts)'} asChild>
+        <MyAccountsButton testID="add-existing-account">
+          <View paddingLeft="$2">
+            <Badge
+              themeName="badge_background"
+              circleSize="$10"
+              content={<SafeFontIcon size={20} name="plus-filled" />}
+            />
+          </View>
+
+          <Text fontSize="$4" fontWeight={600}>
+            Add Existing Account
+          </Text>
+        </MyAccountsButton>
+      </Link>
+
+      <TouchableOpacity onPress={onJoinAccountClick}>
+        <MyAccountsButton testID="join-new-account">
+          <View paddingLeft="$2">
             <Badge themeName="badge_background" circleSize="$10" content={<SafeFontIcon size={20} name="owners" />} />
-
-            <Text fontSize="$4" fontWeight={600}>
-              Join New Account
-            </Text>
-          </MyAccountsButton>
-        </TouchableOpacity>
-      </MyAccountsFooterContainer>
-    </BottomSheetFooter>
+          </View>
+
+          <Text fontSize="$4" fontWeight={600}>
+            Join New Account
+          </Text>
+        </MyAccountsButton>
+      </TouchableOpacity>
+    </MyAccountsFooterContainer>
   )
 }

yarn.lock

@@ -5345,9 +5345,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@gorhom/bottom-sheet@npm:^5.0.6":
-  version: 5.0.6
-  resolution: "@gorhom/bottom-sheet@npm:5.0.6"
+"@gorhom/bottom-sheet@npm:^5.1.1":
+  version: 5.1.1
+  resolution: "@gorhom/bottom-sheet@npm:5.1.1"
   dependencies:
     "@gorhom/portal": "npm:1.0.14"
     invariant: "npm:^2.2.4"
@@ -5363,7 +5363,7 @@ __metadata:
       optional: true
     "@types/react-native":
       optional: true
-  checksum: 10/b8beb6bb4d80828deed5c74c8b19926cbb4887d530d07c19eaaa1d8faae6c79f942f83baad076c84d065f357f6666cbc257799fe8fc58cb375e6cbebf52b6227
+  checksum: 10/6da29c3927f6a0b6d2a459e2a1cae48ce7c0fce41663b46b0aba98490af15199e31248f83ca18753eeb439faf2c1dd957f26e4eacc9796b4962df44170b1a2d3
   languageName: node
   linkType: hard
 
@@ -8190,7 +8190,7 @@ __metadata:
     "@ethersproject/shims": "npm:^5.7.0"
     "@expo/config-plugins": "npm:^9.0.10"
     "@expo/vector-icons": "npm:^14.0.2"
-    "@gorhom/bottom-sheet": "npm:^5.0.6"
+    "@gorhom/bottom-sheet": "npm:^5.1.1"
     "@notifee/react-native": "npm:^9.1.8"
     "@react-native-async-storage/async-storage": "npm:1.23.1"
     "@react-native-clipboard/clipboard": "npm:^1.15.0"