Skip to content

Commit 662b5de

Browse files
jeanregisserrenovate[bot]
jeanregisser
and
renovate[bot]
authored
chore: update @th3rdwave/react-navigation-bottom-sheet (#5930)
### Description Update `@th3rdwave/react-navigation-bottom-sheet` to the latest version and simplify some usage. It was updated to work with the latest version of `gorhom/react-native-bottom-sheet` with dynamic sizing. See https://github.com/th3rdwave/react-navigation-bottom-sheet/releases/tag/v0.3.0 I looked at the previous changes where we added workarounds for screen usage: - #5062 - #5485 These aren't needed anymore, but there's a very small patch needed again. I'll contribute it upstream. However, bonus is we now get scroll down to dismiss for bottom sheet screens! ### Test plan - Tests pass - Manually checked bottom sheets display with the correct size on both iOS and Android. And behave as expected (scroll to dismiss, etc) - Hopefully I haven't missed any special case 👀 ### Related issues N/A ### Backwards compatibility Yes ### Network scalability If a new NetworkId and/or Network are added in the future, the changes in this PR will: - [x] Continue to work without code changes, OR trigger a compilation error (guaranteeing we find it when a new network is added) --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
1 parent 59aa2ca commit 662b5de

File tree

8 files changed

+76
-76
lines changed

8 files changed

+76
-76
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106
"@segment/analytics-react-native-plugin-firebase": "^0.4.2",
107107
"@segment/sovran-react-native": "^1.1.2",
108108
"@sentry/react-native": "^5.31.1",
109-
"@th3rdwave/react-navigation-bottom-sheet": "^0.2.7",
109+
"@th3rdwave/react-navigation-bottom-sheet": "^0.3.2",
110110
"@toruslabs/constants": "^14.0.0",
111111
"@toruslabs/fetch-node-details": "^14.0.1",
112112
"@toruslabs/torus.js": "^15.0.4",

‎patches/@th3rdwave+react-navigation-bottom-sheet+0.3.2.patch

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
diff --git a/node_modules/@th3rdwave/react-navigation-bottom-sheet/src/BottomSheetView.tsx b/node_modules/@th3rdwave/react-navigation-bottom-sheet/src/BottomSheetView.tsx
2+
index cc6f6c9..a92150a 100644
3+
--- a/node_modules/@th3rdwave/react-navigation-bottom-sheet/src/BottomSheetView.tsx
4+
+++ b/node_modules/@th3rdwave/react-navigation-bottom-sheet/src/BottomSheetView.tsx
5+
@@ -1,8 +1,7 @@
6+
import {
7+
BottomSheetModal,
8+
BottomSheetModalProps,
9+
- BottomSheetModalProvider,
10+
- BottomSheetView as RNBottomSheetView,
11+
+ BottomSheetModalProvider
12+
} from '@gorhom/bottom-sheet';
13+
import { ParamListBase, useTheme } from '@react-navigation/native';
14+
import * as React from 'react';
15+
@@ -90,11 +89,13 @@ function BottomSheetModalScreen({
16+
onDismiss={onDismiss}
17+
{...props}
18+
>
19+
- {enableDynamicSizing ? (
20+
- <RNBottomSheetView>{children as React.ReactNode}</RNBottomSheetView>
21+
- ) : (
22+
- children
23+
- )}
24+
+ {/**
25+
+ * Patch which makes sure children is not wrapped by BottomSheetView
26+
+ * when enableDynamicSizing is enabled, so we can use Gorhom components
27+
+ * like BottomSheetScrollView in the screen.
28+
+ * Otherwise it renders blank (conflicting with the dynamic sizing logic).
29+
+ */}
30+
+ {children}
31+
</BottomSheetModal>
32+
);
33+
}

‎src/components/BottomSheetScrollView.tsx

Lines changed: 3 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,47 +4,25 @@ import { LayoutChangeEvent, StyleProp, StyleSheet, View, ViewStyle } from 'react
44
import { ScrollView } from 'react-native-gesture-handler'
55
import { useSafeAreaInsets } from 'react-native-safe-area-context'
66
import { Spacing } from 'src/styles/styles'
7-
import variables from 'src/styles/variables'
87

98
interface Props {
109
containerStyle?: StyleProp<ViewStyle>
1110
testId?: string
1211
forwardedRef?: React.RefObject<ScrollView>
13-
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
1412
children: React.ReactNode
1513
}
1614

17-
function BottomSheetScrollView({
18-
forwardedRef,
19-
containerStyle,
20-
testId,
21-
isScreen,
22-
children,
23-
}: Props) {
15+
function BottomSheetScrollView({ forwardedRef, containerStyle, testId, children }: Props) {
2416
const [containerHeight, setContainerHeight] = useState(0)
2517
const [contentHeight, setContentHeight] = useState(0)
2618

2719
const insets = useSafeAreaInsets()
2820
const scrollEnabled = contentHeight > containerHeight
2921

30-
// the BottomSheetScrollView component from @gorhom/bottom-sheet does not
31-
// scroll correctly when it is the root component of a native bottom sheet on
32-
// the navigator (i.e. a bottom sheet screen). This is a workaround to enable
33-
// scrolling using a ScrollView from react-native-safe-area-context when the
34-
// content is large enough to require scrolling. The downside of using this
35-
// ScrollView is the bottom sheet gestures are not enabled (so you cannot
36-
// overscroll to dismiss)
37-
const ScrollViewComponent = isScreen ? ScrollView : GorhomBottomSheetScrollView
38-
// use max height simulate max 90% snap point for screens. when bottom sheets
39-
// take up the whole screen, it is no longer obvious that they are a bottom
40-
// sheet / how to navigate away
41-
const maxHeight = isScreen ? variables.height * 0.9 : undefined
42-
4322
return (
44-
<ScrollViewComponent
23+
<GorhomBottomSheetScrollView
4524
ref={forwardedRef}
4625
scrollEnabled={scrollEnabled}
47-
style={{ maxHeight }}
4826
onLayout={(event: LayoutChangeEvent) => {
4927
setContainerHeight(event.nativeEvent.layout.height)
5028
}}
@@ -63,7 +41,7 @@ function BottomSheetScrollView({
6341
>
6442
{children}
6543
</View>
66-
</ScrollViewComponent>
44+
</GorhomBottomSheetScrollView>
6745
)
6846
}
6947

‎src/components/TokenBottomSheet.tsx

Lines changed: 25 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import { BottomSheetFlatList, BottomSheetFlatListMethods } from '@gorhom/bottom-sheet'
2-
import { BottomSheetFlatListProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetScrollable/types'
32
import { debounce } from 'lodash'
43
import React, { RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react'
54
import { useTranslation } from 'react-i18next'
6-
import { FlatListProps, StyleSheet, Text, TextStyle, View } from 'react-native'
7-
import { FlatList, ScrollView } from 'react-native-gesture-handler'
5+
import { StyleSheet, Text, TextStyle, View } from 'react-native'
6+
import { ScrollView } from 'react-native-gesture-handler'
87
import { useSafeAreaInsets } from 'react-native-safe-area-context'
9-
import { TokenBottomSheetEvents } from 'src/analytics/Events'
108
import AppAnalytics from 'src/analytics/AppAnalytics'
9+
import { TokenBottomSheetEvents } from 'src/analytics/Events'
1110
import { BottomSheetRefType } from 'src/components/BottomSheet'
1211
import BottomSheetBase from 'src/components/BottomSheetBase'
1312
import FilterChipsCarousel, {
@@ -23,7 +22,6 @@ import { NETWORK_NAMES } from 'src/shared/conts'
2322
import colors, { Colors } from 'src/styles/colors'
2423
import { typeScale } from 'src/styles/fonts'
2524
import { Spacing } from 'src/styles/styles'
26-
import variables from 'src/styles/variables'
2725
import { TokenBalanceItem } from 'src/tokens/TokenBalanceItem'
2826
import { TokenBalance } from 'src/tokens/slice'
2927
import { NetworkId } from 'src/transactions/types'
@@ -127,9 +125,7 @@ function TokenBottomSheet({
127125
const insets = useSafeAreaInsets()
128126

129127
const filterChipsCarouselRef = useRef<ScrollView>(null)
130-
const tokenListBottomSheetFlatListRef = useRef<BottomSheetFlatListMethods>(null)
131-
const tokenListFlatListRef = useRef<FlatList>(null)
132-
const tokenListRef = isScreen ? tokenListFlatListRef : tokenListBottomSheetFlatListRef
128+
const tokenListRef = useRef<BottomSheetFlatListMethods>(null)
133129
const [headerHeight, setHeaderHeight] = useState(0)
134130
const [searchTerm, setSearchTerm] = useState('')
135131
const [filters, setFilters] = useState(filterChips)
@@ -253,15 +249,6 @@ function TokenBottomSheet({
253249
setHeaderHeight(event.nativeEvent.layout.height)
254250
}
255251

256-
// same issue as BottomSheetScrollView, BottomSheetFlatList does not scroll
257-
// correctly when used in a screen. See comment in
258-
// src/components/BottomSheetScrollView for more details
259-
const FlatListComponent = isScreen
260-
? (props: FlatListProps<TokenBalance>) => <FlatList ref={tokenListFlatListRef} {...props} />
261-
: (props: BottomSheetFlatListProps<TokenBalance>) => (
262-
<BottomSheetFlatList ref={tokenListBottomSheetFlatListRef} {...props} />
263-
)
264-
265252
// This component implements a sticky header using an absolutely positioned
266253
// component on top of a blank container of the same height in the
267254
// ListHeaderComponent of the Flatlist. Unfortunately the out of the box
@@ -270,11 +257,21 @@ function TokenBottomSheet({
270257
// that the header would be stuck to the wrong position between sheet reopens.
271258
// See https://valora-app.slack.com/archives/C04B61SJ6DS/p1707757919681089
272259
const content = (
273-
<>
274-
<FlatListComponent
260+
// Note: ideally we wouldn't need this wrapper view,
261+
// it's here for testing purposes with the testID
262+
// wrapping both the FlatList and the sticky header
263+
// TODO: check if we can remove this wrapper view now that dynamic sizing seems more robust
264+
<View style={styles.container} testID="TokenBottomSheet">
265+
<BottomSheetFlatList
266+
ref={tokenListRef}
275267
data={tokenList}
276268
keyExtractor={(item) => item.tokenId}
277-
contentContainerStyle={{ paddingBottom: insets.bottom }}
269+
contentContainerStyle={{
270+
paddingBottom: insets.bottom,
271+
// fill full height if there are filter chips, otherwise the bottom
272+
// sheet height changes as tokens are filtered
273+
flexGrow: filterChips.length ? 1 : undefined,
274+
}}
278275
scrollIndicatorInsets={{ top: headerHeight }}
279276
renderItem={({ item, index }) => {
280277
return (
@@ -325,25 +322,18 @@ function TokenBottomSheet({
325322
/>
326323
)}
327324
</View>
328-
</>
325+
</View>
329326
)
330327

331328
return (
332329
<>
333330
{isScreen ? (
334-
<View
335-
// use fixed height if there are filter chips, otherwise the bottom
336-
// sheet height changes as tokens as filtered
337-
style={filterChips.length ? styles.screenContainerFixed : styles.screenContainer}
338-
testID="TokenBottomSheet"
339-
>
340-
{content}
341-
</View>
331+
// Don't wrap the content in a BottomSheetBase when used as a screen
332+
// since the bottom sheet navigator already provides the necessary wrapping
333+
content
342334
) : (
343335
<BottomSheetBase forwardedRef={forwardedRef} snapPoints={snapPoints}>
344-
<View style={styles.container} testID="TokenBottomSheet">
345-
{content}
346-
</View>
336+
{content}
347337
</BottomSheetBase>
348338
)}
349339
{networkChip && (
@@ -367,15 +357,12 @@ function TokenBottomSheet({
367357
TokenBottomSheet.navigationOptions = {}
368358

369359
const styles = StyleSheet.create({
360+
// Important: care must be taken when changing the styles of the container
361+
// It could most likely break the dynamic sizing of the bottom sheet
362+
// so avoid adding padding/margin to it, or min/max height
370363
container: {
371364
flex: 1,
372365
},
373-
screenContainer: {
374-
maxHeight: variables.height * 0.9,
375-
},
376-
screenContainerFixed: {
377-
height: variables.height * 0.9,
378-
},
379366
searchInput: {
380367
marginTop: Spacing.Regular16,
381368
},

‎src/dapps/DappShortcutTransactionRequest.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ function DappShortcutTransactionRequest({ route: { params } }: Props) {
6969
const { rewardId } = params
7070

7171
return (
72-
<BottomSheetScrollView isScreen>
72+
<BottomSheetScrollView>
7373
<Content rewardId={rewardId} />
7474
</BottomSheetScrollView>
7575
)

‎src/navigator/Navigator.tsx

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ import SplashScreen from 'react-native-splash-screen'
1010
import AccountKeyEducation from 'src/account/AccountKeyEducation'
1111
import AccounSetupFailureScreen from 'src/account/AccountSetupFailureScreen'
1212
import GoldEducation from 'src/account/GoldEducation'
13+
import LegalSubmenu from 'src/account/LegalSubmenu'
1314
import Licenses from 'src/account/Licenses'
15+
import PreferencesSubmenu from 'src/account/PreferencesSubmenu'
1416
import Profile from 'src/account/Profile'
1517
import ProfileSubmenu from 'src/account/ProfileSubmenu'
16-
import LegalSubmenu from 'src/account/LegalSubmenu'
17-
import PreferencesSubmenu from 'src/account/PreferencesSubmenu'
1818
import SecuritySubmenu from 'src/account/SecuritySubmenu'
1919
import StoreWipeRecoveryScreen from 'src/account/StoreWipeRecoveryScreen'
2020
import Support from 'src/account/Support'
@@ -83,9 +83,9 @@ import {
8383
noHeader,
8484
nuxNavigationOptions,
8585
} from 'src/navigator/Headers'
86-
import SettingsMenu from 'src/navigator/SettingsMenu'
8786
import QRNavigator from 'src/navigator/QRNavigator'
8887
import { Screens } from 'src/navigator/Screens'
88+
import SettingsMenu from 'src/navigator/SettingsMenu'
8989
import TabNavigator from 'src/navigator/TabNavigator'
9090
import { getInitialRoute } from 'src/navigator/initialRoute'
9191
import { StackParamList } from 'src/navigator/types'
@@ -114,6 +114,7 @@ import ValidateRecipientAccount, {
114114
import ValidateRecipientIntro, {
115115
validateRecipientIntroScreenNavOptions,
116116
} from 'src/send/ValidateRecipientIntro'
117+
import variables from 'src/styles/variables'
117118
import SwapScreen from 'src/swap/SwapScreen'
118119
import TokenDetailsScreen from 'src/tokens/TokenDetails'
119120
import TokenImportScreen from 'src/tokens/TokenImport'
@@ -713,9 +714,8 @@ const mainScreenNavOptions = () => ({
713714

714715
function nativeBottomSheets(BottomSheet: typeof RootStack) {
715716
// Note: scrolling views inside bottom sheet screens should use the relevant
716-
// components from react-native-gesture-handler instead of directly from
717+
// components from gorhom/react-native-bottom-sheet instead of directly from
717718
// react-native
718-
// https://github.com/osdnk/react-native-reanimated-bottom-sheet/issues/264#issuecomment-674757545
719719

720720
return (
721721
<>
@@ -765,7 +765,10 @@ function RootStackScreen() {
765765
screenOptions={{
766766
backdropComponent: renderBackdrop,
767767
enableDynamicSizing: true,
768-
snapPoints: ['CONTENT_HEIGHT'], // prevent bottom sheets from having an extra snap point at the default of 66%
768+
// use max height (similar as 90% snap point) for screens. when bottom sheets
769+
// take up the whole screen, it is no longer obvious that they are a bottom
770+
// sheet / how to navigate away
771+
maxDynamicContentSize: variables.height * 0.9,
769772
}}
770773
>
771774
<RootStack.Screen name={Screens.MainModal} component={ModalStackScreen} />

‎src/walletConnect/screens/WalletConnectRequest.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ function WalletConnectRequest({ route: { params } }: Props) {
2121

2222
return (
2323
<BottomSheetScrollView
24-
isScreen
2524
containerStyle={
2625
params.type === WalletConnectRequestType.Loading ||
2726
params.type === WalletConnectRequestType.TimeOut

‎yarn.lock

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4312,10 +4312,10 @@
43124312
pretty-format "^29.7.0"
43134313
redent "^3.0.0"
43144314

4315-
"@th3rdwave/react-navigation-bottom-sheet@^0.2.7":
4316-
version "0.2.7"
4317-
resolved "https://registry.yarnpkg.com/@th3rdwave/react-navigation-bottom-sheet/-/react-navigation-bottom-sheet-0.2.7.tgz#c9a0d1a270c5d5d275769fc4cccb8cebe25f22f8"
4318-
integrity sha512-tO6W7RJTQVWJb/Q4aD3mokmilKFCU//g5YCvh1Al7fveMGLZDTaZGwte/ReuRm5Wl5oKIYd6IURruCE1G8/n9A==
4315+
"@th3rdwave/react-navigation-bottom-sheet@^0.3.2":
4316+
version "0.3.2"
4317+
resolved "https://registry.yarnpkg.com/@th3rdwave/react-navigation-bottom-sheet/-/react-navigation-bottom-sheet-0.3.2.tgz#b7999322d54cb8f9a2b1b39e6c47f482407c5250"
4318+
integrity sha512-DEqC9tlAWE8qw5DDveyTwG0qjMJH3h8nup5Qi3TBlfW8hG9qx0N1/dfA1D+GKFEb4gw1C2/AWC6umc13z7ytoQ==
43194319

43204320
"@toruslabs/bs58@^1.0.0":
43214321
version "1.0.0"

0 commit comments

Comments
 (0)