diff --git a/src/App.tsx b/src/App.tsx
index 80a5f7140a2..3d4cc1d7cc2 100644
--- a/src/App.tsx
+++ b/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) {
-
-
>
);
diff --git a/src/hooks/useActiveRoute.ts b/src/hooks/useActiveRoute.ts
new file mode 100644
index 00000000000..523eb741004
--- /dev/null
+++ b/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;
+};
diff --git a/src/navigation/Routes.android.tsx b/src/navigation/Routes.android.tsx
index 79bfbd90c29..5fdf407299a 100644
--- a/src/navigation/Routes.android.tsx
+++ b/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
+
+ {/* NOTE: Internally, these use some navigational checks */}
+
+
));
diff --git a/src/navigation/Routes.ios.tsx b/src/navigation/Routes.ios.tsx
index 459561484d3..64b293f2378 100644
--- a/src/navigation/Routes.ios.tsx
+++ b/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
+
+ {/* NOTE: Internally, these use some navigational checks */}
+
+
));
diff --git a/src/react-native-cool-modals/Portal.tsx b/src/react-native-cool-modals/Portal.tsx
index 19c09a0aa3d..97ab83052da 100644
--- a/src/react-native-cool-modals/Portal.tsx
+++ b/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;
}