Hide chrome when viewing deep links on tiny screens (#50673)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50673

Because, this is less a pain then trying to shrink every example to fit in to the tiny window given to us by Jest E2E.

Changelog: [Internal]

Reviewed By: joevilches

Differential Revision: D72683487

fbshipit-source-id: 5c08bd04445fc573086bc780194c893d0cb6ea19

packages/rn-tester/js/RNTesterAppShared.js

@@ -36,6 +36,7 @@ import {
   StyleSheet,
   View,
   useColorScheme,
+  useWindowDimensions,
 } from 'react-native';
 import * as NativeComponentRegistry from 'react-native/Libraries/NativeComponent/NativeComponentRegistry';
 
@@ -75,8 +76,12 @@ const RNTesterApp = ({
     activeModuleExampleKey,
     screen,
     recentlyUsed,
+    hadDeepLink,
   } = state;
 
+  const {height, scale} = useWindowDimensions();
+  const isScreenTiny = height / scale < 400;
+
   const examplesList = React.useMemo(
     () => getExamplesListWithRecentlyUsed({recentlyUsed, testList}),
     [recentlyUsed, testList],
@@ -265,16 +270,21 @@ const RNTesterApp = ({
   const activeExampleList =
     screen === Screens.COMPONENTS ? examplesList.components : examplesList.apis;
 
+  // Hide chrome if we don't have much screen space and are showing UI for tests
+  const shouldHideChrome = isScreenTiny && hadDeepLink;
+
   return (
     <RNTesterThemeContext.Provider value={theme}>
-      <RNTTitleBar
-        title={title}
-        theme={theme}
-        documentationURL={activeModule?.documentationURL}>
-        {activeModule && BackButtonComponent ? (
-          <BackButtonComponent onBack={handleBackPress} />
-        ) : undefined}
-      </RNTTitleBar>
+      {!shouldHideChrome && (
+        <RNTTitleBar
+          title={title}
+          theme={theme}
+          documentationURL={activeModule?.documentationURL}>
+          {activeModule && BackButtonComponent ? (
+            <BackButtonComponent onBack={handleBackPress} />
+          ) : undefined}
+        </RNTTitleBar>
+      )}
       <View
         style={StyleSheet.compose(styles.container, {
           backgroundColor: theme.GroupedBackgroundColor,
@@ -292,13 +302,15 @@ const RNTesterApp = ({
           />
         )}
       </View>
-      <View style={styles.bottomNavbar}>
-        <RNTesterNavBar
-          screen={screen || Screens.COMPONENTS}
-          isExamplePageOpen={!!activeModule}
-          handleNavBarPress={handleNavBarPress}
-        />
-      </View>
+      {!shouldHideChrome && (
+        <View style={styles.bottomNavbar}>
+          <RNTesterNavBar
+            screen={screen || Screens.COMPONENTS}
+            isExamplePageOpen={!!activeModule}
+            handleNavBarPress={handleNavBarPress}
+          />
+        </View>
+      )}
       <ReportFullyDrawnView />
     </RNTesterThemeContext.Provider>
   );