feat: add new patterns example on dev menu

src/app/AppRegistry.tsx

@@ -473,9 +473,15 @@ export const modules = defineModules({
   ConversationDetails: reactModule(ConversationDetailsQueryRenderer),
   DarkModeSettings: reactModule(DarkModeSettings),
   DevMenu: reactModule(DevMenu, {
-    hidesBottomTabs: true,
-    hidesBackButton: true,
+    // No need to hide bottom tabs if it's a modal because they will be hidden by default
+    hidesBottomTabs: !unsafe_getFeatureFlag("AREnableNewNavigation"),
+    hidesBackButton: !unsafe_getFeatureFlag("AREnableNewNavigation"),
     alwaysPresentModally: !!unsafe_getFeatureFlag("AREnableNewNavigation"),
+    screenOptions: {
+      headerTitle: "Dev Settings",
+      headerLargeTitle: true,
+      headerLeft: undefined,
+    },
   }),
   EditSavedSearchAlert: reactModule(EditSavedSearchAlertQueryRenderer, {
     hidesBackButton: true,

src/app/Navigation/AuthenticatedRoutes/LargeHeaderView.tsx

@@ -0,0 +1,5 @@
+import { Flex, NAVBAR_HEIGHT } from "@artsy/palette-mobile"
+
+export const LargeHeaderView: React.FC = () => {
+  return <Flex height={52 + NAVBAR_HEIGHT} />
+}

src/app/Navigation/AuthenticatedRoutes/SharedRoutes.tsx

@@ -22,8 +22,11 @@ export const SharedRoutes = (): JSX.Element => {
                 presentation: module.options.alwaysPresentModally ? "fullScreenModal" : "card",
                 headerShown:
                   !module.options.hidesBackButton && !module.options.hasOwnModalCloseButton,
-                ...module.options.screenOptions,
-                headerLeft: () => {
+                headerLeft: ({ canGoBack }) => {
+                  if (!canGoBack) {
+                    return null
+                  }
+
                   return (
                     <Touchable
                       onPress={() => {
@@ -37,6 +40,7 @@ export const SharedRoutes = (): JSX.Element => {
                   )
                 },
                 headerTitle: "",
+                ...module.options.screenOptions,
               }}
               children={(props) => {
                 const params = props.route.params || {}

src/app/store/config/features.ts

@@ -317,7 +317,7 @@ export const features = {
     showInDevMenu: true,
   },
   AREnableNewNavigation: {
-    description: "Enable new navigation infra",
+    description: "Enable new navigation infra (Requires App Restart!)",
     readyForRelease: false,
     showInDevMenu: true,
   },

src/app/system/devTools/DevMenu/Components/NavButtons.tsx

@@ -7,7 +7,7 @@ export const NavButtons: React.FC<{ onClose(): void }> = ({ onClose }) => {
   const isLoggedIn = !!GlobalStore.useAppState((state) => !!state.auth.userID)
 
   return (
-    <Flex style={{ flexDirection: "row", alignItems: "center" }} pb={2} px={2}>
+    <Flex style={{ flexDirection: "row", alignItems: "center" }} px={2}>
       <Join separator={<Spacer x={2} />}>
         {!!isLoggedIn && (
           <TouchableOpacity

src/app/system/devTools/DevMenu/DevMenu.tsx

@@ -1,6 +1,8 @@
-import { Flex, Join, Spacer, Text, useSpace } from "@artsy/palette-mobile"
+import { Flex, Join, Spacer, Text } from "@artsy/palette-mobile"
+import { useNavigation } from "@react-navigation/native"
 
 import { ArtsyNativeModule } from "app/NativeModules/ArtsyNativeModule"
+import { LargeHeaderView } from "app/Navigation/AuthenticatedRoutes/LargeHeaderView"
 import { GlobalStore } from "app/store/GlobalStore"
 import { CodePushOptions } from "app/system/devTools/DevMenu/CodePushOptions"
 import { DevMenuButtonItem } from "app/system/devTools/DevMenu/Components/DevMenuButtonItem"
@@ -12,12 +14,15 @@ import { NavButtons } from "app/system/devTools/DevMenu/Components/NavButtons"
 import { NavigateTo } from "app/system/devTools/DevMenu/Components/NavigateTo"
 import { goBack } from "app/system/navigation/navigate"
 import { useBackHandler } from "app/utils/hooks/useBackHandler"
+import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
+import { useEffect } from "react"
 import { NativeModules, ScrollView } from "react-native"
 import DeviceInfo from "react-native-device-info"
 
 export const DevMenu = ({ onClose = () => goBack() }: { onClose(): void }) => {
   const userEmail = GlobalStore.useAppState((s) => s.auth.userEmail)
-  const space = useSpace()
+  const enableNewNavigation = useFeatureFlag("AREnableNewNavigation")
+  const navigation = useNavigation()
 
   const handleBackButton = () => {
     onClose()
@@ -26,45 +31,54 @@ export const DevMenu = ({ onClose = () => goBack() }: { onClose(): void }) => {
 
   useBackHandler(handleBackButton)
 
-  return (
-    <Flex flex={1}>
-      <Flex flexDirection="row" justifyContent="space-between">
-        <Text variant="lg-display" pb={2} px={2}>
-          Dev Settings
-        </Text>
-        <NavButtons onClose={onClose} />
-      </Flex>
-      <ScrollView
-        style={{ flex: 1, borderRadius: 4, overflow: "hidden" }}
-        contentContainerStyle={{ paddingTop: space(1), paddingBottom: 80 }}
-      >
-        <Text variant="xs" color="grey" mx={2}>
-          Build:{" "}
-          <Text variant="xs">
-            v{DeviceInfo.getVersion()}, build {DeviceInfo.getBuildNumber()} (
-            {ArtsyNativeModule.gitCommitShortHash})
-          </Text>
-        </Text>
-        <Text variant="xs" color="grey" mx={2}>
-          Email: <Text variant="xs">{userEmail}</Text>
-        </Text>
+  useEffect(() => {
+    queueMicrotask(() => {
+      navigation?.setOptions({
+        headerRight: () => (
+          <Flex justifyContent="center" alignItems="center">
+            <NavButtons onClose={onClose} />
+          </Flex>
+        ),
+      })
+    })
+  }, [navigation])
 
-        <DevMenuButtonItem
-          title="Open RN Dev Menu"
-          onPress={() => NativeModules?.DevMenu?.show()}
-        />
+  return (
+    <ScrollView
+      style={{ flex: 1, borderRadius: 4, overflow: "hidden" }}
+      contentContainerStyle={{ paddingBottom: 80 }}
+    >
+      {!!enableNewNavigation && <LargeHeaderView />}
 
-        <Spacer y={2} />
+      {!enableNewNavigation && (
+        <Flex flexDirection="row" justifyContent="space-between" alignItems="center" mb={2}>
+          <Text variant="lg-display" px={2}>
+            Dev Settings
+          </Text>
+          <NavButtons onClose={onClose} />
+        </Flex>
+      )}
 
-        <Join separator={<Spacer y={1} />}>
-          <NavigateTo />
-          <EnvironmentOptions onClose={onClose} />
-          <CodePushOptions />
-          <FeatureFlags />
-          <Experiments />
-          <DevTools />
-        </Join>
-      </ScrollView>
-    </Flex>
+      <Text variant="xs" color="grey" mx={2}>
+        Build:{" "}
+        <Text variant="xs">
+          v{DeviceInfo.getVersion()}, build {DeviceInfo.getBuildNumber()} (
+          {ArtsyNativeModule.gitCommitShortHash})
+        </Text>
+      </Text>
+      <Text variant="xs" color="grey" mx={2}>
+        Email: <Text variant="xs">{userEmail}</Text>
+      </Text>
+      <DevMenuButtonItem title="Open RN Dev Menu" onPress={() => NativeModules?.DevMenu?.show()} />
+      <Spacer y={2} />
+      <Join separator={<Spacer y={1} />}>
+        <NavigateTo />
+        <EnvironmentOptions onClose={onClose} />
+        <CodePushOptions />
+        <FeatureFlags />
+        <Experiments />
+        <DevTools />
+      </Join>
+    </ScrollView>
   )
 }