synonymdev · pwltr · Mar 6, 2025
diff --git a/patches/@gorhom+bottom-sheet+4.6.4.patch b/patches/@gorhom+bottom-sheet+4.6.4.patch
@@ -0,0 +1,32 @@
+diff --git a/node_modules/@gorhom/bottom-sheet/lib/typescript/types.d.ts b/node_modules/@gorhom/bottom-sheet/lib/typescript/types.d.ts
+index 27f39a1..74223d9 100644
+--- a/node_modules/@gorhom/bottom-sheet/lib/typescript/types.d.ts
++++ b/node_modules/@gorhom/bottom-sheet/lib/typescript/types.d.ts
+@@ -91,6 +91,14 @@ export interface BottomSheetModalMethods extends BottomSheetMethods {
+    * @see {WithTimingConfig}
+    */
+   dismiss: (animationConfigs?: WithSpringConfig | WithTimingConfig) => void;
++  /**
++   * Get the current index of the bottom sheet modal.
++   */
++  getCurrentIndex: () => number;
++  /**
++   * Check if the bottom sheet modal is open.
++   */
++  isOpen: boolean;
+ }
+ //#endregion
+
+diff --git a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetModal/BottomSheetModal.tsx b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetModal/BottomSheetModal.tsx
+index 275ce50..80cd2b8 100644
+--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetModal/BottomSheetModal.tsx
++++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetModal/BottomSheetModal.tsx
+@@ -363,6 +363,8 @@ const BottomSheetModalComponent = forwardRef<
+     // internal
+     minimize: handleMinimize,
+     restore: handleRestore,
++    getCurrentIndex: () => currentIndexRef.current,
++    isOpen: animateOnMount ? currentIndexRef.current !== -1 : false,
+   }));
+   //#endregion
+
diff --git a/src/App.tsx b/src/App.tsx
@@ -15,7 +15,6 @@ import { ThemeProvider } from 'styled-components/native';
 import './utils/i18n';
 import './utils/quick-actions';
 import AppOnboarded from './AppOnboarded';
-import { SlashtagsProvider } from './components/SlashtagsProvider';
 import { toastConfig } from './components/Toast';
 import { useAppSelector } from './hooks/redux';
 import AppUpdate from './screens/AppUpdate';
@@ -78,9 +77,7 @@ const App = (): ReactElement => {
 				) : hasCriticalUpdate ? (
 					<AppUpdate />
 				) : walletExists && !requiresRemoteRestore ? (
-					<SlashtagsProvider>
-						<AppOnboarded />
-					</SlashtagsProvider>
+					<AppOnboarded />
 				) : (
 					<Suspense fallback={null}>
 						<OnboardingNavigator />

diff --git a/src/AppOnboarded.tsx b/src/AppOnboarded.tsx
@@ -1,8 +1,12 @@
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 import React, { memo, ReactElement } from 'react';
+
 import InactivityTracker from './components/InactivityTracker';
+import { SlashtagsProvider } from './components/SlashtagsProvider';
 import { useAppStateHandler } from './hooks/useAppStateHandler';
 import { useNetworkConnectivity } from './hooks/useNetworkConnectivity';
 import { useWalletStartup } from './hooks/useWalletStartup';
+import { SheetRefsProvider } from './navigation/bottom-sheet/SheetRefsProvider';
 import DrawerNavigator from './navigation/root/DrawerNavigator';
 import RootNavigationContainer from './navigation/root/RootNavigationContainer';
 
@@ -12,11 +16,17 @@ const AppOnboarded = (): ReactElement => {
 	useNetworkConnectivity();
 
 	return (
-		<InactivityTracker>
-			<RootNavigationContainer>
-				<DrawerNavigator />
-			</RootNavigationContainer>
-		</InactivityTracker>
+		<SlashtagsProvider>
+			<SheetRefsProvider>
+				<InactivityTracker>
+					<RootNavigationContainer>
+						<BottomSheetModalProvider>
+							<DrawerNavigator />
+						</BottomSheetModalProvider>
+					</RootNavigationContainer>
+				</InactivityTracker>
+			</SheetRefsProvider>
+		</SlashtagsProvider>
 	);
 };
 

diff --git a/src/components/BottomSheetWrapper.tsx b/src/components/BottomSheetWrapper.tsx
@@ -1,188 +1,107 @@
-/***********************************************************************************
- * This component wraps the @gorhom/bottom-sheet library
- * to more easily take advantage of it throughout the app.
- *
- * Implementation:
- * const snapPoints = useSnapPoints('medium');
- *
- * <BottomSheetWrapper view="viewName" snapPoints={snapPoints}>
- *   <View>...</View>
- * </BottomSheetWrapper>
- *
- * Usage Throughout App:
- * dispatch(showBottomSheet('viewName'));
- * dispatch(showBottomSheet('viewName', { option1: 'value' }));
- * dispatch(closeSheet('viewName'));
- *
- * Check if a given view is open:
- * getStore().user.viewController['viewName'].isOpen;
- ***********************************************************************************/
-
-import BottomSheet, {
-	BottomSheetView,
+import {
 	BottomSheetBackdrop,
-	BottomSheetBackgroundProps,
 	BottomSheetBackdropProps,
+	BottomSheetBackgroundProps,
+	BottomSheetModal,
+	BottomSheetView,
 } from '@gorhom/bottom-sheet';
-import React, {
-	memo,
-	ReactElement,
-	forwardRef,
-	useImperativeHandle,
-	useRef,
-	useEffect,
-	useCallback,
-	useMemo,
-	useState,
-} from 'react';
+import React, { ReactNode, useCallback, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import { useReducedMotion } from 'react-native-reanimated';
-import { useTheme } from 'styled-components/native';
 
 import { __E2E__ } from '../constants/env';
-import { useAppDispatch, useAppSelector } from '../hooks/redux';
-import { viewControllerSelector } from '../store/reselect/ui';
+import useColors from '../hooks/colors';
+import { useAppDispatch } from '../hooks/redux';
+import {
+	SheetId,
+	useSheetRef,
+} from '../navigation/bottom-sheet/SheetRefsProvider';
 import { closeSheet } from '../store/slices/ui';
-import { TViewController } from '../store/types/ui';
 import BottomSheetBackground from './BottomSheetBackground';
 
-export interface BottomSheetWrapperProps {
-	children: ReactElement;
-	view: TViewController;
+type SheetProps = {
+	view: SheetId;
 	snapPoints: number[];
-	backdrop?: boolean;
+	children: ReactNode;
 	testID?: string;
 	onOpen?: () => void;
 	onClose?: () => void;
-}
-
-const BottomSheetWrapper = forwardRef(
-	(
-		{
-			children,
-			view,
-			snapPoints,
-			backdrop = true,
-			testID,
-			onOpen,
-			onClose,
-		}: BottomSheetWrapperProps,
-		ref,
-	): ReactElement => {
-		const bottomSheetRef = useRef<BottomSheet>(null);
-		const reducedMotion = useReducedMotion();
-		const dispatch = useAppDispatch();
-		const data = useAppSelector((state) => viewControllerSelector(state, view));
-		const theme = useTheme();
-		const handleIndicatorStyle = useMemo(
-			() => ({ backgroundColor: theme.colors.gray2 }),
-			[theme.colors.gray2],
+};
+
+const Sheet = ({
+	view,
+	snapPoints,
+	children,
+	testID,
+	onOpen,
+	onClose,
+}: SheetProps) => {
+	const colors = useColors();
+	const sheetRef = useSheetRef(view);
+	const isReducedMotion = useReducedMotion();
+	const dispatch = useAppDispatch();
+
+	// https://github.com/gorhom/react-native-bottom-sheet/issues/770#issuecomment-1072113936
+	// do not activate BottomSheet if swipe horizontally, this allows using Swiper inside of it
+	const activeOffsetX = useMemo(() => [-999, 999], []);
+	const activeOffsetY = useMemo(() => [-10, 10], []);
+
+	const backdropComponent = useCallback((props: BottomSheetBackdropProps) => {
+		return (
+			<BottomSheetBackdrop
+				{...props}
+				disappearsOnIndex={-1}
+				appearsOnIndex={0}
+				accessibilityLabel="Close"
+			/>
 		);
-		const [mounted, setMounted] = useState(false);
-
-		// https://github.com/gorhom/react-native-bottom-sheet/issues/770#issuecomment-1072113936
-		// do not activate BottomSheet if swipe horizontally, this allows using Swiper inside of it
-		const activeOffsetX = useMemo(() => [-999, 999], []);
-		const activeOffsetY = useMemo(() => [-10, 10], []);
-
-		useEffect(() => {
-			if (data.isOpen) {
-				bottomSheetRef.current?.snapToIndex(0);
-			} else {
-				bottomSheetRef.current?.close();
-			}
-			setTimeout(() => setMounted(true), 500);
-		}, [data.isOpen]);
-
-		useImperativeHandle(ref, () => ({
-			snapToIndex(index = 0): void {
-				bottomSheetRef.current?.snapToIndex(index);
-			},
-			expand(): void {
-				bottomSheetRef.current?.snapToIndex(1);
-			},
-			close(): void {
-				bottomSheetRef.current?.close();
-			},
-		}));
-
-		const _onOpen = useCallback(() => onOpen?.(), [onOpen]);
-
-		const _onClose = useCallback(() => {
-			if (data.isOpen) {
+	}, []);
+
+	const backgroundComponent = useCallback(
+		({ style }: BottomSheetBackgroundProps) => (
+			<BottomSheetBackground style={style} />
+		),
+		[],
+	);
+
+	const onChange = useCallback(
+		(index: number) => {
+			if (index === -1) {
+				onClose?.();
+				// reset sheet params
 				dispatch(closeSheet(view));
+			} else if (index >= 0) {
+				onOpen?.();
 			}
-			onClose?.();
-		}, [data.isOpen, view, onClose, dispatch]);
-
-		// callbacks
-		const handleSheetChanges = useCallback(
-			(index: number) => {
-				if (index === -1) {
-					_onClose();
-				} else if (index >= 0) {
-					_onOpen();
-				}
-			},
-			[_onClose, _onOpen],
-		);
-
-		const renderBackdrop = useCallback(
-			(props: BottomSheetBackdropProps) => {
-				if (!backdrop) {
-					return null;
-				}
-				return (
-					<BottomSheetBackdrop
-						{...props}
-						disappearsOnIndex={-1}
-						appearsOnIndex={0}
-						accessibilityLabel="Close"
-					/>
-				);
-			},
-			[backdrop],
-		);
-
-		const backgroundComponent = useCallback(
-			({ style }: BottomSheetBackgroundProps) => (
-				<BottomSheetBackground style={style} />
-			),
-			[],
-		);
-
-		const style = useMemo(
-			() => [styles.container, !mounted && { minHeight: snapPoints[0] - 30 }],
-			[snapPoints, mounted],
-		);
-
-		// Determine initial snapPoint index based on provided data.
-		const index = useMemo((): number => (data.isOpen ? 0 : -1), [data.isOpen]);
-
-		return (
-			<BottomSheet
-				ref={bottomSheetRef}
-				backgroundComponent={backgroundComponent}
-				backdropComponent={renderBackdrop}
-				handleIndicatorStyle={handleIndicatorStyle}
-				handleStyle={styles.handle}
-				index={index}
-				snapPoints={snapPoints}
-				animateOnMount={!reducedMotion && !__E2E__}
-				enablePanDownToClose={true}
-				keyboardBlurBehavior="restore"
-				// @ts-ignore
-				activeOffsetX={activeOffsetX}
-				// @ts-ignore
-				activeOffsetY={activeOffsetY}
-				onChange={handleSheetChanges}>
-				<BottomSheetView style={style} testID={testID}>
-					{children}
-				</BottomSheetView>
-			</BottomSheet>
-		);
-	},
-);
+		},
+		[onOpen, onClose, dispatch, view],
+	);
+
+	return (
+		<BottomSheetModal
+			name={view}
+			ref={sheetRef}
+			snapPoints={snapPoints}
+			handleStyle={styles.handle}
+			handleIndicatorStyle={{ backgroundColor: colors.gray2 }}
+			backdropComponent={backdropComponent}
+			backgroundComponent={backgroundComponent}
+			stackBehavior="push"
+			animateOnMount={!isReducedMotion && !__E2E__}
+			enablePanDownToClose={true}
+			keyboardBlurBehavior="restore"
+			// enableDismissOnClose={false}
+			// @ts-ignore
+			activeOffsetX={activeOffsetX}
+			// @ts-ignore
+			activeOffsetY={activeOffsetY}
+			onChange={onChange}>
+			<BottomSheetView style={styles.container} testID={testID}>
+				{children}
+			</BottomSheetView>
+		</BottomSheetModal>
+	);
+};
 
 const styles = StyleSheet.create({
 	container: {
@@ -198,4 +117,4 @@ const styles = StyleSheet.create({
 	},
 });
 
-export default memo(BottomSheetWrapper);
+export default Sheet;