chore: upgrade bottom-sheet dependency

pwltr · pwltr · commit 832a06dd254e · 2025-01-01T18:14:25.000+01:00
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -1719,7 +1719,7 @@ PODS:
     - React-Core
   - RNFS (2.20.0):
     - React-Core
-  - RNGestureHandler (2.15.0):
+  - RNGestureHandler (2.21.2):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1777,7 +1777,7 @@ PODS:
     - React
   - RNReactNativeHapticFeedback (2.2.0):
     - React-Core
-  - RNReanimated (3.15.0):
+  - RNReanimated (3.16.5):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1797,10 +1797,10 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNReanimated/reanimated (= 3.15.0)
-    - RNReanimated/worklets (= 3.15.0)
+    - RNReanimated/reanimated (= 3.16.5)
+    - RNReanimated/worklets (= 3.16.5)
     - Yoga
-  - RNReanimated/reanimated (3.15.0):
+  - RNReanimated/reanimated (3.16.5):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1820,8 +1820,30 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
+    - RNReanimated/reanimated/apple (= 3.16.5)
     - Yoga
-  - RNReanimated/worklets (3.15.0):
+  - RNReanimated/reanimated/apple (3.16.5):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - RNReanimated/worklets (3.16.5):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2292,15 +2314,15 @@ SPEC CHECKSUMS:
   RNCClipboard: 0a720adef5ec193aa0e3de24c3977222c7e52a37
   RNDeviceInfo: b899ce37a403a4dea52b7cb85e16e49c04a5b88e
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
-  RNGestureHandler: e80cae4246813ee7f667a2552012a6b7da5550a1
+  RNGestureHandler: aa9690789023c9be8f06aa90e10ce637ea788f4d
   RNKeychain: 4cfd0dc8634c2dd81a4607c8299ed424bfdee1a7
   RNLocalize: dbea38dcb344bf80ff18a1757b1becf11f70cae4
   RNNotifee: 8e2d3df3f0e9ce8f5d1fe4c967431138190b6175
   RNPermissions: 2c0eec471f4de66d04d226c339898d10a6e123c4
   RNQrGenerator: 1676221c08bfabec978242989c733810dad20959
   RNQuickAction: 6d404a869dc872cde841ad3147416a670d13fa93
   RNReactNativeHapticFeedback: ec56a5f81c3941206fd85625fa669ffc7b4545f9
-  RNReanimated: 74413c59c47123d7144db601d065627c75c746a3
+  RNReanimated: db4cd0009bf6f07da10d9e3a917f1abe29be6d9b
   RNScreens: b03d696c70cc5235ce4587fcc27ae1a93a48f98c
   RNShare: 554a91f5cfbe4adac4cfe3654826ee8b299fe365
   RNSVG: 43b64ed39c14ce830d840903774154ca0c1f27ec
diff --git a/ios/bitkit.xcodeproj/project.pbxproj b/ios/bitkit.xcodeproj/project.pbxproj
diff --git a/metro.config.js b/metro.config.js
@@ -1,6 +1,9 @@
 const path = require('path');
 const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
 const exclusionList = require('metro-config/src/defaults/exclusionList');
+const {
+	wrapWithReanimatedMetroConfig,
+} = require('react-native-reanimated/metro-config');
 
 const defaultConfig = getDefaultConfig(__dirname);
 const { assetExts, sourceExts } = defaultConfig.resolver;
@@ -35,4 +38,6 @@ const config = {
 	},
 };
 
-module.exports = mergeConfig(defaultConfig, config);
+const mergedConfig = mergeConfig(defaultConfig, config);
+
+module.exports = wrapWithReanimatedMetroConfig(mergedConfig);
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
     "@formatjs/intl-numberformat": "8.10.1",
     "@formatjs/intl-pluralrules": "5.2.12",
     "@formatjs/intl-relativetimeformat": "11.2.12",
-    "@gorhom/bottom-sheet": "4.6.3",
+    "@gorhom/bottom-sheet": "5.0.6",
     "@notifee/react-native": "7.8.2",
     "@react-native-clipboard/clipboard": "1.14.1",
     "@react-native-community/blur": "4.4.0",
@@ -86,7 +86,7 @@
     "react-native-draggable-flatlist": "4.0.1",
     "react-native-fetch-api": "3.0.0",
     "react-native-fs": "2.20.0",
-    "react-native-gesture-handler": "2.15.0",
+    "react-native-gesture-handler": "2.21.2",
     "react-native-haptic-feedback": "2.2.0",
     "react-native-image-picker": "7.1.2",
     "react-native-keyboard-accessory": "0.1.16",
@@ -101,7 +101,7 @@
     "react-native-quick-base64": "2.1.2",
     "react-native-quick-bip39": "0.0.9",
     "react-native-quick-crypto": "0.7.1",
-    "react-native-reanimated": "3.15.0",
+    "react-native-reanimated": "3.16.5",
     "react-native-reanimated-carousel": "3.5.1",
     "react-native-restart": "0.0.27",
     "react-native-safe-area-context": "5.0.0",
diff --git a/src/components/BottomSheetWrapper.tsx b/src/components/BottomSheetWrapper.tsx
@@ -169,9 +169,15 @@ const BottomSheetWrapper = forwardRef(
 				index={index}
 				snapPoints={snapPoints}
 				animateOnMount={!reducedMotion && !__E2E__}
+				enableDynamicSizing={false}
+				enableOverdrag={false}
 				enablePanDownToClose={true}
+				keyboardBehavior="extend"
+				// keyboardBehavior='fillParent'
 				keyboardBlurBehavior="restore"
+				// @ts-ignore
 				activeOffsetX={activeOffsetX}
+				// @ts-ignore
 				activeOffsetY={activeOffsetY}
 				onChange={handleSheetChanges}>
 				<BottomSheetView style={style} testID={testID}>
diff --git a/src/components/KeyboardSpacer.tsx b/src/components/KeyboardSpacer.tsx
@@ -0,0 +1,11 @@
+import React, { ReactElement } from 'react';
+import { ViewProps } from 'react-native';
+import Animated from 'react-native-reanimated';
+import useKeyboard from '../hooks/keyboard';
+
+const KeyboardSpacer = (props: ViewProps): ReactElement => {
+	const { keyboardHeight } = useKeyboard();
+	return <Animated.View style={{ height: keyboardHeight }} {...props} />;
+};
+
+export default KeyboardSpacer;
diff --git a/src/components/Suggestions.tsx b/src/components/Suggestions.tsx
@@ -189,6 +189,7 @@ const Suggestions = (): ReactElement => {
 					loop={false}
 					height={170}
 					width={167}
+					// @ts-ignore
 					panGestureHandlerProps={panGestureHandlerProps}
 					onSnapToItem={setIndex}
 					renderItem={handleRenderItem}
diff --git a/src/hooks/keyboard.ts b/src/hooks/keyboard.ts
@@ -9,6 +9,8 @@ const useKeyboard = (): {
 	const [keyboardShown, setKeyboardShown] = useState(false);
 	const [keyboardHeight, setKeyboardHeight] = useState(0);
 
+	console.log({ keyboardHeight });
+
 	useEffect(() => {
 		const keyboardWillShowListener = RNKeyboard.addListener(
 			// ios has keyboardWillShow, android doesn't
@@ -20,7 +22,10 @@ const useKeyboard = (): {
 		const keyboardDidShowListener = RNKeyboard.addListener(
 			'keyboardDidShow',
 			(event: KeyboardEvent) => {
-				setKeyboardHeight(event.endCoordinates.height);
+				const { height, screenY } = event.endCoordinates;
+				console.log({ height, screenY });
+				setKeyboardHeight(height);
+				// setKeyboardHeight(screenY - height);
 			},
 		);
 		const keyboardDidHideListener = RNKeyboard.addListener(
diff --git a/src/screens/Activity/ActivityTagsPrompt.tsx b/src/screens/Activity/ActivityTagsPrompt.tsx
@@ -102,7 +102,7 @@ const ActivityTagsPrompt = (): ReactElement => {
 								text={t('tags_add_button')}
 								size="large"
 								disabled={text.length === 0}
-								testID="ReceiveTagsSubmit"
+								testID="ActivityTagsSubmit"
 								onPress={handleSubmit}
 							/>
 						</View>
diff --git a/src/screens/Wallets/Receive/ReceiveDetails.tsx b/src/screens/Wallets/Receive/ReceiveDetails.tsx
@@ -34,6 +34,7 @@ import {
 	denominationSelector,
 	nextUnitSelector,
 } from '../../../store/reselect/settings';
+import KeyboardSpacer from '../../../components/KeyboardSpacer';
 
 const imageSrc = require('../../../assets/illustrations/coin-stack.png');
 
@@ -250,6 +251,7 @@ const ReceiveDetails = ({
 				)}
 			</View>
 			<SafeAreaInset type="bottom" minPadding={16} />
+			<KeyboardSpacer />
 		</GradientView>
 	);
 };
diff --git a/src/screens/Wallets/Receive/ReceiveQR.tsx b/src/screens/Wallets/Receive/ReceiveQR.tsx
@@ -652,10 +652,9 @@ const ReceiveQR = ({
 						<ActivityIndicator color="white" />
 					</View>
 				) : (
-					<View style={styles.carouselWrapper}>
+					<View style={{ height: qrMaxHeight + 64 }}>
 						<Carousel
 							ref={carouselRef}
-							style={styles.carousel}
 							data={slides}
 							width={dimensions.width}
 							height={qrMaxHeight + 64}
@@ -699,17 +698,15 @@ const styles = StyleSheet.create({
 	loading: {
 		justifyContent: 'center',
 	},
-	carouselWrapper: {
-		flex: 1,
-		alignItems: 'center',
-	},
-	carousel: {
-		alignItems: 'center',
-	},
 	slide: {
 		paddingHorizontal: 16,
 		alignItems: 'center',
 	},
+	dots: {
+		flexDirection: 'row',
+		alignSelf: 'center',
+		width: 27,
+	},
 	qrCode: {
 		borderRadius: 10,
 		position: 'relative',
@@ -756,13 +753,6 @@ const styles = StyleSheet.create({
 	divider: {
 		height: 32,
 	},
-	dots: {
-		flexDirection: 'row',
-		justifyContent: 'space-between',
-		alignSelf: 'center',
-		marginTop: 16,
-		width: 27,
-	},
 	tooltip: {
 		position: 'absolute',
 		top: 18,
diff --git a/src/screens/Wallets/Receive/Tags.tsx b/src/screens/Wallets/Receive/Tags.tsx
@@ -14,6 +14,7 @@ import { useAppDispatch, useAppSelector } from '../../../hooks/redux';
 import { lastUsedTagsSelector } from '../../../store/reselect/metadata';
 import { updateInvoice } from '../../../store/slices/receive';
 import { ReceiveScreenProps } from '../../../navigation/types';
+import KeyboardSpacer from '../../../components/KeyboardSpacer';
 
 const Tags = ({ navigation }: ReceiveScreenProps<'Tags'>): ReactElement => {
 	const { t } = useTranslation('wallet');
@@ -43,6 +44,7 @@ const Tags = ({ navigation }: ReceiveScreenProps<'Tags'>): ReactElement => {
 		<GradientView style={styles.container}>
 			<BottomSheetNavigationHeader title={t('tags_add')} />
 			<View style={styles.content}>
+				{/* <KeyboardAvoidingView style={styles.content}> */}
 				{lastUsedTags.length !== 0 && (
 					<>
 						<Caption13Up color="secondary" style={styles.section}>
@@ -85,8 +87,10 @@ const Tags = ({ navigation }: ReceiveScreenProps<'Tags'>): ReactElement => {
 						onPress={handleSubmit}
 					/>
 				</View>
+				<SafeAreaInset type="bottom" minPadding={16} />
+				<KeyboardSpacer />
+				{/* </KeyboardAvoidingView> */}
 			</View>
-			<SafeAreaInset type="bottom" minPadding={16} />
 		</GradientView>
 	);
 };
diff --git a/src/screens/Wallets/Send/Address.tsx b/src/screens/Wallets/Send/Address.tsx
@@ -15,6 +15,7 @@ import { processUri } from '../../../utils/scanner/scanner';
 import useColors from '../../../hooks/colors';
 import useKeyboard, { Keyboard } from '../../../hooks/keyboard';
 import type { SendScreenProps } from '../../../navigation/types';
+import KeyboardSpacer from '../../../components/KeyboardSpacer';
 
 type TValidation = {
 	[x: string]: boolean;
@@ -53,6 +54,8 @@ const Address = ({ route }: SendScreenProps<'Address'>): ReactElement => {
 	return (
 		<GradientView style={styles.container}>
 			<BottomSheetNavigationHeader title={t('send_bitcoin')} />
+
+			{/* <KeyboardAvoidingView style={styles.content}> */}
 			<View style={styles.content}>
 				<Caption13Up color="secondary" style={styles.label} testID="Caption">
 					{t('send_to')}
@@ -86,8 +89,10 @@ const Address = ({ route }: SendScreenProps<'Address'>): ReactElement => {
 						onPress={onContinue}
 					/>
 				</View>
+				<SafeAreaInset type="bottom" minPadding={16} />
+				<KeyboardSpacer />
+				{/* </KeyboardAvoidingView> */}
 			</View>
-			<SafeAreaInset type="bottom" minPadding={16} />
 		</GradientView>
 	);
 };
diff --git a/yarn.lock b/yarn.lock
