prevent portal overlay on pin authentication screen

src/App.tsx

@@ -11,7 +11,6 @@ import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-cont
 import { enableScreens } from 'react-native-screens';
 import { connect, Provider as ReduxProvider, shallowEqual } from 'react-redux';
 import { RecoilRoot } from 'recoil';
-import PortalConsumer from '@/components/PortalConsumer';
 import ErrorBoundary from '@/components/error-boundary/ErrorBoundary';
 import { OfflineToast } from '@/components/toasts';
 import { designSystemPlaygroundEnabled, reactNativeDisableYellowBox, showNetworkRequests, showNetworkResponses } from '@/config/debug';
@@ -26,7 +25,6 @@ import { MainThemeProvider } from '@/theme/ThemeContext';
 import { addressKey } from '@/utils/keychainConstants';
 import { SharedValuesProvider } from '@/helpers/SharedValuesContext';
 import { InitialRouteContext } from '@/navigation/initialRoute';
-import { Portal } from '@/react-native-cool-modals/Portal';
 import { NotificationsHandler } from '@/notifications/NotificationsHandler';
 import { analyticsV2 } from '@/analytics';
 import { getOrCreateDeviceId, securelyHashWalletAddress } from '@/analytics/utils';
@@ -82,8 +80,6 @@ function App({ walletReady }: AppProps) {
       </View>
       <NotificationsHandler walletReady={walletReady} />
       <DeeplinkHandler initialRoute={initialRoute} walletReady={walletReady} />
-      <Portal />
-      <PortalConsumer />
       <BackupsSync />
     </>
   );

src/hooks/useActiveRoute.ts

@@ -0,0 +1,16 @@
+import { Navigation, useNavigation } from '@/navigation';
+import { useEffect, useState } from 'react';
+
+export const useActiveRoute = () => {
+  const { addListener } = useNavigation();
+  const [activeRoute, setActiveRoute] = useState(Navigation.getActiveRoute());
+
+  useEffect(() => {
+    const unsubscribe = addListener('state', () => {
+      setActiveRoute(Navigation.getActiveRoute());
+    });
+    return unsubscribe;
+  }, [addListener]);
+
+  return activeRoute?.name;
+};

src/navigation/Routes.android.tsx

@@ -90,6 +90,8 @@ import { ControlPanel } from '@/components/DappBrowser/control-panel/ControlPane
 import { ClaimRewardsPanel } from '@/screens/points/claim-flow/ClaimRewardsPanel';
 import { ClaimClaimablePanel } from '@/screens/claimables/ClaimClaimablePanel';
 import { RootStackParamList } from './types';
+import PortalConsumer from '@/components/PortalConsumer';
+import { Portal as CMPortal } from '@/react-native-cool-modals/Portal';
 
 const Stack = createStackNavigator();
 const OuterStack = createStackNavigator();
@@ -272,6 +274,10 @@ const AppContainerWithAnalytics = React.forwardRef<NavigationContainerRef<RootSt
     <PointsProfileProvider>
       <AuthNavigator />
     </PointsProfileProvider>
+
+    {/* NOTE: Internally, these use some navigational checks */}
+    <CMPortal />
+    <PortalConsumer />
   </NavigationContainer>
 ));
 

src/navigation/Routes.ios.tsx

@@ -102,6 +102,8 @@ import { ControlPanel } from '@/components/DappBrowser/control-panel/ControlPane
 import { ClaimRewardsPanel } from '@/screens/points/claim-flow/ClaimRewardsPanel';
 import { ClaimClaimablePanel } from '@/screens/claimables/ClaimClaimablePanel';
 import { RootStackParamList } from './types';
+import PortalConsumer from '@/components/PortalConsumer';
+import { Portal as CMPortal } from '@/react-native-cool-modals/Portal';
 
 const Stack = createStackNavigator();
 const NativeStack = createNativeStackNavigator();
@@ -286,6 +288,10 @@ const AppContainerWithAnalytics = React.forwardRef<NavigationContainerRef<RootSt
     <PointsProfileProvider>
       <NativeStackNavigator />
     </PointsProfileProvider>
+
+    {/* NOTE: Internally, these use some navigational checks */}
+    <CMPortal />
+    <PortalConsumer />
   </NavigationContainer>
 ));
 

src/react-native-cool-modals/Portal.tsx

@@ -1,18 +1,23 @@
-import React from 'react';
-import { IS_IOS } from '@/env';
+import React, { useEffect, useState } from 'react';
+import { IS_ANDROID, IS_IOS } from '@/env';
 import { portalStore } from '@/state/portal/portal';
 import { requireNativeComponent, StyleSheet, View } from 'react-native';
+import Routes from '@/navigation/routesNames';
+import { Navigation, useNavigation } from '@/navigation';
+import { useActiveRoute } from '@/hooks/useActiveRoute';
 
 const NativePortal = IS_IOS ? requireNativeComponent('WindowPortal') : View;
 const Wrapper = IS_IOS ? ({ children }: { children: React.ReactNode }) => children : View;
 
 export function Portal() {
+  const activeRoute = useActiveRoute();
+
   const { blockTouches, Component } = portalStore(state => ({
     blockTouches: state.blockTouches,
     Component: state.Component,
   }));
 
-  if (!Component) {
+  if (!Component || (activeRoute === Routes.PIN_AUTHENTICATION_SCREEN && !IS_IOS)) {
     return null;
   }