diff --git a/src/components/BottomSheet.tsx b/src/components/BottomSheet.tsx
index ea32bf25a49..c81efe91c85 100644
--- a/src/components/BottomSheet.tsx
+++ b/src/components/BottomSheet.tsx
@@ -1,6 +1,7 @@
 import GorhomBottomSheet from '@gorhom/bottom-sheet'
 import React, { useRef } from 'react'
-import { ScrollView, StyleSheet, Text, TextStyle, View } from 'react-native'
+import { StyleSheet, Text, TextStyle, View } from 'react-native'
+import { ScrollView } from 'react-native-gesture-handler'
 import BottomSheetBase from 'src/components/BottomSheetBase'
 import BottomSheetScrollView from 'src/components/BottomSheetScrollView'
 import fontStyles from 'src/styles/fonts'
diff --git a/src/components/BottomSheetScrollView.tsx b/src/components/BottomSheetScrollView.tsx
index 00a295a9427..2968f85d367 100644
--- a/src/components/BottomSheetScrollView.tsx
+++ b/src/components/BottomSheetScrollView.tsx
@@ -1,27 +1,50 @@
 import { BottomSheetScrollView as GorhomBottomSheetScrollView } from '@gorhom/bottom-sheet'
 import React, { useState } from 'react'
-import { LayoutChangeEvent, ScrollView, StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+import { LayoutChangeEvent, StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+import { ScrollView } from 'react-native-gesture-handler'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Spacing } from 'src/styles/styles'
+import variables from 'src/styles/variables'
 
 interface Props {
   containerStyle?: StyleProp<ViewStyle>
   testId?: string
   forwardedRef?: React.RefObject<ScrollView>
+  isScreen?: boolean // should be set to true if using this component directly from a component that is registered as a native bottom sheet screen on the navigator
   children: React.ReactNode
 }
 
-function BottomSheetScrollView({ forwardedRef, containerStyle, testId, children }: Props) {
+function BottomSheetScrollView({
+  forwardedRef,
+  containerStyle,
+  testId,
+  isScreen,
+  children,
+}: Props) {
   const [containerHeight, setContainerHeight] = useState(0)
   const [contentHeight, setContentHeight] = useState(0)
 
   const insets = useSafeAreaInsets()
   const scrollEnabled = contentHeight > containerHeight
 
+  // the BottomSheetScrollView component from @gorhom/bottom-sheet does not
+  // scroll correctly when it is the root component of a native bottom sheet on
+  // the navigator (i.e. a bottom sheet screen). This is a workaround to enable
+  // scrolling using a ScrollView from react-native-safe-area-context when the
+  // content is large enough to require scrolling. The downside of using this
+  // ScrollView is the bottom sheet gestures are not enabled (so you cannot
+  // overscroll to dismiss)
+  const ScrollViewComponent = isScreen ? ScrollView : GorhomBottomSheetScrollView
+  // use max height simulate max 90% snap point for screens. when bottom sheets
+  // take up the whole screen, it is no longer obvious that they are a bottom
+  // sheet / how to navigate away
+  const maxHeight = isScreen ? variables.height * 0.9 : undefined
+
   return (
-    <GorhomBottomSheetScrollView
+    <ScrollViewComponent
       ref={forwardedRef}
       scrollEnabled={scrollEnabled}
+      style={{ maxHeight }}
       onLayout={(event: LayoutChangeEvent) => {
         setContainerHeight(event.nativeEvent.layout.height)
       }}
@@ -40,7 +63,7 @@ function BottomSheetScrollView({ forwardedRef, containerStyle, testId, children
       >
         {children}
       </View>
-    </GorhomBottomSheetScrollView>
+    </ScrollViewComponent>
   )
 }
 
diff --git a/src/dappkit/DappKitAccountScreen.tsx b/src/dappkit/DappKitAccountScreen.tsx
index 271239c87b3..25fb417cbf3 100644
--- a/src/dappkit/DappKitAccountScreen.tsx
+++ b/src/dappkit/DappKitAccountScreen.tsx
@@ -55,7 +55,7 @@ const DappKitAccountScreen = ({ route }: Props) => {
   }
 
   return (
-    <BottomSheetScrollView>
+    <BottomSheetScrollView isScreen>
       <RequestContent
         type="confirm"
         onAccept={handleAllow}
diff --git a/src/dappkit/DappKitSignTxScreen.tsx b/src/dappkit/DappKitSignTxScreen.tsx
index 8c8ba74b3ca..2a825741bde 100644
--- a/src/dappkit/DappKitSignTxScreen.tsx
+++ b/src/dappkit/DappKitSignTxScreen.tsx
@@ -72,7 +72,7 @@ const DappKitSignTxScreen = ({ route }: Props) => {
   }
 
   return (
-    <BottomSheetScrollView>
+    <BottomSheetScrollView isScreen>
       <RequestContent
         type="confirm"
         onAccept={handleAllow}
diff --git a/src/dapps/DappShortcutTransactionRequest.tsx b/src/dapps/DappShortcutTransactionRequest.tsx
index 2984b56381f..e5469118f42 100644
--- a/src/dapps/DappShortcutTransactionRequest.tsx
+++ b/src/dapps/DappShortcutTransactionRequest.tsx
@@ -77,7 +77,7 @@ function DappShortcutTransactionRequest({ route: { params } }: Props) {
   }
 
   return (
-    <BottomSheetScrollView>
+    <BottomSheetScrollView isScreen>
       {pendingAcceptShortcut?.transactions?.length ? (
         <RequestContent
           type="confirm"
diff --git a/src/fiatExchanges/FiatExchangeCurrencyBottomSheet.tsx b/src/fiatExchanges/FiatExchangeCurrencyBottomSheet.tsx
index d43e91bd4f3..86ac3f1f639 100644
--- a/src/fiatExchanges/FiatExchangeCurrencyBottomSheet.tsx
+++ b/src/fiatExchanges/FiatExchangeCurrencyBottomSheet.tsx
@@ -58,7 +58,7 @@ function FiatExchangeCurrencyBottomSheet({ route }: Props) {
     }
 
   return (
-    <BottomSheetScrollView containerStyle={{ padding: undefined }}>
+    <BottomSheetScrollView isScreen containerStyle={{ padding: undefined }}>
       {/* padding undefined to prevent android ripple bug */}
       <Text style={styles.selectDigitalCurrency}>{t('sendEnterAmountScreen.selectToken')}</Text>
       {tokenList.length &&
diff --git a/src/navigator/Navigator.tsx b/src/navigator/Navigator.tsx
index 2634be4c66a..637c5bc565a 100644
--- a/src/navigator/Navigator.tsx
+++ b/src/navigator/Navigator.tsx
@@ -653,6 +653,11 @@ const mainScreenNavOptions = () => ({
 })
 
 function nativeBottomSheets(BottomSheet: typeof RootStack) {
+  // Note: scrolling views inside bottom sheet screens should use the relevant
+  // components from react-native-gesture-handler instead of directly from
+  // react-native
+  // https://github.com/osdnk/react-native-reanimated-bottom-sheet/issues/264#issuecomment-674757545
+
   return (
     <>
       <BottomSheet.Screen name={Screens.WalletConnectRequest} component={WalletConnectRequest} />
@@ -698,10 +703,6 @@ function RootStackScreen() {
     []
   )
 
-  // Note: scrolling views inside bottom sheet screens should use the relevant
-  // components from react-native-gesture-handler instead of directly from
-  // react-native
-  // https://github.com/osdnk/react-native-reanimated-bottom-sheet/issues/264#issuecomment-674757545
   return (
     <RootStack.Navigator
       screenOptions={{
diff --git a/src/walletConnect/screens/WalletConnectRequest.tsx b/src/walletConnect/screens/WalletConnectRequest.tsx
index e44f5cdd414..97add8b67d8 100644
--- a/src/walletConnect/screens/WalletConnectRequest.tsx
+++ b/src/walletConnect/screens/WalletConnectRequest.tsx
@@ -21,6 +21,7 @@ function WalletConnectRequest({ route: { params } }: Props) {
 
   return (
     <BottomSheetScrollView
+      isScreen
       containerStyle={
         params.type === WalletConnectRequestType.Loading ||
         params.type === WalletConnectRequestType.TimeOut