feat(mobile): fix bottom sheet unusable in modal screens (#83)

get6pm · Jul 6, 2024 · 621c6de · 621c6de
1 parent a4dedf9
commit 621c6de
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/apps/mobile/app/(app)/_layout.tsx b/apps/mobile/app/(app)/_layout.tsx
@@ -80,14 +80,14 @@ export default function AuthenticatedLayout() {
       <Stack.Screen
         name="wallet/new-account"
         options={{
-          // presentation: 'modal',
+          presentation: 'modal',
           headerTitle: t(i18n)`New account`
         }}
       />
       <Stack.Screen
         name="wallet/[walletId]"
         options={{
-          // presentation: 'modal',
+          presentation: 'modal',
           headerTitle: t(i18n)`Edit account`
         }}
       />

diff --git a/apps/mobile/components/wallet/select-account-icon-field.tsx b/apps/mobile/components/wallet/select-account-icon-field.tsx
@@ -4,6 +4,7 @@ import { useRef } from 'react'
 import { WALLET_ICONS } from '@/lib/icons/wallet-icons'
 import { useController } from 'react-hook-form'
 import { Keyboard } from 'react-native'
+import { FullWindowOverlay } from 'react-native-screens'
 import GenericIcon from '../common/generic-icon'
 import { IconGridSheet } from '../common/icon-grid-sheet'
 import { Button } from '../ui/button'
@@ -45,15 +46,16 @@ export function SelectAccountIconField({
             enableTouchThrough
           />
         )}
+        containerComponent={(props) => <FullWindowOverlay>{props.children}</FullWindowOverlay>}
       >
         <IconGridSheet
           icons={WALLET_ICONS}
           value={value}
           onSelect={(icon) => {
             onChange(icon)
-            sheetRef.current?.close()
             onBlur()
             onSelect?.(icon)
+            setTimeout(() => sheetRef.current?.close(), 200)
           }}
         />
       </BottomSheetModal>

diff --git a/apps/mobile/components/wallet/select-currency-field.tsx b/apps/mobile/components/wallet/select-currency-field.tsx
@@ -3,6 +3,7 @@ import { useRef } from 'react'
 
 import { useController } from 'react-hook-form'
 import { Keyboard } from 'react-native'
+import { FullWindowOverlay } from 'react-native-screens'
 import { CurrencySheetList } from '../common/currency-sheet'
 import { Button } from '../ui/button'
 import { Text } from '../ui/text'
@@ -44,14 +45,15 @@ export function SelectCurrencyField({
             enableTouchThrough
           />
         )}
+        containerComponent={(props) => <FullWindowOverlay>{props.children}</FullWindowOverlay>}
       >
         <CurrencySheetList
           value={value}
           onSelect={(currency) => {
             onChange(currency.code)
-            sheetRef.current?.close()
             onBlur()
             onSelect?.(currency.code)
+            setTimeout(() => sheetRef.current?.close(), 200)
           }}
         />
       </BottomSheetModal>