From 712ff8cdba59bd5f8bb1790f60171e0f126e415c Mon Sep 17 00:00:00 2001
From: Zeya Peng <zeyap@meta.com>
Date: Mon, 10 Jun 2024 20:48:12 -0700
Subject: [PATCH] make RNTesterApp's back button customizable

Summary:
## Changelog

make RNTesterApp take a `customBackButton` prop to enable overriding whether to display back button and the look
by default, only ios platform has a back button, and android app relies on back button on navigation bar that comes with platform

[Internal]

Reviewed By: christophpurrer

Differential Revision: D58218208

fbshipit-source-id: 63a47390cc6d3de057b92a3c522c1b00d942c69d
---
 packages/rn-tester/js/RNTesterAppShared.js    | 22 +++++++++--
 .../rn-tester/js/components/RNTTitleBar.js    | 37 ++++++-------------
 2 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/packages/rn-tester/js/RNTesterAppShared.js b/packages/rn-tester/js/RNTesterAppShared.js
index a693a0768792cd..0e803557800f88 100644
--- a/packages/rn-tester/js/RNTesterAppShared.js
+++ b/packages/rn-tester/js/RNTesterAppShared.js
@@ -28,7 +28,9 @@ import {
 import * as React from 'react';
 import {
   BackHandler,
+  Button,
   Linking,
+  Platform,
   StyleSheet,
   View,
   useColorScheme,
@@ -36,13 +38,17 @@ import {
 
 // RNTester App currently uses in memory storage for storing navigation state
 
+type BackButton = ({onBack: () => void}) => React.Node;
+
 const RNTesterApp = ({
   testList,
+  customBackButton,
 }: {
   testList?: {
     components?: Array<RNTesterModuleInfo>,
     apis?: Array<RNTesterModuleInfo>,
   },
+  customBackButton?: BackButton,
 }): React.Node => {
   const [state, dispatch] = React.useReducer(
     RNTesterNavigationReducer,
@@ -227,6 +233,14 @@ const RNTesterApp = ({
         ? 'Components'
         : 'APIs';
 
+  const BackButtonComponent: ?BackButton = customBackButton
+    ? customBackButton
+    : Platform.OS === 'ios'
+      ? ({onBack}) => (
+          <Button title="Back" onPress={onBack} color={theme.LinkColor} />
+        )
+      : null;
+
   const activeExampleList =
     screen === Screens.COMPONENTS ? examplesList.components : examplesList.apis;
 
@@ -235,9 +249,11 @@ const RNTesterApp = ({
       <RNTTitleBar
         title={title}
         theme={theme}
-        onBack={activeModule ? handleBackPress : null}
-        documentationURL={activeModule?.documentationURL}
-      />
+        documentationURL={activeModule?.documentationURL}>
+        {activeModule && BackButtonComponent ? (
+          <BackButtonComponent onBack={handleBackPress} />
+        ) : undefined}
+      </RNTTitleBar>
       <View
         style={StyleSheet.compose(styles.container, {
           backgroundColor: theme.GroupedBackgroundColor,
diff --git a/packages/rn-tester/js/components/RNTTitleBar.js b/packages/rn-tester/js/components/RNTTitleBar.js
index da8ce36d7c870b..8f48560e66cb74 100644
--- a/packages/rn-tester/js/components/RNTTitleBar.js
+++ b/packages/rn-tester/js/components/RNTTitleBar.js
@@ -11,22 +11,15 @@
 import RNTesterDocumentationURL from './RNTesterDocumentationURL';
 import {type RNTesterTheme} from './RNTesterTheme';
 import * as React from 'react';
-import {
-  Button,
-  Platform,
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
+import {Platform, SafeAreaView, StyleSheet, Text, View} from 'react-native';
 
 const HeaderIOS = ({
-  onBack,
+  children,
   title,
   documentationURL,
   theme,
 }: {
-  onBack?: ?() => mixed,
+  children?: React.Node,
   title: string,
   documentationURL?: string,
   theme: RNTesterTheme,
@@ -43,28 +36,19 @@ const HeaderIOS = ({
             <RNTesterDocumentationURL documentationURL={documentationURL} />
           )}
         </View>
-        {onBack != null && (
-          <View>
-            <Button
-              title="Back"
-              onPress={onBack}
-              color={Platform.select({
-                ios: theme.LinkColor,
-                default: undefined,
-              })}
-            />
-          </View>
-        )}
+        {children != null && <View>{children}</View>}
       </View>
     </SafeAreaView>
   );
 };
 
 const HeaderAndroid = ({
+  children,
   title,
   documentationURL,
   theme,
 }: {
+  children?: React.Node,
   title: string,
   documentationURL?: string,
   theme: RNTesterTheme,
@@ -78,18 +62,19 @@ const HeaderAndroid = ({
             <RNTesterDocumentationURL documentationURL={documentationURL} />
           )}
         </View>
+        {children != null && <View>{children}</View>}
       </View>
     </SafeAreaView>
   );
 };
 
 export default function RNTTitleBar({
-  onBack,
+  children,
   title,
   documentationURL,
   theme,
 }: {
-  onBack?: ?() => mixed,
+  children?: React.Node,
   title: string,
   documentationURL?: string,
   theme: RNTesterTheme,
@@ -99,13 +84,14 @@ export default function RNTTitleBar({
     <HeaderIOS
       documentationURL={documentationURL}
       title={title}
-      onBack={onBack}
+      children={children}
       theme={theme}
     />
   ) : (
     <HeaderAndroid
       documentationURL={documentationURL}
       title={title}
+      children={children}
       theme={theme}
     />
   );
@@ -134,6 +120,7 @@ const styles = StyleSheet.create({
   },
   toolbar: {
     height: 56,
+    flexDirection: 'row',
   },
   toolbarCenter: {
     flex: 1,