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;