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
facebook · Jun 11, 2024 · 712ff8c · 712ff8c
1 parent 5b3a321
commit 712ff8c
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 28 deletions.
diff --git a/packages/rn-tester/js/RNTesterAppShared.js b/packages/rn-tester/js/RNTesterAppShared.js
@@ -28,21 +28,27 @@ import {
 import * as React from 'react';
 import {
   BackHandler,
+  Button,
   Linking,
+  Platform,
   StyleSheet,
   View,
   useColorScheme,
 } from 'react-native';
 
 // 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
@@ -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,