From d49c8da66b65b27e120b3ad3a07ea31ade81c4bd Mon Sep 17 00:00:00 2001 From: robin Date: Thu, 18 Apr 2024 21:13:17 -0400 Subject: [PATCH] Fix welcome user modal crashes (#2433) * temp * remove portal * remove depedency * render inside named portal * revert debugger --------- Co-authored-by: Jakz --- apps/mobile/src/App.tsx | 3 ++- .../GalleryBottomSheet/GalleryBottomSheetModal.tsx | 4 ++-- .../src/components/Onboarding/WelcomeNewUserOnboarding.tsx | 5 +++++ apps/mobile/src/contexts/BottomSheetModalContext.tsx | 4 ++-- apps/mobile/src/screens/HomeScreen/CuratedScreen.tsx | 2 +- 5 files changed, 12 insertions(+), 6 deletions(-) diff --git a/apps/mobile/src/App.tsx b/apps/mobile/src/App.tsx index 1ee3660a3..8072dd656 100644 --- a/apps/mobile/src/App.tsx +++ b/apps/mobile/src/App.tsx @@ -1,6 +1,6 @@ import 'expo-dev-client'; -import { PortalProvider } from '@gorhom/portal'; +import { PortalHost, PortalProvider } from '@gorhom/portal'; import { PrivyProvider } from '@privy-io/expo'; import AsyncStorage from '@react-native-async-storage/async-storage'; import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native'; @@ -171,6 +171,7 @@ export default function App() { /> + diff --git a/apps/mobile/src/components/GalleryBottomSheet/GalleryBottomSheetModal.tsx b/apps/mobile/src/components/GalleryBottomSheet/GalleryBottomSheetModal.tsx index 180b4a4e9..1ae0f47c0 100644 --- a/apps/mobile/src/components/GalleryBottomSheet/GalleryBottomSheetModal.tsx +++ b/apps/mobile/src/components/GalleryBottomSheet/GalleryBottomSheetModal.tsx @@ -9,12 +9,12 @@ import { GalleryBottomSheetBackdrop } from '~/components/GalleryBottomSheet/Gall import { GalleryBottomSheetBackground } from '~/components/GalleryBottomSheet/GalleryBottomSheetBackground'; import { GalleryBottomSheetHandle } from '~/components/GalleryBottomSheet/GalleryBottomSheetHandle'; import SyncTokensProvider from '~/contexts/SyncTokensContext'; -import { MainTabStackNavigatorProp } from '~/navigation/types'; +import { LoginStackNavigatorProp, MainTabStackNavigatorProp } from '~/navigation/types'; export type GalleryBottomSheetModalType = BottomSheetModal; type GalleryBottomSheetModalProps = { - navigationContext?: MainTabStackNavigatorProp; + navigationContext?: MainTabStackNavigatorProp | LoginStackNavigatorProp; children: React.ReactNode; snapPoints: | Readonly<{ value: (string | number)[] }> diff --git a/apps/mobile/src/components/Onboarding/WelcomeNewUserOnboarding.tsx b/apps/mobile/src/components/Onboarding/WelcomeNewUserOnboarding.tsx index 522d2c0e8..518591054 100644 --- a/apps/mobile/src/components/Onboarding/WelcomeNewUserOnboarding.tsx +++ b/apps/mobile/src/components/Onboarding/WelcomeNewUserOnboarding.tsx @@ -1,3 +1,4 @@ +import { useNavigation } from '@react-navigation/native'; import clsx from 'clsx'; import { BlurView } from 'expo-blur'; import { useColorScheme } from 'nativewind'; @@ -13,6 +14,7 @@ import { NotificationsIcon } from '~/navigation/MainTabNavigator/NotificationsIc import { PostIcon } from '~/navigation/MainTabNavigator/PostIcon'; import { SearchIcon } from '~/navigation/MainTabNavigator/SearchIcon'; import { LazyAccountTabItem } from '~/navigation/MainTabNavigator/TabBar'; +import { LoginStackNavigatorProp } from '~/navigation/types'; import { GalleryTouchableOpacity } from '../GalleryTouchableOpacity'; import { Typography } from '../Typography'; @@ -54,6 +56,8 @@ export function WelcomeNewUserOnboarding({ username, onComplete }: Props) { setStep((prevStep) => prevStep + 1); }, [onComplete, step]); + const navigation = useNavigation(); + if (step > 3 || step === 0) { return null; } @@ -61,6 +65,7 @@ export function WelcomeNewUserOnboarding({ username, onComplete }: Props) { if (step === 1) { showBottomSheetModal({ content: , + navigationContext: navigation, blurBackground: true, }); return null; diff --git a/apps/mobile/src/contexts/BottomSheetModalContext.tsx b/apps/mobile/src/contexts/BottomSheetModalContext.tsx index 9c31bfb1f..44763b934 100644 --- a/apps/mobile/src/contexts/BottomSheetModalContext.tsx +++ b/apps/mobile/src/contexts/BottomSheetModalContext.tsx @@ -20,7 +20,7 @@ import { GalleryBottomSheetModalType, } from '~/components/GalleryBottomSheet/GalleryBottomSheetModal'; import { useSafeAreaPadding } from '~/components/SafeAreaViewWithPadding'; -import { MainTabStackNavigatorProp } from '~/navigation/types'; +import { LoginStackNavigatorProp, MainTabStackNavigatorProp } from '~/navigation/types'; const SNAP_POINTS = ['CONTENT_HEIGHT']; // Example snap points, adjust based on your needs @@ -64,7 +64,7 @@ type BottomSheetModal = { onDismiss?: () => void; blurBackground?: boolean; // If we want to use navigation in the bottom sheet, we need to pass in the navigation context from where the bottom sheet is being opened from. - navigationContext?: MainTabStackNavigatorProp; + navigationContext?: MainTabStackNavigatorProp | LoginStackNavigatorProp; }; function BottomSheetModalProvider({ children }: BottomSheetModalProviderProps) { diff --git a/apps/mobile/src/screens/HomeScreen/CuratedScreen.tsx b/apps/mobile/src/screens/HomeScreen/CuratedScreen.tsx index ac37619ad..adee12175 100644 --- a/apps/mobile/src/screens/HomeScreen/CuratedScreen.tsx +++ b/apps/mobile/src/screens/HomeScreen/CuratedScreen.tsx @@ -117,7 +117,7 @@ function CuratedScreenInner({ queryRef }: CuratedScreenInnerProps) { queryRef={query.data} /> {showWelcome && ( - +