diff --git a/Examples/UIExplorer/js/NavigationExperimental/NavigationCardStack-NavigationHeader-Tabs-example.js b/Examples/UIExplorer/js/NavigationExperimental/NavigationCardStack-NavigationHeader-Tabs-example.js
deleted file mode 100644
index 8b6ca53ad82..00000000000
--- a/Examples/UIExplorer/js/NavigationExperimental/NavigationCardStack-NavigationHeader-Tabs-example.js
+++ /dev/null
@@ -1,486 +0,0 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * 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.
-*/
-'use strict';
-
-const NavigationExampleRow = require('./NavigationExampleRow');
-const React = require('react');
-const ReactNative = require('react-native');
-
-/**
- * Basic example that shows how to use to build
- * an app with composite navigation system.
- * @providesModule NavigationCardStack-NavigationHeader-Tabs-example
- */
-
-const {
- Component,
- PropTypes,
-} = React;
-
-const {
- NavigationExperimental,
- ScrollView,
- StyleSheet,
- Text,
- TouchableOpacity,
- View,
-} = ReactNative;
-
-const {
- CardStack: NavigationCardStack,
- Header: NavigationHeader,
- PropTypes: NavigationPropTypes,
- StateUtils: NavigationStateUtils,
-} = NavigationExperimental;
-
-// First Step.
-// Define what app navigation state will look like.
-function createAppNavigationState(): Object {
- return {
- // Three tabs.
- tabs: {
- index: 0,
- routes: [
- {key: 'apple'},
- {key: 'banana'},
- {key: 'orange'},
- ],
- },
- // Scenes for the `apple` tab.
- apple: {
- index: 0,
- routes: [{key: 'Apple Home'}],
- },
- // Scenes for the `banana` tab.
- banana: {
- index: 0,
- routes: [{key: 'Banana Home'}],
- },
- // Scenes for the `orange` tab.
- orange: {
- index: 0,
- routes: [{key: 'Orange Home'}],
- },
- };
-}
-
-// Next step.
-// Define what app navigation state shall be updated.
-function updateAppNavigationState(
- state: Object,
- action: Object,
-): Object {
- let {type} = action;
- if (type === 'BackAction') {
- type = 'pop';
- }
-
- switch (type) {
- case 'push': {
- // Push a route into the scenes stack.
- const route: Object = action.route;
- const {tabs} = state;
- const tabKey = tabs.routes[tabs.index].key;
- const scenes = state[tabKey];
- const nextScenes = NavigationStateUtils.push(scenes, route);
- if (scenes !== nextScenes) {
- return {
- ...state,
- [tabKey]: nextScenes,
- };
- }
- break;
- }
-
- case 'pop': {
- // Pops a route from the scenes stack.
- const {tabs} = state;
- const tabKey = tabs.routes[tabs.index].key;
- const scenes = state[tabKey];
- const nextScenes = NavigationStateUtils.pop(scenes);
- if (scenes !== nextScenes) {
- return {
- ...state,
- [tabKey]: nextScenes,
- };
- }
- break;
- }
-
- case 'selectTab': {
- // Switches the tab.
- const tabKey: string = action.tabKey;
- const tabs = NavigationStateUtils.jumpTo(state.tabs, tabKey);
- if (tabs !== state.tabs) {
- return {
- ...state,
- tabs,
- };
- }
- }
- }
- return state;
-}
-
-// Next step.
-// Defines a helper function that creates a HOC (higher-order-component)
-// which provides a function `navigate` through component props. The
-// `navigate` function will be used to invoke navigation changes.
-// This serves a convenient way for a component to navigate.
-function createAppNavigationContainer(ComponentClass) {
- const key = '_yourAppNavigationContainerNavigateCall';
-
- class Container extends Component {
- static contextTypes = {
- [key]: PropTypes.func,
- };
-
- static childContextTypes = {
- [key]: PropTypes.func.isRequired,
- };
-
- static propTypes = {
- navigate: PropTypes.func,
- };
-
- getChildContext(): Object {
- return {
- [key]: this.context[key] || this.props.navigate,
- };
- }
-
- render(): React.Element {
- const navigate = this.context[key] || this.props.navigate;
- return ;
- }
- }
-
- return Container;
-}
-
-// Next step.
-// Define a component for your application that owns the navigation state.
-class YourApplication extends Component {
-
- static propTypes = {
- onExampleExit: PropTypes.func,
- };
-
- // This sets up the initial navigation state.
- constructor(props, context) {
- super(props, context);
- // This sets up the initial navigation state.
- this.state = createAppNavigationState();
- this._navigate = this._navigate.bind(this);
- }
-
- render(): React.Element {
- // User your own navigator (see next step).
- return (
-
- );
- }
-
- // This public method is optional. If exists, the UI explorer will call it
- // the "back button" is pressed. Normally this is the cases for Android only.
- handleBackAction(): boolean {
- return this._navigate({type: 'pop'});
- }
-
- // This handles the navigation state changes. You're free and responsible
- // to define the API that changes that navigation state. In this exmaple,
- // we'd simply use a `updateAppNavigationState` to update the navigation
- // state.
- _navigate(action: Object): void {
- if (action.type === 'exit') {
- // Exits the example. `this.props.onExampleExit` is provided
- // by the UI Explorer.
- this.props.onExampleExit && this.props.onExampleExit();
- return;
- }
-
- const state = updateAppNavigationState(
- this.state,
- action,
- );
-
- // `updateAppNavigationState` (which uses NavigationStateUtils) gives you
- // back the same `state` if nothing has changed. You could use
- // that to avoid redundant re-rendering.
- if (this.state !== state) {
- this.setState(state);
- }
- }
-}
-
-// Next step.
-// Define your own controlled navigator.
-const YourNavigator = createAppNavigationContainer(class extends Component {
- static propTypes = {
- appNavigationState: PropTypes.shape({
- apple: NavigationPropTypes.navigationState.isRequired,
- banana: NavigationPropTypes.navigationState.isRequired,
- orange: NavigationPropTypes.navigationState.isRequired,
- tabs: NavigationPropTypes.navigationState.isRequired,
- }),
- navigate: PropTypes.func.isRequired,
- };
-
- // This sets up the methods (e.g. Pop, Push) for navigation.
- constructor(props: any, context: any) {
- super(props, context);
- this._back = this._back.bind(this);
- this._renderHeader = this._renderHeader.bind(this);
- this._renderScene = this._renderScene.bind(this);
- }
-
- // Now use the `NavigationCardStack` to render the scenes.
- render(): React.Element {
- const {appNavigationState} = this.props;
- const {tabs} = appNavigationState;
- const tabKey = tabs.routes[tabs.index].key;
- const scenes = appNavigationState[tabKey];
-
- return (
-
-
-
-
- );
- }
-
- // Render the header.
- // The detailed spec of `sceneProps` is defined at `NavigationTypeDefinition`
- // as type `NavigationSceneRendererProps`.
- _renderHeader(sceneProps: Object): React.Element {
- return (
-
- );
- }
-
- // Render a scene for route.
- // The detailed spec of `sceneProps` is defined at `NavigationTypeDefinition`
- // as type `NavigationSceneRendererProps`.
- _renderScene(sceneProps: Object): React.Element {
- return (
-
- );
- }
-
- _back() {
- this.props.navigate({type: 'pop'});
- }
-});
-
-// Next step.
-// Define your own header.
-const YourHeader = createAppNavigationContainer(class extends Component {
- static propTypes = {
- ...NavigationPropTypes.SceneRendererProps,
- navigate: PropTypes.func.isRequired,
- };
-
- constructor(props: Object, context: any) {
- super(props, context);
- this._back = this._back.bind(this);
- this._renderTitleComponent = this._renderTitleComponent.bind(this);
- }
-
- render(): React.Element {
- return (
-
- );
- }
-
- _back(): void {
- this.props.navigate({type: 'pop'});
- }
-
- _renderTitleComponent(props: Object): React.Element {
- return (
-
- {props.scene.route.key}
-
- );
- }
-});
-
-// Next step.
-// Define your own scene.
-const YourScene = createAppNavigationContainer(class extends Component {
- static propTypes = {
- ...NavigationPropTypes.SceneRendererProps,
- navigate: PropTypes.func.isRequired,
- };
-
- constructor(props: Object, context: any) {
- super(props, context);
- this._exit = this._exit.bind(this);
- this._popRoute = this._popRoute.bind(this);
- this._pushRoute = this._pushRoute.bind(this);
- }
-
- render(): React.Element {
- return (
-
-
-
-
-
- );
- }
-
- _pushRoute(): void {
- // Just push a route with a new unique key.
- const route = {key: '[' + this.props.scenes.length + ']-' + Date.now()};
- this.props.navigate({type: 'push', route});
- }
-
- _popRoute(): void {
- this.props.navigate({type: 'pop'});
- }
-
- _exit(): void {
- this.props.navigate({type: 'exit'});
- }
-});
-
-// Next step.
-// Define your own tabs.
-const YourTabs = createAppNavigationContainer(class extends Component {
- static propTypes = {
- navigationState: NavigationPropTypes.navigationState.isRequired,
- navigate: PropTypes.func.isRequired,
- };
-
- constructor(props: Object, context: any) {
- super(props, context);
- }
-
- render(): React.Element {
- return (
-
- {this.props.navigationState.routes.map(this._renderTab, this)}
-
- );
- }
-
- _renderTab(route: Object, index: number): React.Element {
- return (
-
- );
- }
-});
-
-// Next step.
-// Define your own Tab
-const YourTab = createAppNavigationContainer(class extends Component {
-
- static propTypes = {
- navigate: PropTypes.func.isRequired,
- route: NavigationPropTypes.navigationRoute.isRequired,
- selected: PropTypes.bool.isRequired,
- };
-
- constructor(props: Object, context: any) {
- super(props, context);
- this._onPress = this._onPress.bind(this);
- }
-
- render(): React.Element {
- const style = [styles.tabText];
- if (this.props.selected) {
- style.push(styles.tabSelected);
- }
- return (
-
-
- {this.props.route.key}
-
-
- );
- }
-
- _onPress() {
- this.props.navigate({type: 'selectTab', tabKey: this.props.route.key});
- }
-});
-
-const styles = StyleSheet.create({
- navigator: {
- flex: 1,
- },
- navigatorCardStack: {
- flex: 20,
- },
- tabs: {
- flex: 1,
- flexDirection: 'row',
- },
- tab: {
- alignItems: 'center',
- backgroundColor: '#fff',
- flex: 1,
- justifyContent: 'center',
- },
- tabText: {
- color: '#222',
- fontWeight: '500',
- },
- tabSelected: {
- color: 'blue',
- },
-});
-
-module.exports = YourApplication;
diff --git a/Examples/UIExplorer/js/NavigationExperimental/NavigationCardStack-NoGesture-example.js b/Examples/UIExplorer/js/NavigationExperimental/NavigationCardStack-NoGesture-example.js
deleted file mode 100644
index 4d62aaa9fbd..00000000000
--- a/Examples/UIExplorer/js/NavigationExperimental/NavigationCardStack-NoGesture-example.js
+++ /dev/null
@@ -1,198 +0,0 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * 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.
- *
- * @providesModule NavigationCardStack-NoGesture-example
- */
-'use strict';
-
-const NavigationExampleRow = require('./NavigationExampleRow');
-const React = require('react');
-const ReactNative = require('react-native');
-
-/**
- * Basic example that shows how to use to build
- * an app with controlled navigation system but without gestures.
- */
-const {
- NavigationExperimental,
- ScrollView,
- StyleSheet,
-} = ReactNative;
-
-const {
- CardStack: NavigationCardStack,
- StateUtils: NavigationStateUtils,
-} = NavigationExperimental;
-
-// Step 1:
-// Define a component for your application.
-class YourApplication extends React.Component {
-
- // This sets up the initial navigation state.
- constructor(props, context) {
- super(props, context);
-
- this.state = {
- // This defines the initial navigation state.
- navigationState: {
- index: 0, // starts with first route focused.
- routes: [{key: 'Welcome'}], // starts with only one route.
- },
- };
-
- this._exit = this._exit.bind(this);
- this._onNavigationChange = this._onNavigationChange.bind(this);
- }
-
- // User your own navigator (see Step 2).
- render(): React.Element {
- return (
-
- );
- }
-
- // This handles the navigation state changes. You're free and responsible
- // to define the API that changes that navigation state. In this exmaple,
- // we'd simply use a `function(type: string)` to update the navigation state.
- _onNavigationChange(type: string): void {
- let {navigationState} = this.state;
- switch (type) {
- case 'push':
- // push a new route.
- const route = {key: 'route-' + Date.now()};
- navigationState = NavigationStateUtils.push(navigationState, route);
- break;
-
- case 'pop':
- navigationState = NavigationStateUtils.pop(navigationState);
- break;
- }
-
- // NavigationStateUtils gives you back the same `navigationState` if nothing
- // has changed. You could use that to avoid redundant re-rendering.
- if (this.state.navigationState !== navigationState) {
- this.setState({navigationState});
- }
- }
-
- // Exits the example. `this.props.onExampleExit` is provided
- // by the UI Explorer.
- _exit(): void {
- this.props.onExampleExit && this.props.onExampleExit();
- }
-
- // This public method is optional. If exists, the UI explorer will call it
- // the "back button" is pressed. Normally this is the cases for Android only.
- handleBackAction(): boolean {
- return this._onNavigationChange('pop');
- }
-}
-
-// Step 2:
-// Define your own controlled navigator.
-//
-// +------------+
-// +-+ |
-// +-+ | |
-// | | | |
-// | | | Active |
-// | | | Scene |
-// | | | |
-// +-+ | |
-// +-+ |
-// +------------+
-//
-class YourNavigator extends React.Component {
-
- // This sets up the methods (e.g. Pop, Push) for navigation.
- constructor(props: any, context: any) {
- super(props, context);
-
- this._onPushRoute = this.props.onNavigationChange.bind(null, 'push');
- this._onPopRoute = this.props.onNavigationChange.bind(null, 'pop');
-
- this._renderScene = this._renderScene.bind(this);
- }
-
- // Now use the `NavigationCardStack` to render the scenes.
- render(): React.Element {
- return (
-
- );
- }
-
- // Render a scene for route.
- // The detailed spec of `sceneProps` is defined at `NavigationTypeDefinition`
- // as type `NavigationSceneRendererProps`.
- _renderScene(sceneProps: Object): React.Element {
- return (
-
- );
- }
-}
-
-// Step 3:
-// Define your own scene.
-class YourScene extends React.Component {
- render() {
- return (
-
-
-
-
-
-
- );
- }
-}
-
-const styles = StyleSheet.create({
- navigator: {
- flex: 1,
- },
-});
-
-module.exports = YourApplication;
diff --git a/Examples/UIExplorer/js/NavigationExperimental/NavigationCardStack-example.js b/Examples/UIExplorer/js/NavigationExperimental/NavigationCardStack-example.js
deleted file mode 100644
index 1029644a026..00000000000
--- a/Examples/UIExplorer/js/NavigationExperimental/NavigationCardStack-example.js
+++ /dev/null
@@ -1,196 +0,0 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * 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.
- * @providesModule NavigationCardStack-example
- */
-'use strict';
-
-const NavigationExampleRow = require('./NavigationExampleRow');
-const React = require('react');
-const ReactNative = require('react-native');
-
-/**
- * Basic example that shows how to use to build
- * an app with controlled navigation system.
- */
-const {
- NavigationExperimental,
- ScrollView,
- StyleSheet,
-} = ReactNative;
-
-const {
- CardStack: NavigationCardStack,
- StateUtils: NavigationStateUtils,
-} = NavigationExperimental;
-
-// Step 1:
-// Define a component for your application.
-class YourApplication extends React.Component {
-
- // This sets up the initial navigation state.
- constructor(props, context) {
- super(props, context);
-
- this.state = {
- // This defines the initial navigation state.
- navigationState: {
- index: 0, // starts with first route focused.
- routes: [{key: 'Welcome'}], // starts with only one route.
- },
- };
-
- this._exit = this._exit.bind(this);
- this._onNavigationChange = this._onNavigationChange.bind(this);
- }
-
- // User your own navigator (see Step 2).
- render(): React.Element {
- return (
-
- );
- }
-
- // This handles the navigation state changes. You're free and responsible
- // to define the API that changes that navigation state. In this exmaple,
- // we'd simply use a `function(type: string)` to update the navigation state.
- _onNavigationChange(type: string): void {
- let {navigationState} = this.state;
- switch (type) {
- case 'push':
- // push a new route.
- const route = {key: 'route-' + Date.now()};
- navigationState = NavigationStateUtils.push(navigationState, route);
- break;
-
- case 'pop':
- navigationState = NavigationStateUtils.pop(navigationState);
- break;
- }
-
- // NavigationStateUtils gives you back the same `navigationState` if nothing
- // has changed. You could use that to avoid redundant re-rendering.
- if (this.state.navigationState !== navigationState) {
- this.setState({navigationState});
- }
- }
-
- // Exits the example. `this.props.onExampleExit` is provided
- // by the UI Explorer.
- _exit(): void {
- this.props.onExampleExit && this.props.onExampleExit();
- }
-
- // This public method is optional. If exists, the UI explorer will call it
- // the "back button" is pressed. Normally this is the cases for Android only.
- handleBackAction(): boolean {
- return this._onNavigationChange('pop');
- }
-}
-
-// Step 2:
-// Define your own controlled navigator.
-//
-// +------------+
-// +-+ |
-// +-+ | |
-// | | | |
-// | | | Active |
-// | | | Scene |
-// | | | |
-// +-+ | |
-// +-+ |
-// +------------+
-//
-class YourNavigator extends React.Component {
-
- // This sets up the methods (e.g. Pop, Push) for navigation.
- constructor(props: any, context: any) {
- super(props, context);
-
- this._onPushRoute = this.props.onNavigationChange.bind(null, 'push');
- this._onPopRoute = this.props.onNavigationChange.bind(null, 'pop');
-
- this._renderScene = this._renderScene.bind(this);
- }
-
- // Now use the `NavigationCardStack` to render the scenes.
- render(): React.Element {
- return (
-
- );
- }
-
- // Render a scene for route.
- // The detailed spec of `sceneProps` is defined at `NavigationTypeDefinition`
- // as type `NavigationSceneRendererProps`.
- _renderScene(sceneProps: Object): React.Element {
- return (
-
- );
- }
-}
-
-// Step 3:
-// Define your own scene.
-class YourScene extends React.Component {
- render() {
- return (
-
-
-
-
-
-
- );
- }
-}
-
-const styles = StyleSheet.create({
- navigator: {
- flex: 1,
- },
-});
-
-module.exports = YourApplication;
diff --git a/Examples/UIExplorer/js/NavigationExperimental/NavigationExampleRow.js b/Examples/UIExplorer/js/NavigationExperimental/NavigationExampleRow.js
deleted file mode 100644
index 5faf80427b6..00000000000
--- a/Examples/UIExplorer/js/NavigationExperimental/NavigationExampleRow.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * 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.
- * @providesModule NavigationExampleRow
- */
-'use strict';
-
-var React = require('react');
-var ReactNative = require('react-native');
-var {
- Text,
- PixelRatio,
- StyleSheet,
- View,
- TouchableHighlight,
-} = ReactNative;
-
-class NavigationExampleRow extends React.Component {
- render() {
- if (this.props.onPress) {
- return (
-
-
- {this.props.text}
-
-
- );
- }
- return (
-
-
- {this.props.text}
-
-
- );
- }
-}
-
-const styles = StyleSheet.create({
- row: {
- padding: 15,
- backgroundColor: 'white',
- borderBottomWidth: 1 / PixelRatio.get(),
- borderBottomColor: '#CDCDCD',
- },
- rowText: {
- fontSize: 17,
- },
- buttonText: {
- fontSize: 17,
- fontWeight: '500',
- },
-});
-
-module.exports = NavigationExampleRow;
diff --git a/Examples/UIExplorer/js/NavigationExperimental/NavigationExperimentalExample.js b/Examples/UIExplorer/js/NavigationExperimental/NavigationExperimentalExample.js
deleted file mode 100644
index 8b6da3af024..00000000000
--- a/Examples/UIExplorer/js/NavigationExperimental/NavigationExperimentalExample.js
+++ /dev/null
@@ -1,153 +0,0 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * 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.
- * @providesModule NavigationExperimentalExample
- */
-'use strict';
-
-const AsyncStorage = require('AsyncStorage');
-const NavigationExampleRow = require('./NavigationExampleRow');
-const React = require('react');
-const ScrollView = require('ScrollView');
-const StyleSheet = require('StyleSheet');
-const View = require('View');
-
-/*
- * Heads up! This file is not the real navigation example- only a utility to switch between them.
- *
- * To learn how to use the Navigation API, take a look at the following example files:
- */
-const EXAMPLES = {
- 'CardStack + Header + Tabs Example': require('./NavigationCardStack-NavigationHeader-Tabs-example'),
- 'CardStack Example': require('./NavigationCardStack-example'),
- 'CardStack Without Gestures Example': require('./NavigationCardStack-NoGesture-example'),
- 'Transitioner + Animated View Example': require('./NavigationTransitioner-AnimatedView-example'),
- 'Transitioner + Animated View Pager Example': require('./NavigationTransitioner-AnimatedView-pager-example'),
-};
-
-const EXAMPLE_STORAGE_KEY = 'NavigationExperimentalExample';
-
-class NavigationExperimentalExample extends React.Component {
- static title = 'Navigation (Experimental)';
- static description = 'Upcoming navigation APIs and animated navigation views';
- static external = true;
-
- state = {
- example: null,
- };
-
- componentDidMount() {
- AsyncStorage.getItem(EXAMPLE_STORAGE_KEY, (err, example) => {
- if (err || !example || !EXAMPLES[example]) {
- this.setState({
- example: 'menu',
- });
- return;
- }
- this.setState({
- example,
- });
- });
- }
-
- setExample = (example) => {
- this.setState({
- example,
- });
- AsyncStorage.setItem(EXAMPLE_STORAGE_KEY, example);
- };
-
- _renderMenu = () => {
- let exitRow = null;
- if (this.props.onExampleExit) {
- exitRow = (
-
- );
- }
- return (
-
-
- {this._renderExampleList()}
- {exitRow}
-
-
- );
- };
-
- _renderExampleList = () => {
- return Object.keys(EXAMPLES).map(exampleName => (
- {
- this.setExample(exampleName);
- }}
- />
- ));
- };
-
- _exitInnerExample = () => {
- this.setExample('menu');
- };
-
- handleBackAction = () => {
- const wasHandledByExample = (
- this.exampleRef &&
- this.exampleRef.handleBackAction &&
- this.exampleRef.handleBackAction()
- );
- if (wasHandledByExample) {
- return true;
- }
- if (this.state.example && this.state.example !== 'menu') {
- this._exitInnerExample();
- return true;
- }
- return false;
- };
-
- render() {
- if (this.state.example === 'menu') {
- return this._renderMenu();
- }
- if (EXAMPLES[this.state.example]) {
- const Component = EXAMPLES[this.state.example];
- return (
- { this.exampleRef = exampleRef; }}
- />
- );
- }
- return null;
- }
-}
-
-const styles = StyleSheet.create({
- menu: {
- backgroundColor: '#E9E9EF',
- flex: 1,
- marginTop: 20,
- },
-});
-
-module.exports = NavigationExperimentalExample;
diff --git a/Examples/UIExplorer/js/NavigationExperimental/NavigationTransitioner-AnimatedView-example.js b/Examples/UIExplorer/js/NavigationExperimental/NavigationTransitioner-AnimatedView-example.js
deleted file mode 100644
index b408251c0f7..00000000000
--- a/Examples/UIExplorer/js/NavigationExperimental/NavigationTransitioner-AnimatedView-example.js
+++ /dev/null
@@ -1,256 +0,0 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * 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.
- *
- * @flow
- * @providesModule NavigationTransitioner-AnimatedView-example
- */
-'use strict';
-
-const NavigationExampleRow = require('./NavigationExampleRow');
-const React = require('react');
-const ReactNative = require('react-native');
-
-/**
- * Basic example that shows how to use and
- * to build a stack of animated scenes that render the
- * navigation state.
- */
-
-
-import type {
- NavigationSceneRendererProps,
- NavigationState,
- NavigationTransitionProps,
- NavigationTransitionSpec,
-} from 'NavigationTypeDefinition';
-
-const {
- Component,
- PropTypes,
-} = React;
-
-const {
- Animated,
- Easing,
- NavigationExperimental,
- ScrollView,
- StyleSheet,
-} = ReactNative;
-
-const {
- PropTypes: NavigationPropTypes,
- StateUtils: NavigationStateUtils,
- Transitioner: NavigationTransitioner,
-} = NavigationExperimental;
-
-function reducer(state: ?NavigationState, action: any): NavigationState {
- if (!state) {
- return {
- index: 0,
- routes: [{key: 'route-1'}],
- };
- }
-
- switch (action) {
- case 'push':
- const route = {key: 'route-' + (state.routes.length + 1)};
- return NavigationStateUtils.push(state, route);
- case 'pop':
- return NavigationStateUtils.pop(state);
- }
- return state;
-}
-
-class Example extends Component {
- state: NavigationState;
- constructor(props: any, context: any) {
- super(props, context);
- this.state = reducer();
- }
-
- render(): React.Element {
- return (
- this._navigate(action)}
- />
- );
- }
-
- _navigate(action: any): boolean {
- if (action === 'exit') {
- // Exits the example. `this.props.onExampleExit` is provided
- // by the UI Explorer.
- this.props.onExampleExit && this.props.onExampleExit();
- return false;
- }
-
- const state = reducer(this.state, action);
- if (state === this.state) {
- return false;
- }
-
- this.setState(state);
- return true;
- }
-
- // This public method is optional. If exists, the UI explorer will call it
- // the "back button" is pressed. Normally this is the cases for Android only.
- handleBackAction(): boolean {
- return this._navigate('pop');
- }
-}
-
-class ExampleNavigator extends Component {
- props: {
- navigate: Function,
- navigationState: NavigationState,
- };
-
- static propTypes: {
- navigationState: NavigationPropTypes.navigationState.isRequired,
- navigate: PropTypes.func.isRequired,
- };
-
- render(): React.Element {
- return (
- this._render(transitionProps)}
- configureTransition={this._configureTransition}
- />
- );
- }
-
- _render(
- transitionProps: NavigationTransitionProps,
- ): Array> {
- return transitionProps.scenes.map((scene) => {
- const sceneProps = {
- ...transitionProps,
- scene,
- };
- return this._renderScene(sceneProps);
- });
- }
-
- _renderScene(
- sceneProps: NavigationSceneRendererProps,
- ): React.Element {
- return (
-
- );
- }
-
- _configureTransition(): NavigationTransitionSpec {
- const easing: any = Easing.inOut(Easing.ease);
- return {
- duration: 500,
- easing,
- };
- }
-}
-
-class ExampleScene extends Component {
- props: NavigationSceneRendererProps & {
- navigate: Function,
- };
-
- static propTypes = {
- ...NavigationPropTypes.SceneRendererProps,
- navigate: PropTypes.func.isRequired,
- };
-
- render(): React.Element {
- const {scene, navigate} = this.props;
- return (
-
-
-
- navigate('push')}
- />
- navigate('pop')}
- />
- navigate('exit')}
- />
-
-
- );
- }
-
- _getAnimatedStyle(): Object {
- const {
- layout,
- position,
- scene,
- } = this.props;
-
- const {
- index,
- } = scene;
-
- const inputRange = [index - 1, index, index + 1];
- const width = layout.initWidth;
- const translateX = position.interpolate({
- inputRange,
- outputRange: ([width, 0, -10]: Array),
- });
-
- return {
- transform: [
- { translateX },
- ],
- };
- }
-}
-
-const styles = StyleSheet.create({
- scene: {
- backgroundColor: '#E9E9EF',
- bottom: 0,
- flex: 1,
- left: 0,
- position: 'absolute',
- right: 0,
- shadowColor: 'black',
- shadowOffset: {width: 0, height: 0},
- shadowOpacity: 0.4,
- shadowRadius: 10,
- top: 0,
- },
- scrollView: {
- flex: 1,
- },
-});
-
-module.exports = Example;
diff --git a/Examples/UIExplorer/js/NavigationExperimental/NavigationTransitioner-AnimatedView-pager-example.js b/Examples/UIExplorer/js/NavigationExperimental/NavigationTransitioner-AnimatedView-pager-example.js
deleted file mode 100644
index 755a9b2df0c..00000000000
--- a/Examples/UIExplorer/js/NavigationExperimental/NavigationTransitioner-AnimatedView-pager-example.js
+++ /dev/null
@@ -1,265 +0,0 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * 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.
- *
- * @flow
- * @providesModule NavigationTransitioner-AnimatedView-pager-example
- */
-'use strict';
-
-const NavigationExampleRow = require('./NavigationExampleRow');
-const React = require('react');
-const ReactNative = require('react-native');
-
-/**
- * Basic example that shows how to use and
- * to build a list of animated scenes that render the
- * navigation state.
- */
-
-import type {
- NavigationSceneRendererProps,
- NavigationState,
- NavigationTransitionProps,
-} from 'NavigationTypeDefinition';
-
-const {
- Component,
- PropTypes,
-} = React;
-
-const {
- Animated,
- NavigationExperimental,
- StyleSheet,
- Text,
- View,
-} = ReactNative;
-
-const {
- PropTypes: NavigationPropTypes,
- StateUtils: NavigationStateUtils,
- Transitioner: NavigationTransitioner,
- Card: NavigationCard,
-} = NavigationExperimental;
-
-const {
- PagerPanResponder: NavigationPagerPanResponder,
- PagerStyleInterpolator: NavigationPagerStyleInterpolator,
-} = NavigationCard;
-
-function reducer(state: ?NavigationState, action: any): NavigationState {
- if (!state) {
- return {
- index: 0,
- routes: [
- {key: 'Step 1', color: '#ff0000'},
- {key: 'Step 2', color: '#ff7f00'},
- {key: 'Step 3', color: '#ffff00'},
- {key: 'Step 4', color: '#00ff00'},
- {key: 'Step 5', color: '#0000ff'},
- {key: 'Step 6', color: '#4b0082'},
- {key: 'Step 7', color: '#8f00ff'},
- ],
- };
- }
-
- switch (action) {
- case 'back':
- return NavigationStateUtils.back(state);
- case 'forward':
- return NavigationStateUtils.forward(state);
- }
- return state;
-}
-
-class Example extends Component {
- state: NavigationState;
- constructor(props: any, context: any) {
- super(props, context);
- this.state = reducer();
- }
-
- render(): React.Element {
- return (
-
- this._navigate(action)}
- />
- this._navigate('exit')}
- />
-
- );
- }
-
- _navigate(action: string): boolean {
- if (action === 'exit') {
- // Exits the example. `this.props.onExampleExit` is provided
- // by the UI Explorer.
- this.props.onExampleExit && this.props.onExampleExit();
- return false;
- }
-
- const state = reducer(this.state, action);
- if (state === this.state) {
- return false;
- }
-
- this.setState(state);
- return true;
- }
-
- // This public method is optional. If exists, the UI explorer will call it
- // the "back button" is pressed. Normally this is the cases for Android only.
- handleBackAction(): boolean {
- return this._navigate('back');
- }
-}
-
-class ExampleNavigator extends Component {
- _render: Function;
- _renderScene: Function;
-
- props: {
- navigate: Function,
- navigationState: NavigationState,
- };
-
- static propTypes: {
- navigationState: NavigationPropTypes.navigationState.isRequired,
- navigate: PropTypes.func.isRequired,
- };
-
- constructor(props, context) {
- super(props, context);
- this._render = this._render.bind(this);
- this._renderScene = this._renderScene.bind(this);
- }
-
- render(): React.Element {
- return (
-
- );
- }
-
- _render(
- transitionProps: NavigationTransitionProps,
- ): React.Element {
- const scenes = transitionProps.scenes.map((scene) => {
- const sceneProps = {
- ...transitionProps,
- scene,
- };
- return this._renderScene(sceneProps);
- });
- return (
-
- {scenes}
-
- );
- }
-
- _renderScene(
- sceneProps: NavigationSceneRendererProps,
- ): React.Element {
- return (
-
- );
- }
-}
-
-class ExampleScene extends Component {
- props: NavigationSceneRendererProps & {
- navigate: Function,
- };
-
- static propTypes = {
- ...NavigationPropTypes.SceneRendererProps,
- navigate: PropTypes.func.isRequired,
- };
-
- render(): React.Element {
- const {scene, navigate} = this.props;
-
- const panHandlers = NavigationPagerPanResponder.forHorizontal({
- ...this.props,
- onNavigateBack: () => navigate('back'),
- onNavigateForward: () => navigate('forward'),
- });
-
- const route: any = scene.route;
- const style = [
- styles.scene,
- {backgroundColor: route.color},
- NavigationPagerStyleInterpolator.forHorizontal(this.props),
- ];
-
- return (
-
-
-
- {scene.route.key}
-
-
-
- );
- }
-}
-
-const styles = StyleSheet.create({
- example: {
- flex: 1,
- },
- navigator: {
- flex: 1,
- },
- scene: {
- backgroundColor: '#000',
- bottom: 0,
- flex: 1,
- left: 0,
- position: 'absolute',
- right: 0,
- top: 0,
- },
- heading: {
- alignItems : 'center',
- flex: 1,
- justifyContent: 'center',
- },
- headingText: {
- color: '#222',
- fontSize: 24,
- fontWeight: 'bold',
- },
-});
-
-module.exports = Example;
diff --git a/Examples/UIExplorer/js/UIExplorerList.android.js b/Examples/UIExplorer/js/UIExplorerList.android.js
index a5ac35b1a33..09d81eb19c4 100644
--- a/Examples/UIExplorer/js/UIExplorerList.android.js
+++ b/Examples/UIExplorer/js/UIExplorerList.android.js
@@ -192,10 +192,6 @@ const APIExamples: Array = [
key: 'NativeAnimationsExample',
module: require('./NativeAnimationsExample'),
},
- {
- key: 'NavigationExperimentalExample',
- module: require('./NavigationExperimental/NavigationExperimentalExample'),
- },
{
key: 'NetInfoExample',
module: require('./NetInfoExample'),
diff --git a/Examples/UIExplorer/js/UIExplorerList.ios.js b/Examples/UIExplorer/js/UIExplorerList.ios.js
index 0c130d74fff..e628c5fe6e0 100644
--- a/Examples/UIExplorer/js/UIExplorerList.ios.js
+++ b/Examples/UIExplorer/js/UIExplorerList.ios.js
@@ -298,11 +298,6 @@ const APIExamples: Array = [
module: require('./NativeAnimationsExample'),
supportsTVOS: true,
},
- {
- key: 'NavigationExperimentalExample',
- module: require('./NavigationExperimental/NavigationExperimentalExample'),
- supportsTVOS: true,
- },
{
key: 'NetInfoExample',
module: require('./NetInfoExample'),