fix: ensure screens that are bottom sheets scroll correctly

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'

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
   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
 
+  // Note: scrolling views inside bottom sheet screens should use the relevant
+  // components from react-native-gesture-handler instead of directly from
+  // react-native, otherwise they do not scroll correctly. This isScreen prop
+  // should be set to true if the bottom sheet is registered as screen in the
+  // Navigator. It is still handy for screens and components to share this
+  // component for the styling and layout logic.
+  // https://github.com/osdnk/react-native-reanimated-bottom-sheet/issues/264#issuecomment-674757545
+  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>
   )
 }
 

src/dappkit/DappKitAccountScreen.tsx

@@ -55,7 +55,7 @@ const DappKitAccountScreen = ({ route }: Props) => {
   }
 
   return (
-    <BottomSheetScrollView>
+    <BottomSheetScrollView isScreen>
       <RequestContent
         type="confirm"
         onAccept={handleAllow}

src/dappkit/DappKitSignTxScreen.tsx

@@ -72,7 +72,7 @@ const DappKitSignTxScreen = ({ route }: Props) => {
   }
 
   return (
-    <BottomSheetScrollView>
+    <BottomSheetScrollView isScreen>
       <RequestContent
         type="confirm"
         onAccept={handleAllow}

src/dapps/DappShortcutTransactionRequest.tsx

@@ -77,7 +77,7 @@ function DappShortcutTransactionRequest({ route: { params } }: Props) {
   }
 
   return (
-    <BottomSheetScrollView>
+    <BottomSheetScrollView isScreen>
       {pendingAcceptShortcut?.transactions?.length ? (
         <RequestContent
           type="confirm"

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 &&

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={{

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