[RNTester] Remove ToolbarAndroid

RNTester/js/RNTesterApp.android.js

@@ -17,10 +17,12 @@ const {
   BackHandler,
   Dimensions,
   DrawerLayoutAndroid,
+  Image,
   Linking,
   StatusBar,
   StyleSheet,
-  ToolbarAndroid,
+  Text,
+  TouchableWithoutFeedback,
   UIManager,
   View,
 } = require('react-native');
@@ -47,18 +49,27 @@ type Props = {
 
 const APP_STATE_KEY = 'RNTesterAppState.v2';
 
-const HEADER_LOGO_ICON = nativeImageSource({
-  android: 'launcher_icon',
-  width: 132,
-  height: 144,
-});
-
 const HEADER_NAV_ICON = nativeImageSource({
   android: 'ic_menu_black_24dp',
   width: 48,
   height: 48,
 });
 
+const Header = ({title, onPressDrawer}) => {
+  return (
+    <View style={styles.toolbar}>
+      <View style={styles.toolbarCenter}>
+        <Text style={styles.title}>{title}</Text>
+      </View>
+      <View style={styles.toolbarLeft}>
+        <TouchableWithoutFeedback onPress={onPressDrawer}>
+          <Image source={HEADER_NAV_ICON} />
+        </TouchableWithoutFeedback>
+      </View>
+    </View>
+  );
+};
+
 class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
   UNSAFE_componentWillMount() {
     BackHandler.addEventListener(
@@ -155,14 +166,11 @@ class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
       } else if (ExampleModule) {
         return (
           <View style={styles.container}>
-            <ToolbarAndroid
-              logo={HEADER_LOGO_ICON}
-              navIcon={HEADER_NAV_ICON}
+            <Header
+              title={ExampleModule.title}
               /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue
                * was found when making Flow check .android.js files. */
-              onIconClicked={() => this.drawer.openDrawer()}
-              style={styles.toolbar}
-              title={ExampleModule.title}
+              onPressDrawer={() => this.drawer.openDrawer()}
             />
             <RNTesterExampleContainer
               module={ExampleModule}
@@ -179,14 +187,11 @@ class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
 
     return (
       <View style={styles.container}>
-        <ToolbarAndroid
-          logo={HEADER_LOGO_ICON}
-          navIcon={HEADER_NAV_ICON}
-          /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
-           * found when making Flow check .android.js files. */
-          onIconClicked={() => this.drawer.openDrawer()}
-          style={styles.toolbar}
+        <Header
           title="RNTester"
+          /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue
+           * was found when making Flow check .android.js files. */
+          onPressDrawer={() => this.drawer.openDrawer()}
         />
         <RNTesterExampleList
           onNavigate={this._handleAction}
@@ -245,6 +250,22 @@ const styles = StyleSheet.create({
     backgroundColor: '#E9EAED',
     height: 56,
   },
+  toolbarLeft: {
+    marginTop: 2,
+  },
+  toolbarCenter: {
+    flex: 1,
+    position: 'absolute',
+    top: 12,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 19,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
   drawerContentWrapper: {
     flex: 1,
     paddingTop: StatusBar.currentHeight,

RNTester/js/RNTesterList.android.js

@@ -95,12 +95,6 @@ const ComponentExamples: Array<RNTesterExample> = [
      * when making Flow check .android.js files. */
     module: require('./TextInputExample'),
   },
-  {
-    key: 'ToolbarAndroidExample',
-    /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
-     * when making Flow check .android.js files. */
-    module: require('./ToolbarAndroidExample'),
-  },
   {
     key: 'TouchableExample',
     module: require('./TouchableExample'),