diff --git a/src/Expensify.tsx b/src/Expensify.tsx
index 45567a80b716..c07b2da5f654 100644
--- a/src/Expensify.tsx
+++ b/src/Expensify.tsx
@@ -11,7 +11,6 @@ import FocusModeNotification from './components/FocusModeNotification';
import GrowlNotification from './components/GrowlNotification';
import AppleAuthWrapper from './components/SignInButtons/AppleAuthWrapper';
import SplashScreenHider from './components/SplashScreenHider';
-import TestToolsModal from './components/TestToolsModal';
import UpdateAppModal from './components/UpdateAppModal';
import CONFIG from './CONFIG';
import CONST from './CONST';
@@ -306,7 +305,6 @@ function Expensify() {
/>
)}
{shouldHideSplash && }
-
);
}
diff --git a/src/NAVIGATORS.ts b/src/NAVIGATORS.ts
index 178943ce056f..f184c5896949 100644
--- a/src/NAVIGATORS.ts
+++ b/src/NAVIGATORS.ts
@@ -19,4 +19,5 @@ export default {
SEARCH_FULLSCREEN_NAVIGATOR: 'SearchFullscreenNavigator',
SHARE_MODAL_NAVIGATOR: 'ShareModalNavigator',
PUBLIC_RIGHT_MODAL_NAVIGATOR: 'PublicRightModalNavigator',
+ TEST_TOOLS_MODAL_NAVIGATOR: 'TestToolsModalNavigator',
} as const;
diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 220d08606040..2868e30e2451 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -1948,6 +1948,8 @@ const ROUTES = {
},
MIGRATED_USER_WELCOME_MODAL: 'onboarding/migrated-user-welcome',
+ TEST_TOOLS_MODAL: 'test-tools',
+
TRANSACTION_RECEIPT: {
route: 'r/:reportID/transaction/:transactionID/receipt/:action?/:iouType?',
getRoute: (reportID: string | undefined, transactionID: string | undefined, readonly = false, isFromReviewDuplicates = false, action?: IOUAction, iouType?: IOUType) => {
diff --git a/src/SCREENS.ts b/src/SCREENS.ts
index 504acb4e9e29..928b72c35274 100644
--- a/src/SCREENS.ts
+++ b/src/SCREENS.ts
@@ -671,6 +671,10 @@ const SCREENS = {
ROOT: 'TestDrive_Demo_Root',
},
+ TEST_TOOLS_MODAL: {
+ ROOT: 'TestToolsModal_Root',
+ },
+
I_KNOW_A_TEACHER: 'I_Know_A_Teacher',
INTRO_SCHOOL_PRINCIPAL: 'Intro_School_Principal',
I_AM_A_TEACHER: 'I_Am_A_Teacher',
diff --git a/src/components/Search/SearchRouter/SearchRouterContext.tsx b/src/components/Search/SearchRouter/SearchRouterContext.tsx
index fa60646ec3ee..b7dff8a58a4c 100644
--- a/src/components/Search/SearchRouter/SearchRouterContext.tsx
+++ b/src/components/Search/SearchRouter/SearchRouterContext.tsx
@@ -1,4 +1,4 @@
-import React, {useContext, useMemo, useRef, useState} from 'react';
+import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
import type {AnimatedTextInputRef} from '@components/RNTextInput';
import isSearchTopmostFullScreenRoute from '@libs/Navigation/helpers/isSearchTopmostFullScreenRoute';
import {navigationRef} from '@libs/Navigation/Navigation';
@@ -16,6 +16,10 @@ type SearchRouterContext = {
unregisterSearchPageInput: () => void;
};
+type HistoryState = {
+ isSearchModalOpen?: boolean;
+};
+
const defaultSearchContext: SearchRouterContext = {
isSearchRouterDisplayed: false,
openSearchRouter: () => {},
@@ -27,17 +31,43 @@ const defaultSearchContext: SearchRouterContext = {
const Context = React.createContext(defaultSearchContext);
+const supportsHistoryAPI = typeof window !== 'undefined' && typeof window.history !== 'undefined';
+const canListenPopState = typeof window !== 'undefined' && typeof window.addEventListener === 'function';
+
function SearchRouterContextProvider({children}: ChildrenProps) {
const [isSearchRouterDisplayed, setIsSearchRouterDisplayed] = useState(false);
const searchRouterDisplayedRef = useRef(false);
const searchPageInputRef = useRef(undefined);
+ useEffect(() => {
+ if (!canListenPopState) {
+ return;
+ }
+
+ const handlePopState = (event: PopStateEvent) => {
+ const state = event.state as HistoryState | null;
+ if (state?.isSearchModalOpen) {
+ setIsSearchRouterDisplayed(true);
+ searchRouterDisplayedRef.current = true;
+ } else {
+ setIsSearchRouterDisplayed(false);
+ searchRouterDisplayedRef.current = false;
+ }
+ };
+
+ window.addEventListener('popstate', handlePopState);
+ return () => window.removeEventListener('popstate', handlePopState);
+ }, []);
+
const routerContext = useMemo(() => {
const openSearchRouter = () => {
close(
() => {
setIsSearchRouterDisplayed(true);
searchRouterDisplayedRef.current = true;
+ if (supportsHistoryAPI) {
+ window.history.pushState({isSearchModalOpen: true} satisfies HistoryState, '');
+ }
},
false,
true,
@@ -46,6 +76,12 @@ function SearchRouterContextProvider({children}: ChildrenProps) {
const closeSearchRouter = () => {
setIsSearchRouterDisplayed(false);
searchRouterDisplayedRef.current = false;
+ if (supportsHistoryAPI) {
+ const state = window.history.state as HistoryState | null;
+ if (state?.isSearchModalOpen) {
+ window.history.back();
+ }
+ }
};
// There are callbacks that live outside of React render-loop and interact with SearchRouter
diff --git a/src/components/Search/SearchRouter/SearchRouterModal.tsx b/src/components/Search/SearchRouter/SearchRouterModal.tsx
index a14513c6731f..68f2edd754e0 100644
--- a/src/components/Search/SearchRouter/SearchRouterModal.tsx
+++ b/src/components/Search/SearchRouter/SearchRouterModal.tsx
@@ -6,7 +6,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
import useThemeStyles from '@hooks/useThemeStyles';
import useViewportOffsetTop from '@hooks/useViewportOffsetTop';
import useWindowDimensions from '@hooks/useWindowDimensions';
-import {isMobileChrome, isMobileIOS} from '@libs/Browser';
+import {isMobileIOS} from '@libs/Browser';
import CONST from '@src/CONST';
import SearchRouter from './SearchRouter';
import {useSearchRouterContext} from './SearchRouterContext';
@@ -34,7 +34,6 @@ function SearchRouterModal() {
fullscreen
propagateSwipe
swipeDirection={shouldUseNarrowLayout ? CONST.SWIPE_DIRECTION.RIGHT : undefined}
- shouldHandleNavigationBack={isMobileChrome()}
onClose={closeSearchRouter}
onModalHide={() => setShouldHideInputCaret(isMobileWebIOS)}
onModalShow={() => setShouldHideInputCaret(false)}
diff --git a/src/components/TestToolsModal.tsx b/src/components/TestToolsModal.tsx
deleted file mode 100644
index 43743dc61014..000000000000
--- a/src/components/TestToolsModal.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import React from 'react';
-import {useOnyx} from 'react-native-onyx';
-import useIsAuthenticated from '@hooks/useIsAuthenticated';
-import useLocalize from '@hooks/useLocalize';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
-import useStyleUtils from '@hooks/useStyleUtils';
-import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
-import Navigation from '@navigation/Navigation';
-import toggleTestToolsModal, {shouldShowProfileTool} from '@userActions/TestTool';
-import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
-import Button from './Button';
-import ClientSideLoggingToolMenu from './ClientSideLoggingToolMenu';
-import Modal from './Modal';
-import ProfilingToolMenu from './ProfilingToolMenu';
-import ScrollView from './ScrollView';
-import TestToolMenu from './TestToolMenu';
-import TestToolRow from './TestToolRow';
-import Text from './Text';
-
-function getRouteBasedOnAuthStatus(isAuthenticated: boolean, activeRoute: string) {
- return isAuthenticated ? ROUTES.SETTINGS_CONSOLE.getRoute(activeRoute) : ROUTES.PUBLIC_CONSOLE_DEBUG.getRoute(activeRoute);
-}
-
-const modalContentMaxHeightPercentage = 0.75;
-
-function TestToolsModal() {
- const {shouldUseNarrowLayout} = useResponsiveLayout();
- const [isTestToolsModalOpen = false] = useOnyx(ONYXKEYS.IS_TEST_TOOLS_MODAL_OPEN);
- const [shouldStoreLogs = false] = useOnyx(ONYXKEYS.SHOULD_STORE_LOGS);
- const {windowWidth, windowHeight} = useWindowDimensions();
- const StyleUtils = useStyleUtils();
- const styles = useThemeStyles();
- const {translate} = useLocalize();
- const activeRoute = Navigation.getActiveRoute();
- const isAuthenticated = useIsAuthenticated();
- const route = getRouteBasedOnAuthStatus(isAuthenticated, activeRoute);
-
- if (!isTestToolsModalOpen) {
- return null;
- }
-
- return (
-
-
-
- {translate('initialSettingsPage.troubleshoot.releaseOptions')}
-
- {shouldShowProfileTool() && }
-
- {!!shouldStoreLogs && (
-
-
- )}
-
-
-
- );
-}
-
-TestToolsModal.displayName = 'TestToolsModal';
-
-export default TestToolsModal;
diff --git a/src/components/TestToolsModalPage.tsx b/src/components/TestToolsModalPage.tsx
new file mode 100644
index 000000000000..6ce0c8a4ffb1
--- /dev/null
+++ b/src/components/TestToolsModalPage.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import {View} from 'react-native';
+import useIsAuthenticated from '@hooks/useIsAuthenticated';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import Navigation from '@navigation/Navigation';
+import {shouldShowProfileTool} from '@userActions/TestTool';
+import ROUTES from '@src/ROUTES';
+import Button from './Button';
+import ClientSideLoggingToolMenu from './ClientSideLoggingToolMenu';
+import ProfilingToolMenu from './ProfilingToolMenu';
+import SafeAreaConsumer from './SafeAreaConsumer';
+import ScrollView from './ScrollView';
+import TestToolMenu from './TestToolMenu';
+import TestToolRow from './TestToolRow';
+import Text from './Text';
+
+function getRouteBasedOnAuthStatus(isAuthenticated: boolean, activeRoute: string) {
+ return isAuthenticated ? ROUTES.SETTINGS_CONSOLE.getRoute(activeRoute) : ROUTES.PUBLIC_CONSOLE_DEBUG.getRoute(activeRoute);
+}
+
+function TestToolsModalPage() {
+ const {windowHeight} = useWindowDimensions();
+ const styles = useThemeStyles();
+ const {translate} = useLocalize();
+ const activeRoute = Navigation.getActiveRoute();
+ const isAuthenticated = useIsAuthenticated();
+ const route = getRouteBasedOnAuthStatus(isAuthenticated, activeRoute);
+
+ const maxHeight = windowHeight;
+
+ return (
+
+ {({safeAreaPaddingBottomStyle}) => (
+
+
+
+ {translate('initialSettingsPage.troubleshoot.releaseOptions')}
+
+ {shouldShowProfileTool() && }
+
+ {!!false && (
+
+
+ )}
+
+
+
+ )}
+
+ );
+}
+
+TestToolsModalPage.displayName = 'TestToolsModalPage';
+
+export default TestToolsModalPage;
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
index c1a89794c7a1..e889945648db 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
@@ -15,6 +15,7 @@ import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'
import useOnboardingFlowRouter from '@hooks/useOnboardingFlow';
import useResponsiveLayout from '@hooks/useResponsiveLayout';
import {SidebarOrderedReportIDsContextProvider} from '@hooks/useSidebarOrderedReportIDs';
+import useStyleUtils from '@hooks/useStyleUtils';
import useTheme from '@hooks/useTheme';
import {connect} from '@libs/actions/Delegate';
import setFullscreenVisibility from '@libs/actions/setFullscreenVisibility';
@@ -26,7 +27,7 @@ import Log from '@libs/Log';
import NavBarManager from '@libs/NavBarManager';
import getCurrentUrl from '@libs/Navigation/currentUrl';
import Navigation from '@libs/Navigation/Navigation';
-import Animations from '@libs/Navigation/PlatformStackNavigation/navigationOptions/animation';
+import Animations, {InternalPlatformAnimations} from '@libs/Navigation/PlatformStackNavigation/navigationOptions/animation';
import Presentation from '@libs/Navigation/PlatformStackNavigation/navigationOptions/presentation';
import type {AuthScreensParamList} from '@libs/Navigation/types';
import NetworkConnection from '@libs/NetworkConnection';
@@ -69,6 +70,7 @@ import MigratedUserWelcomeModalNavigator from './Navigators/MigratedUserWelcomeM
import OnboardingModalNavigator from './Navigators/OnboardingModalNavigator';
import RightModalNavigator from './Navigators/RightModalNavigator';
import TestDriveModalNavigator from './Navigators/TestDriveModalNavigator';
+import TestToolsModalNavigator from './Navigators/TestToolsModalNavigator';
import WelcomeVideoModalNavigator from './Navigators/WelcomeVideoModalNavigator';
import TestDriveDemoNavigator from './TestDriveDemoNavigator';
import useRootNavigatorScreenOptions from './useRootNavigatorScreenOptions';
@@ -218,6 +220,7 @@ const modalScreenListenersWithCancelSearch = {
function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDAppliedToClient}: AuthScreensProps) {
const theme = useTheme();
+ const StyleUtils = useStyleUtils();
const {shouldUseNarrowLayout} = useResponsiveLayout();
const rootNavigatorScreenOptions = useRootNavigatorScreenOptions();
const currentUserPersonalDetails = useCurrentUserPersonalDetails();
@@ -710,6 +713,20 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
options={rootNavigatorScreenOptions.fullScreen}
component={ConnectionCompletePage}
/>
+
diff --git a/src/libs/Navigation/AppNavigator/Navigators/TestToolsModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/TestToolsModalNavigator.tsx
new file mode 100644
index 000000000000..822a75bae2e8
--- /dev/null
+++ b/src/libs/Navigation/AppNavigator/Navigators/TestToolsModalNavigator.tsx
@@ -0,0 +1,66 @@
+import React, {useCallback, useRef} from 'react';
+import {View} from 'react-native';
+import type {GestureResponderEvent} from 'react-native';
+import NoDropZone from '@components/DragAndDrop/NoDropZone';
+import FocusTrapForScreens from '@components/FocusTrap/FocusTrapForScreen';
+import TestToolsModalPage from '@components/TestToolsModalPage';
+import useIsAuthenticated from '@hooks/useIsAuthenticated';
+import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator';
+import type {TestToolsModalModalNavigatorParamList} from '@libs/Navigation/types';
+import toggleTestToolsModal from '@userActions/TestTool';
+import CONST from '@src/CONST';
+import SCREENS from '@src/SCREENS';
+import Overlay from './Overlay';
+
+const Stack = createPlatformStackNavigator();
+
+function TestToolsModalNavigator() {
+ const styles = useThemeStyles();
+ const {shouldUseNarrowLayout} = useResponsiveLayout();
+ const outerViewRef = useRef(null);
+ const isAuthenticated = useIsAuthenticated();
+
+ const handleOuterClick = useCallback(() => {
+ toggleTestToolsModal();
+ }, []);
+
+ const handleInnerPress = useCallback((e: GestureResponderEvent) => {
+ e.stopPropagation();
+ }, []);
+
+ useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ESCAPE, handleOuterClick, {shouldBubble: true});
+
+ return (
+
+
+
+
+ e.stopPropagation()}
+ onTouchEnd={handleInnerPress}
+ style={styles.TestToolsNavigatorInnerView(shouldUseNarrowLayout, isAuthenticated)}
+ >
+
+
+
+
+
+
+
+ );
+}
+
+TestToolsModalNavigator.displayName = 'TestToolsModalNavigator';
+
+export default TestToolsModalNavigator;
diff --git a/src/libs/Navigation/AppNavigator/PublicScreens.tsx b/src/libs/Navigation/AppNavigator/PublicScreens.tsx
index 095fffae96dc..663fb6ae3823 100644
--- a/src/libs/Navigation/AppNavigator/PublicScreens.tsx
+++ b/src/libs/Navigation/AppNavigator/PublicScreens.tsx
@@ -1,5 +1,8 @@
import React from 'react';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator';
+import {InternalPlatformAnimations} from '@libs/Navigation/PlatformStackNavigation/navigationOptions/animation';
import type {PublicScreensParamList} from '@navigation/types';
import ConnectionCompletePage from '@pages/ConnectionCompletePage';
import SessionExpiredPage from '@pages/ErrorPage/SessionExpiredPage';
@@ -15,12 +18,15 @@ import NAVIGATORS from '@src/NAVIGATORS';
import SCREENS from '@src/SCREENS';
import defaultScreenOptions from './defaultScreenOptions';
import PublicRightModalNavigator from './Navigators/PublicRightModalNavigator';
+import TestToolsModalNavigator from './Navigators/TestToolsModalNavigator';
import useRootNavigatorScreenOptions from './useRootNavigatorScreenOptions';
const RootStack = createPlatformStackNavigator();
function PublicScreens() {
const rootNavigatorScreenOptions = useRootNavigatorScreenOptions();
+ const theme = useTheme();
+ const StyleUtils = useStyleUtils();
return (
{/* The structure for the HOME route has to be the same in public and auth screens. That's why the name for SignInPage is REPORTS_SPLIT_NAVIGATOR. */}
@@ -67,6 +73,19 @@ function PublicScreens() {
component={PublicRightModalNavigator}
options={rootNavigatorScreenOptions.rightModalNavigator}
/>
+
);
}
diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts
index 7ceec3f54c21..34e442ef5ba1 100644
--- a/src/libs/Navigation/linkingConfig/config.ts
+++ b/src/libs/Navigation/linkingConfig/config.ts
@@ -101,6 +101,15 @@ const config: LinkingOptions['config'] = {
},
},
+ [NAVIGATORS.TEST_TOOLS_MODAL_NAVIGATOR]: {
+ screens: {
+ [SCREENS.TEST_TOOLS_MODAL.ROOT]: {
+ path: ROUTES.TEST_TOOLS_MODAL,
+ exact: true,
+ },
+ },
+ },
+
[NAVIGATORS.ONBOARDING_MODAL_NAVIGATOR]: {
// Don't set the initialRouteName, because when the user continues from the last visited onboarding page,
// the onboarding purpose page will be briefly visible.
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index 10a6398bed29..747525aaeffa 100644
--- a/src/libs/Navigation/types.ts
+++ b/src/libs/Navigation/types.ts
@@ -1807,6 +1807,10 @@ type TestDriveDemoNavigatorParamList = {
[SCREENS.TEST_DRIVE_DEMO.ROOT]: undefined;
};
+type TestToolsModalModalNavigatorParamList = {
+ [SCREENS.TEST_TOOLS_MODAL.ROOT]: undefined;
+};
+
type SharedScreensParamList = {
[NAVIGATORS.REPORTS_SPLIT_NAVIGATOR]: NavigatorScreenParams;
[SCREENS.TRANSITION_BETWEEN_APPS]: {
@@ -1845,6 +1849,7 @@ type PublicScreensParamList = SharedScreensParamList & {
[SCREENS.CONNECTION_COMPLETE]: undefined;
[SCREENS.BANK_CONNECTION_COMPLETE]: undefined;
[NAVIGATORS.PUBLIC_RIGHT_MODAL_NAVIGATOR]: NavigatorScreenParams;
+ [NAVIGATORS.TEST_TOOLS_MODAL_NAVIGATOR]: NavigatorScreenParams;
};
type AuthScreensParamList = SharedScreensParamList & {
@@ -1903,6 +1908,7 @@ type AuthScreensParamList = SharedScreensParamList & {
[SCREENS.CONNECTION_COMPLETE]: undefined;
[NAVIGATORS.SHARE_MODAL_NAVIGATOR]: NavigatorScreenParams;
[SCREENS.BANK_CONNECTION_COMPLETE]: undefined;
+ [NAVIGATORS.TEST_TOOLS_MODAL_NAVIGATOR]: NavigatorScreenParams;
};
type SearchReportParamList = {
@@ -2089,4 +2095,5 @@ export type {
WorkspaceScreenName,
SettingsTabScreenName,
TestDriveDemoNavigatorParamList,
+ TestToolsModalModalNavigatorParamList,
};
diff --git a/src/libs/actions/TestTool.ts b/src/libs/actions/TestTool.ts
index b3a3f2257a93..a8656e207bc7 100644
--- a/src/libs/actions/TestTool.ts
+++ b/src/libs/actions/TestTool.ts
@@ -1,32 +1,27 @@
import throttle from 'lodash/throttle';
-import Onyx from 'react-native-onyx';
import {getBrowser, isChromeIOS} from '@libs/Browser';
+import Navigation from '@libs/Navigation/Navigation';
import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
-import {close} from './Modal';
-
-let isTestToolsModalOpen = false;
-Onyx.connect({
- key: ONYXKEYS.IS_TEST_TOOLS_MODAL_OPEN,
- callback: (val) => (isTestToolsModalOpen = val ?? false),
-});
+import ROUTES from '@src/ROUTES';
/**
* Toggle the test tools modal open or closed.
* Throttle the toggle to make the modal stay open if you accidentally tap an extra time, which is easy to do.
*/
-function toggleTestToolsModal() {
- const toggle = () => {
- const toggleIsTestToolsModalOpen = () => {
- Onyx.set(ONYXKEYS.IS_TEST_TOOLS_MODAL_OPEN, !isTestToolsModalOpen);
- };
- if (!isTestToolsModalOpen) {
- close(toggleIsTestToolsModalOpen);
- return;
+const throttledToggle = throttle(
+ () => {
+ const currentRoute = Navigation.getActiveRoute().replace(/^\//, '');
+ if (currentRoute === ROUTES.TEST_TOOLS_MODAL) {
+ Navigation.goBack();
+ } else {
+ Navigation.navigate(ROUTES.TEST_TOOLS_MODAL);
}
- toggleIsTestToolsModalOpen();
- };
- const throttledToggle = throttle(toggle, CONST.TIMING.TEST_TOOLS_MODAL_THROTTLE_TIME);
+ },
+ CONST.TIMING.TEST_TOOLS_MODAL_THROTTLE_TIME,
+ {leading: true, trailing: false},
+);
+
+function toggleTestToolsModal() {
throttledToggle();
}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 4ceffc5851d3..d17357a4a83b 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1858,6 +1858,27 @@ const styles = (theme: ThemeColors) =>
overflow: 'hidden',
} satisfies ViewStyle),
+ TestToolsNavigatorOuterView: (shouldUseNarrowLayout: boolean) => ({
+ flex: 1,
+ justifyContent: shouldUseNarrowLayout ? 'flex-end' : 'center',
+ alignItems: 'center',
+ }),
+
+ TestToolsNavigatorInnerView: (shouldUseNarrowLayout: boolean, isAuthenticated: boolean) => {
+ const borderBottomRadius = shouldUseNarrowLayout ? 0 : variables.componentBorderRadiusLarge;
+ const defaultHeight = shouldUseNarrowLayout ? '78%' : '75%';
+ const height = isAuthenticated ? defaultHeight : '55%';
+
+ return {
+ width: shouldUseNarrowLayout ? '100%' : '91%',
+ height,
+ borderRadius: variables.componentBorderRadiusLarge,
+ borderBottomRightRadius: borderBottomRadius,
+ borderBottomLeftRadius: borderBottomRadius,
+ overflow: 'hidden',
+ };
+ },
+
onlyEmojisText: {
fontSize: variables.fontSizeOnlyEmojis,
lineHeight: variables.fontSizeOnlyEmojisHeight,