diff --git a/js/NavigatorIOSBarStyleExample.js b/js/NavigatorIOSBarStyleExample.js deleted file mode 100644 index 07ca90edc05..00000000000 --- a/js/NavigatorIOSBarStyleExample.js +++ /dev/null @@ -1,84 +0,0 @@ -/** - * Copyright (c) 2013-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * The examples provided by Facebook are for non-commercial testing and - * evaluation purposes only. - * - * Facebook reserves all rights not expressly granted. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS - * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL - * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN - * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN - * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. - * - * @format - */ - -'use strict'; - -var React = require('react'); -var ReactNative = require('react-native'); -var {NavigatorIOS, StatusBar, StyleSheet, Text, View} = ReactNative; - -class EmptyPage extends React.Component<{ - text: string, -}> { - render() { - return ( - - {this.props.text} - - ); - } -} - -class NavigatorIOSColors extends React.Component<{}> { - static title = ' - Custom Bar Style'; - static description = 'iOS navigation with custom nav bar colors'; - - render() { - // Set StatusBar with light contents to get better contrast - StatusBar.setBarStyle('light-content'); - - return ( - ', - rightButtonTitle: 'Done', - onRightButtonPress: () => { - StatusBar.setBarStyle('default'); - this.props.onExampleExit(); - }, - passProps: { - text: 'The nav bar is black with barStyle prop.', - }, - }} - barStyle="black" - /> - ); - } -} - -var styles = StyleSheet.create({ - container: { - flex: 1, - }, - emptyPage: { - flex: 1, - paddingTop: 64, - }, - emptyPageText: { - margin: 10, - }, -}); - -NavigatorIOSColors.external = true; - -module.exports = NavigatorIOSColors; diff --git a/js/NavigatorIOSColorsExample.js b/js/NavigatorIOSColorsExample.js deleted file mode 100644 index d9a7cbb29e0..00000000000 --- a/js/NavigatorIOSColorsExample.js +++ /dev/null @@ -1,75 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - */ - -'use strict'; - -var React = require('react'); -var ReactNative = require('react-native'); -var {NavigatorIOS, StatusBar, StyleSheet, Text, View} = ReactNative; - -class EmptyPage extends React.Component { - render() { - return ( - - {this.props.text} - - ); - } -} - -class NavigatorIOSColors extends React.Component { - static title = ' - Custom Colors'; - static description = 'iOS navigation with custom nav bar colors'; - - render() { - // Set StatusBar with light contents to get better contrast - StatusBar.setBarStyle('light-content'); - - return ( - ', - rightButtonTitle: 'Done', - onRightButtonPress: () => { - StatusBar.setBarStyle('default'); - this.props.onExampleExit(); - }, - passProps: { - text: - 'The nav bar has custom colors with tintColor, ' + - 'barTintColor and titleTextColor props.', - }, - }} - tintColor="#FFFFFF" - barTintColor="#183E63" - titleTextColor="#FFFFFF" - translucent={true} - /> - ); - } -} - -var styles = StyleSheet.create({ - container: { - flex: 1, - }, - emptyPage: { - flex: 1, - paddingTop: 64, - }, - emptyPageText: { - margin: 10, - }, -}); - -NavigatorIOSColors.external = true; - -module.exports = NavigatorIOSColors; diff --git a/js/NavigatorIOSExample.js b/js/NavigatorIOSExample.js deleted file mode 100644 index 252bf0e9e96..00000000000 --- a/js/NavigatorIOSExample.js +++ /dev/null @@ -1,303 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * - * 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 ReactNative = require('react-native'); -const ViewExample = require('./ViewExample'); - -const createExamplePage = require('./createExamplePage'); -const nativeImageSource = require('nativeImageSource'); -const { - AlertIOS, - NavigatorIOS, - ScrollView, - StyleSheet, - Text, - TouchableHighlight, - View, -} = ReactNative; - -class EmptyPage extends React.Component<$FlowFixMeProps> { - render() { - return ( - - {this.props.text} - - ); - } -} - -class NavigatorIOSExamplePage extends React.Component<$FlowFixMeProps> { - render() { - var recurseTitle = 'Recurse Navigation'; - if (!this.props.depth || this.props.depth === 1) { - recurseTitle += ' - more examples here'; - } - return ( - - - - {this._renderRow(recurseTitle, () => { - this.props.navigator.push({ - title: NavigatorIOSExample.title, - component: NavigatorIOSExamplePage, - backButtonTitle: 'Custom Back', - passProps: {depth: this.props.depth ? this.props.depth + 1 : 1}, - }); - })} - {this._renderRow('Push View Example', () => { - this.props.navigator.push({ - title: 'Very Long Custom View Example Title', - component: createExamplePage(null, ViewExample), - }); - })} - {this._renderRow('Custom title image Example', () => { - this.props.navigator.push({ - title: 'Custom title image Example', - titleImage: require('./relay.png'), - component: createExamplePage(null, ViewExample), - }); - })} - {this._renderRow('Custom Right Button', () => { - this.props.navigator.push({ - title: NavigatorIOSExample.title, - component: EmptyPage, - rightButtonTitle: 'Cancel', - onRightButtonPress: () => this.props.navigator.pop(), - passProps: { - text: 'This page has a right button in the nav bar', - }, - }); - })} - {this._renderRow('Custom Right System Button', () => { - this.props.navigator.push({ - title: NavigatorIOSExample.title, - component: EmptyPage, - rightButtonSystemIcon: 'bookmarks', - onRightButtonPress: () => this.props.navigator.pop(), - passProps: { - text: 'This page has a right system button in the nav bar', - }, - }); - })} - {this._renderRow('Custom Left & Right Icons', () => { - this.props.navigator.push({ - title: NavigatorIOSExample.title, - component: EmptyPage, - leftButtonTitle: 'Custom Left', - onLeftButtonPress: () => this.props.navigator.pop(), - rightButtonIcon: nativeImageSource({ - ios: 'NavBarButtonPlus', - width: 17, - height: 17, - }), - onRightButtonPress: () => { - AlertIOS.alert( - 'Bar Button Action', - 'Recognized a tap on the bar button icon', - [ - { - text: 'OK', - onPress: () => console.log('Tapped OK'), - }, - ], - ); - }, - passProps: { - text: - 'This page has an icon for the right button in the nav bar', - }, - }); - })} - {this._renderRow('Custom Left & Right System Icons', () => { - this.props.navigator.push({ - title: NavigatorIOSExample.title, - component: EmptyPage, - leftButtonSystemIcon: 'cancel', - onLeftButtonPress: () => this.props.navigator.pop(), - rightButtonSystemIcon: 'search', - onRightButtonPress: () => { - AlertIOS.alert( - 'Bar Button Action', - 'Recognized a tap on the bar button icon', - [ - { - text: 'OK', - onPress: () => console.log('Tapped OK'), - }, - ], - ); - }, - passProps: { - text: - 'This page has an icon for the right button in the nav bar', - }, - }); - })} - {this._renderRow('Pop', () => { - this.props.navigator.pop(); - })} - {this._renderRow('Pop to top', () => { - this.props.navigator.popToTop(); - })} - {this._renderReplace()} - {this._renderReplacePrevious()} - {this._renderReplacePreviousAndPop()} - {this._renderRow( - 'Exit NavigatorIOS Example', - this.props.onExampleExit, - )} - - - - ); - } - - _renderReplace = () => { - if (!this.props.depth) { - // this is to avoid replacing the top of the stack - return null; - } - return this._renderRow('Replace here', () => { - var prevRoute = this.props.route; - this.props.navigator.replace({ - title: 'New Navigation', - component: EmptyPage, - rightButtonTitle: 'Undo', - onRightButtonPress: () => this.props.navigator.replace(prevRoute), - passProps: { - text: - 'The component is replaced, but there is currently no ' + - 'way to change the right button or title of the current route', - }, - }); - }); - }; - - _renderReplacePrevious = () => { - if (!this.props.depth || this.props.depth < 2) { - // this is to avoid replacing the top of the stack - return null; - } - return this._renderRow('Replace previous', () => { - this.props.navigator.replacePrevious({ - title: 'Replaced', - component: EmptyPage, - passProps: { - text: 'This is a replaced "previous" page', - }, - wrapperStyle: styles.customWrapperStyle, - }); - }); - }; - - _renderReplacePreviousAndPop = () => { - if (!this.props.depth || this.props.depth < 2) { - // this is to avoid replacing the top of the stack - return null; - } - return this._renderRow('Replace previous and pop', () => { - this.props.navigator.replacePreviousAndPop({ - title: 'Replaced and Popped', - component: EmptyPage, - passProps: { - text: 'This is a replaced "previous" page', - }, - wrapperStyle: styles.customWrapperStyle, - }); - }); - }; - - _renderRow = (title: string, onPress: Function) => { - return ( - - - - {title} - - - - - ); - }; -} - -class NavigatorIOSExample extends React.Component<$FlowFixMeProps> { - static title = ''; - static description = 'iOS navigation capabilities'; - static external = true; - - render() { - const {onExampleExit} = this.props; - return ( - - ); - } -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - }, - customWrapperStyle: { - backgroundColor: '#bbdddd', - }, - emptyPage: { - flex: 1, - paddingTop: 64, - }, - emptyPageText: { - margin: 10, - }, - list: { - backgroundColor: '#eeeeee', - marginTop: 10, - }, - group: { - backgroundColor: 'white', - }, - groupSpace: { - height: 15, - }, - line: { - backgroundColor: '#bbbbbb', - height: StyleSheet.hairlineWidth, - }, - row: { - backgroundColor: 'white', - justifyContent: 'center', - paddingHorizontal: 15, - paddingVertical: 15, - }, - separator: { - height: StyleSheet.hairlineWidth, - backgroundColor: '#bbbbbb', - marginLeft: 15, - }, - rowNote: { - fontSize: 17, - }, - rowText: { - fontSize: 17, - fontWeight: '500', - }, -}); - -module.exports = NavigatorIOSExample; diff --git a/js/RNTesterList.ios.js b/js/RNTesterList.ios.js index f7a62efaa05..bd717ea7def 100644 --- a/js/RNTesterList.ios.js +++ b/js/RNTesterList.ios.js @@ -92,21 +92,6 @@ const ComponentExamples: Array = [ module: require('./MultiColumnExample'), supportsTVOS: true, }, - { - key: 'NavigatorIOSColorsExample', - module: require('./NavigatorIOSColorsExample'), - supportsTVOS: false, - }, - { - key: 'NavigatorIOSBarStyleExample', - module: require('./NavigatorIOSBarStyleExample'), - supportsTVOS: false, - }, - { - key: 'NavigatorIOSExample', - module: require('./NavigatorIOSExample'), - supportsTVOS: true, - }, { key: 'PickerExample', module: require('./PickerExample'),