diff --git a/Examples/UIExplorer/js/UIExplorerApp.android.js b/Examples/UIExplorer/js/UIExplorerApp.android.js
index bd9f03ab47d..d2331402aec 100644
--- a/Examples/UIExplorer/js/UIExplorerApp.android.js
+++ b/Examples/UIExplorer/js/UIExplorerApp.android.js
@@ -33,6 +33,7 @@ const React = require('react');
const StatusBar = require('StatusBar');
const StyleSheet = require('StyleSheet');
const ToolbarAndroid = require('ToolbarAndroid');
+const UIExplorerExampleContainer = require('./UIExplorerExampleContainer');
const UIExplorerExampleList = require('./UIExplorerExampleList');
const UIExplorerList = require('./UIExplorerList');
const UIExplorerNavigationReducer = require('./UIExplorerNavigationReducer');
@@ -146,7 +147,6 @@ class UIExplorerApp extends React.Component {
if (stack && stack.routes[index]) {
const {key} = stack.routes[index];
const ExampleModule = UIExplorerList.Modules[key];
- const ExampleComponent = UIExplorerExampleList.makeRenderable(ExampleModule);
return (
- { this._exampleRef = example; }}
/>
diff --git a/Examples/UIExplorer/js/UIExplorerApp.ios.js b/Examples/UIExplorer/js/UIExplorerApp.ios.js
index c0a42a70488..63ad5a38880 100644
--- a/Examples/UIExplorer/js/UIExplorerApp.ios.js
+++ b/Examples/UIExplorer/js/UIExplorerApp.ios.js
@@ -28,6 +28,7 @@ const Linking = require('Linking');
const React = require('react');
const ReactNative = require('react-native');
const UIExplorerList = require('./UIExplorerList.ios');
+const UIExplorerExampleContainer = require('./UIExplorerExampleContainer');
const UIExplorerExampleList = require('./UIExplorerExampleList');
const UIExplorerNavigationReducer = require('./UIExplorerNavigationReducer');
const UIExplorerStateTitleMap = require('./UIExplorerStateTitleMap');
@@ -177,10 +178,9 @@ class UIExplorerApp extends React.Component {
const Example = UIExplorerList.Modules[state.key];
if (Example) {
- const Component = UIExplorerExampleList.makeRenderable(Example);
return (
-
+
);
}
@@ -207,10 +207,9 @@ UIExplorerList.ComponentExamples.concat(UIExplorerList.APIExamples).forEach((Exa
if (ExampleModule.displayName) {
class Snapshotter extends React.Component {
render() {
- const Renderable = UIExplorerExampleList.makeRenderable(ExampleModule);
return (
-
+
);
}
diff --git a/Examples/UIExplorer/js/UIExplorerExampleContainer.js b/Examples/UIExplorer/js/UIExplorerExampleContainer.js
new file mode 100644
index 00000000000..f59a3f110ca
--- /dev/null
+++ b/Examples/UIExplorer/js/UIExplorerExampleContainer.js
@@ -0,0 +1,67 @@
+/**
+ * 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 UIExplorerExampleContainer
+ */
+'use strict';
+
+const React = require('react');
+const {
+ Platform,
+} = require('react-native');
+const UIExplorerBlock = require('./UIExplorerBlock');
+const UIExplorerPage = require('./UIExplorerPage');
+
+const invariant = require('fbjs/lib/invariant');
+
+class UIExplorerExampleContainer extends React.Component {
+ renderExample(example, i) {
+ // Filter platform-specific examples
+ var {title, description, platform} = example;
+ if (platform) {
+ if (Platform.OS !== platform) {
+ return null;
+ }
+ title += ' (' + platform + ' only)';
+ }
+ return (
+
+ {example.render()}
+
+ );
+ }
+
+ render(): ReactElement {
+ if (!this.props.module.examples) {
+ return ;
+ }
+
+ return (
+
+ {this.props.module.examples.map(this.renderExample)}
+
+ );
+ }
+}
+
+module.exports = UIExplorerExampleContainer;
diff --git a/Examples/UIExplorer/js/UIExplorerExampleList.js b/Examples/UIExplorer/js/UIExplorerExampleList.js
index b8207ee9f1f..dc7434502e0 100644
--- a/Examples/UIExplorer/js/UIExplorerExampleList.js
+++ b/Examples/UIExplorer/js/UIExplorerExampleList.js
@@ -31,8 +31,6 @@ const TouchableHighlight = require('TouchableHighlight');
const View = require('View');
const UIExplorerActions = require('./UIExplorerActions');
-const createExamplePage = require('./createExamplePage');
-
import type {
UIExplorerExample,
} from './UIExplorerList.ios';
@@ -59,12 +57,6 @@ class UIExplorerExampleList extends React.Component {
super(props);
}
- static makeRenderable(example: any): ReactClass {
- return example.examples ?
- createExamplePage(null, example) :
- example;
- }
-
render(): ?ReactElement {
const filterText = this.state.filter || '';
const filterRegex = new RegExp(String(filterText), 'i');
diff --git a/Examples/UIExplorer/js/createExamplePage.js b/Examples/UIExplorer/js/createExamplePage.js
index 7bb3e94c310..4b04edd95ad 100644
--- a/Examples/UIExplorer/js/createExamplePage.js
+++ b/Examples/UIExplorer/js/createExamplePage.js
@@ -23,71 +23,18 @@
*/
'use strict';
-var React = require('react');
-var ReactNative = require('react-native');
-var {
- Platform,
-} = ReactNative;
-var UIExplorerBlock = require('./UIExplorerBlock');
-var UIExplorerPage = require('./UIExplorerPage');
+const React = require('react');
-var invariant = require('fbjs/lib/invariant');
+const UIExplorerExampleContainer = require('./UIExplorerExampleContainer');
import type { Example, ExampleModule } from 'ExampleTypes';
var createExamplePage = function(title: ?string, exampleModule: ExampleModule)
: ReactClass {
- invariant(!!exampleModule.examples, 'The module must have examples');
class ExamplePage extends React.Component {
- static title = exampleModule.title;
- static description = exampleModule.description;
-
- getBlock = (example: Example, i) => {
- // Filter platform-specific examples
- var {title, description, platform} = example;
- if (platform) {
- if (Platform.OS !== platform) {
- return null;
- }
- title += ' (' + platform + ' only)';
- }
- // Hack warning: This is a hack because the www UI explorer used to
- // require render to be called. It should just return elements now.
- var originalRender = React.render;
- var originalIOSRender = ReactNative.render;
- var renderedComponent;
- // TODO remove typecasts when Flow bug #6560135 is fixed
- // and workaround is removed from react-native.js
- (React: Object).render =
- (ReactNative: Object).render =
- function(element, container) {
- renderedComponent = element;
- };
- var result = example.render(null);
- if (result) {
- renderedComponent = React.cloneElement(result, {
- navigator: this.props.navigator,
- });
- }
- (React: Object).render = originalRender;
- (ReactNative: Object).render = originalIOSRender;
- return (
-
- {renderedComponent}
-
- );
- };
-
render() {
- return (
-
- {exampleModule.examples.map(this.getBlock)}
-
- );
+ return ;
}
}