Fix welcome user modal crashes (#2433)

* temp * remove portal * remove depedency * render inside named portal * revert debugger --------- Co-authored-by: Jakz <[email protected]>
gallery-so · Apr 19, 2024 · d49c8da · d49c8da
1 parent b120793
commit d49c8da
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 6 deletions.
diff --git 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() {
                                           />
                                         </ManageWalletProvider>
                                       </SyncTokensProvider>
+                                      <PortalHost name="app-context" />
                                     </BottomSheetModalProvider>
                                   </PortalProvider>
                                 </TokenStateManagerProvider>

diff --git 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
@@ -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,13 +56,16 @@ export function WelcomeNewUserOnboarding({ username, onComplete }: Props) {
     setStep((prevStep) => prevStep + 1);
   }, [onComplete, step]);
 
+  const navigation = useNavigation<LoginStackNavigatorProp>();
+
   if (step > 3 || step === 0) {
     return null;
   }
 
   if (step === 1) {
     showBottomSheetModal({
       content: <WelcomeNewUser username={username} onContinue={nextStep} />,
+      navigationContext: navigation,
       blurBackground: true,
     });
     return null;

diff --git 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
@@ -117,7 +117,7 @@ function CuratedScreenInner({ queryRef }: CuratedScreenInnerProps) {
         queryRef={query.data}
       />
       {showWelcome && (
-        <Portal>
+        <Portal hostName="app-context">
           <WelcomeNewUserOnboarding
             username={username}
             onComplete={handleWelcomeTooltipCompleted}