Remove ToolbarAndroid (#24999)

Summary:
This replaces ToolbarAndroid with a cleaner, but very similar design and paves the path for removing ToolbarAndroid from core.

## Changelog

[Internal] [Removed] - ToolbarAndroid removed from RNTester
Pull Request resolved: https://github.com/facebook/react-native/pull/24999

Differential Revision: D15468053

Pulled By: cpojer

fbshipit-source-id: 21a58558b9ec371689bc994c2d888b81cff01126

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'),

RNTester/js/ToolbarAndroidExample.android.js

@@ -1,186 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * @flow
- */
-
-'use strict';
-
-const React = require('react');
-const {
-  StyleSheet,
-  Switch,
-  Text,
-  ToolbarAndroid,
-  View,
-} = require('react-native');
-
-const nativeImageSource = require('../../Libraries/Image/nativeImageSource');
-
-const RNTesterBlock = require('./RNTesterBlock');
-const RNTesterPage = require('./RNTesterPage');
-
-class ToolbarAndroidExample extends React.Component<{}, $FlowFixMeState> {
-  state = {
-    actionText: 'Example app with toolbar component',
-    toolbarSwitch: false,
-    colorProps: {
-      titleColor: '#3b5998',
-      subtitleColor: '#6a7180',
-    },
-  };
-
-  render() {
-    return (
-      <RNTesterPage title="<ToolbarAndroid>">
-        <RNTesterBlock title="Toolbar with title/subtitle and actions">
-          <ToolbarAndroid
-            actions={toolbarActions}
-            navIcon={nativeImageSource({
-              android: 'ic_menu_black_24dp',
-              width: 48,
-              height: 48,
-            })}
-            onActionSelected={this._onActionSelected}
-            onIconClicked={() => this.setState({actionText: 'Icon clicked'})}
-            style={styles.toolbar}
-            subtitle={this.state.actionText}
-            title="Toolbar"
-          />
-          <Text>{this.state.actionText}</Text>
-        </RNTesterBlock>
-        <RNTesterBlock title="Toolbar with logo & custom title view (a View with Switch+Text)">
-          <ToolbarAndroid
-            logo={nativeImageSource({
-              android: 'launcher_icon',
-              width: 132,
-              height: 144,
-            })}
-            style={styles.toolbar}>
-            <View style={styles.switchWrapper}>
-              <Switch
-                value={this.state.toolbarSwitch}
-                onValueChange={value => this.setState({toolbarSwitch: value})}
-              />
-              <Text>{"'Tis but a switch"}</Text>
-            </View>
-          </ToolbarAndroid>
-        </RNTesterBlock>
-        <RNTesterBlock title="Toolbar with no icon">
-          <ToolbarAndroid
-            actions={toolbarActions}
-            style={styles.toolbar}
-            subtitle="There be no icon here"
-          />
-        </RNTesterBlock>
-        <RNTesterBlock title="Toolbar with navIcon & logo, no title">
-          <ToolbarAndroid
-            actions={toolbarActions}
-            logo={nativeImageSource({
-              android: 'launcher_icon',
-              width: 132,
-              height: 144,
-            })}
-            navIcon={nativeImageSource({
-              android: 'ic_menu_black_24dp',
-              width: 48,
-              height: 48,
-            })}
-            style={styles.toolbar}
-          />
-        </RNTesterBlock>
-        <RNTesterBlock title="Toolbar with custom title colors">
-          <ToolbarAndroid
-            navIcon={nativeImageSource({
-              android: 'ic_menu_black_24dp',
-              width: 48,
-              height: 48,
-            })}
-            onIconClicked={() => this.setState({colorProps: {}})}
-            title="Wow, such toolbar"
-            style={styles.toolbar}
-            subtitle="Much native"
-            {...this.state.colorProps}
-          />
-          <Text>
-            Touch the icon to reset the custom colors to the default
-            (theme-provided) ones.
-          </Text>
-        </RNTesterBlock>
-        <RNTesterBlock title="Toolbar with remote logo & navIcon">
-          <ToolbarAndroid
-            actions={[
-              {title: 'Bunny', icon: require('./bunny.png'), show: 'always'},
-            ]}
-            logo={require('./hawk.png')}
-            navIcon={require('./bunny.png')}
-            title="Bunny and Hawk"
-            style={styles.toolbar}
-          />
-        </RNTesterBlock>
-        <RNTesterBlock title="Toolbar with custom overflowIcon">
-          <ToolbarAndroid
-            actions={toolbarActions}
-            overflowIcon={require('./bunny.png')}
-            style={styles.toolbar}
-          />
-        </RNTesterBlock>
-      </RNTesterPage>
-    );
-  }
-
-  _onActionSelected = position => {
-    this.setState({
-      actionText: 'Selected ' + toolbarActions[position].title,
-    });
-  };
-}
-
-const toolbarActions = [
-  {
-    title: 'Create',
-    icon: nativeImageSource({
-      android: 'ic_create_black_48dp',
-      width: 96,
-      height: 96,
-    }),
-    show: 'always',
-  },
-  {title: 'Filter'},
-  {
-    title: 'Settings',
-    icon: nativeImageSource({
-      android: 'ic_settings_black_48dp',
-      width: 96,
-      height: 96,
-    }),
-    show: 'always',
-  },
-];
-
-const styles = StyleSheet.create({
-  toolbar: {
-    backgroundColor: '#e9eaed',
-    height: 56,
-  },
-  switchWrapper: {
-    height: 56,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-});
-
-exports.title = '<ToolbarAndroid>';
-exports.description = 'Examples of using the Android toolbar.';
-exports.examples = [
-  {
-    title: 'Basic toolbar',
-    render: function(): React.Element<typeof ToolbarAndroidExample> {
-      return <ToolbarAndroidExample />;
-    },
-  },
-];

RNTester/js/ToolbarAndroidExample.ios.js

@@ -1,16 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * @flow strict-local
- */
-
-'use strict';
-
-const {View} = require('react-native');
-
-// Not applicable to iOS.
-module.exports = View;