Fix Help Panel freezing the app when opened from a modal

src/components/Navigation/RootNavigatorExtraContent/index.native.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import TopLevelNavigationTabBar from '@components/Navigation/TopLevelNavigationTabBar';
+import type RootNavigatorExtraContentProps from './types';
+
+function RootNavigatorExtraContent({state}: RootNavigatorExtraContentProps) {
+    return <TopLevelNavigationTabBar state={state} />;
+}
+
+RootNavigatorExtraContent.displayName = 'RootNavigatorExtraContent';
+
+export default RootNavigatorExtraContent;

src/components/Navigation/RootNavigatorExtraContent.tsx → src/components/Navigation/RootNavigatorExtraContent/index.tsx

@@ -1,17 +1,13 @@
-import type {ParamListBase} from '@react-navigation/native';
 import React from 'react';
+import TopLevelNavigationTabBar from '@components/Navigation/TopLevelNavigationTabBar';
 import SidePanel from '@components/SidePanel';
-import type {PlatformStackNavigationState} from '@libs/Navigation/PlatformStackNavigation/types';
-import TopLevelNavigationTabBar from './TopLevelNavigationTabBar';
-
-type RootNavigatorExtraContentProps = {
-    state: PlatformStackNavigationState<ParamListBase>;
-};
+import type RootNavigatorExtraContentProps from './types';
 
 function RootNavigatorExtraContent({state}: RootNavigatorExtraContentProps) {
     return (
         <>
             <TopLevelNavigationTabBar state={state} />
+            {/* On web, the SidePanel is rendered outside of the main navigator so it can be positioned alongside the screen */}
             <SidePanel />
         </>
     );

src/components/Navigation/RootNavigatorExtraContent/types.ts

@@ -0,0 +1,8 @@
+import type {ParamListBase} from '@react-navigation/native';
+import type {PlatformStackNavigationState} from '@libs/Navigation/PlatformStackNavigation/types';
+
+type RootNavigatorExtraContentProps = {
+    state: PlatformStackNavigationState<ParamListBase>;
+};
+
+export default RootNavigatorExtraContentProps;

src/components/SidePanel/HelpComponents/HelpButton.tsx → src/components/SidePanel/HelpComponents/HelpButton/HelpButtonBase.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import type {StyleProp, ViewStyle} from 'react-native';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import {PressableWithoutFeedback} from '@components/Pressable';
@@ -8,10 +7,7 @@ import useLocalize from '@hooks/useLocalize';
 import useSidePanel from '@hooks/useSidePanel';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-
-type HelpButtonProps = {
-    style?: StyleProp<ViewStyle>;
-};
+import type HelpButtonProps from './types';
 
 function HelpButton({style}: HelpButtonProps) {
     const styles = useThemeStyles();
@@ -39,6 +35,6 @@ function HelpButton({style}: HelpButtonProps) {
     );
 }
 
-HelpButton.displayName = 'HelpButton';
+HelpButton.displayName = 'HelpButtonBase';
 
 export default HelpButton;

src/components/SidePanel/HelpComponents/HelpButton/index.native.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import SidePanel from '@components/SidePanel/index';
+import HelpButtonBase from './HelpButtonBase';
+import type HelpButtonProps from './types';
+
+function HelpButton({style}: HelpButtonProps) {
+    return (
+        <>
+            {/* Render SidePanel here on native platforms, since it's not included in RootNavigatorExtraContent like on web */}
+            <SidePanel />
+            <HelpButtonBase style={style} />
+        </>
+    );
+}
+
+HelpButton.displayName = 'HelpButton';
+
+export default HelpButton;

src/components/SidePanel/HelpComponents/HelpButton/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import HelpButtonBase from './HelpButtonBase';
+import type HelpButtonProps from './types';
+
+function HelpButton({style}: HelpButtonProps) {
+    return <HelpButtonBase style={style} />;
+}
+
+HelpButton.displayName = 'HelpButton';
+
+export default HelpButton;

src/components/SidePanel/HelpComponents/HelpButton/types.ts

@@ -0,0 +1,7 @@
+import type {StyleProp, ViewStyle} from 'react-native';
+
+type HelpButtonProps = {
+    style?: StyleProp<ViewStyle>;
+};
+
+export default HelpButtonProps;