diff --git a/RNTester/js/RNTesterApp.android.js b/RNTester/js/RNTesterApp.android.js
index d3b29152299ed0..e8085c2922d9c3 100644
--- a/RNTester/js/RNTesterApp.android.js
+++ b/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 (
+
+
+ {title}
+
+
+
+
+
+
+
+ );
+};
+
class RNTesterApp extends React.Component {
UNSAFE_componentWillMount() {
BackHandler.addEventListener(
@@ -155,14 +166,11 @@ class RNTesterApp extends React.Component {
} else if (ExampleModule) {
return (
- =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()}
/>
{
return (
- =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}
+ =0.78.0 site=react_native_android_fb) This issue
+ * was found when making Flow check .android.js files. */
+ onPressDrawer={() => this.drawer.openDrawer()}
/>
= [
* 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'),
diff --git a/RNTester/js/ToolbarAndroidExample.android.js b/RNTester/js/ToolbarAndroidExample.android.js
deleted file mode 100644
index 86d0e976c04cf6..00000000000000
--- a/RNTester/js/ToolbarAndroidExample.android.js
+++ /dev/null
@@ -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 (
-
-
- this.setState({actionText: 'Icon clicked'})}
- style={styles.toolbar}
- subtitle={this.state.actionText}
- title="Toolbar"
- />
- {this.state.actionText}
-
-
-
-
- this.setState({toolbarSwitch: value})}
- />
- {"'Tis but a switch"}
-
-
-
-
-
-
-
-
-
-
- this.setState({colorProps: {}})}
- title="Wow, such toolbar"
- style={styles.toolbar}
- subtitle="Much native"
- {...this.state.colorProps}
- />
-
- Touch the icon to reset the custom colors to the default
- (theme-provided) ones.
-
-
-
-
-
-
-
-
-
- );
- }
-
- _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 = '';
-exports.description = 'Examples of using the Android toolbar.';
-exports.examples = [
- {
- title: 'Basic toolbar',
- render: function(): React.Element {
- return ;
- },
- },
-];
diff --git a/RNTester/js/ToolbarAndroidExample.ios.js b/RNTester/js/ToolbarAndroidExample.ios.js
deleted file mode 100644
index 6d1eff69dc8b28..00000000000000
--- a/RNTester/js/ToolbarAndroidExample.ios.js
+++ /dev/null
@@ -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;