diff --git a/Examples/UIExplorer/RootViewSizeFlexibilityExampleApp.js b/Examples/UIExplorer/RootViewSizeFlexibilityExampleApp.js
new file mode 100644
index 000000000..baab38671
--- /dev/null
+++ b/Examples/UIExplorer/RootViewSizeFlexibilityExampleApp.js
@@ -0,0 +1,76 @@
+/**
+ * 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
+ */
+'use strict';
+
+const React = require('react-native');
+const {
+ StyleSheet,
+ Text,
+ TouchableHighlight,
+ View,
+} = React;
+
+class RootViewSizeFlexibilityExampleApp extends React.Component {
+
+ constructor(props: {toggled: boolean}) {
+ super(props);
+ this.state = { toggled: false };
+ }
+
+ _onPressButton() {
+ this.setState({ toggled: !this.state.toggled });
+ }
+
+ render() {
+ const viewStyle = this.state.toggled ? styles.bigContainer : styles.smallContainer;
+
+ return (
+
+
+
+
+ React Native Button
+
+
+
+
+ );
+ }
+
+}
+
+const styles = StyleSheet.create({
+ bigContainer: {
+ flex: 1,
+ height: 60,
+ backgroundColor: 'gray',
+ },
+ smallContainer: {
+ flex: 1,
+ height: 40,
+ backgroundColor: 'gray',
+ },
+ center: {
+ flex: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ whiteText: {
+ color: 'white',
+ }
+});
+
+module.exports = RootViewSizeFlexibilityExampleApp;
diff --git a/Examples/UIExplorer/SetPropertiesExampleApp.js b/Examples/UIExplorer/SetPropertiesExampleApp.js
index 748bbc3cc..f5dc9c8ea 100644
--- a/Examples/UIExplorer/SetPropertiesExampleApp.js
+++ b/Examples/UIExplorer/SetPropertiesExampleApp.js
@@ -13,17 +13,18 @@
*
* @flow
*/
-
'use strict';
-var React = require('React');
-var Text = require('Text');
-var View = require('View');
+const React = require('react-native');
+const {
+ Text,
+ View,
+} = React;
-var SetPropertiesExampleApp = React.createClass({
+class SetPropertiesExampleApp extends React.Component {
- render: function() {
- var wrapperStyle = {
+ render() {
+ const wrapperStyle = {
backgroundColor: this.props.color,
flex: 1,
alignItems: 'center',
@@ -37,7 +38,8 @@ var SetPropertiesExampleApp = React.createClass({
);
- },
-});
+ }
+
+}
module.exports = SetPropertiesExampleApp;
diff --git a/Examples/UIExplorer/UIExplorerApp.android.js b/Examples/UIExplorer/UIExplorerApp.android.js
index cdf92c684..6446e8fa4 100644
--- a/Examples/UIExplorer/UIExplorerApp.android.js
+++ b/Examples/UIExplorer/UIExplorerApp.android.js
@@ -16,8 +16,8 @@
*/
'use strict';
-var React = require('react-native');
-var {
+const React = require('react-native');
+const {
AppRegistry,
BackAndroid,
Dimensions,
@@ -27,29 +27,32 @@ var {
View,
StatusBar,
} = React;
-var UIExplorerList = require('./UIExplorerList.android');
+const UIExplorerList = require('./UIExplorerList.android');
-var DRAWER_WIDTH_LEFT = 56;
+const DRAWER_WIDTH_LEFT = 56;
-var UIExplorerApp = React.createClass({
- getInitialState: function() {
- return {
+class UIExplorerApp extends React.Component {
+ constructor(props) {
+ super(props);
+ this.onSelectExample = this.onSelectExample.bind(this);
+ this._handleBackButtonPress = this._handleBackButtonPress.bind(this);
+ this.state = {
example: this._getUIExplorerHome(),
};
- },
+ }
- _getUIExplorerHome: function() {
+ _getUIExplorerHome() {
return {
title: 'UIExplorer',
component: this._renderHome(),
};
- },
+ }
- componentWillMount: function() {
+ componentWillMount() {
BackAndroid.addEventListener('hardwareBackPress', this._handleBackButtonPress);
- },
+ }
- render: function() {
+ render() {
return (
{this._renderNavigation()}
- );
- },
+ );
+ }
- _renderNavigationView: function() {
+ _renderNavigationView() {
return (
);
- },
+ }
- onSelectExample: function(example) {
+ onSelectExample(example) {
this.drawer.closeDrawer();
if (example.title === this._getUIExplorerHome().title) {
example = this._getUIExplorerHome();
@@ -79,10 +82,10 @@ var UIExplorerApp = React.createClass({
this.setState({
example: example,
});
- },
+ }
- _renderHome: function() {
- var onSelectExample = this.onSelectExample;
+ _renderHome() {
+ const onSelectExample = this.onSelectExample;
return React.createClass({
render: function() {
return (
@@ -93,10 +96,10 @@ var UIExplorerApp = React.createClass({
);
}
});
- },
+ }
- _renderNavigation: function() {
- var Component = this.state.example.component;
+ _renderNavigation() {
+ const Component = this.state.example.component;
return (
);
- },
+ }
- _handleBackButtonPress: function() {
+ _handleBackButtonPress() {
if (
this._exampleRef &&
this._exampleRef.handleBackAction &&
@@ -129,10 +132,11 @@ var UIExplorerApp = React.createClass({
return true;
}
return false;
- },
-});
+ }
-var styles = StyleSheet.create({
+}
+
+const styles = StyleSheet.create({
container: {
flex: 1,
},
diff --git a/Examples/UIExplorer/UIExplorerApp.ios.js b/Examples/UIExplorer/UIExplorerApp.ios.js
index f93cc2a66..120c772d8 100644
--- a/Examples/UIExplorer/UIExplorerApp.ios.js
+++ b/Examples/UIExplorer/UIExplorerApp.ios.js
@@ -12,33 +12,33 @@
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*
* @providesModule UIExplorerApp
- * @flow
*/
'use strict';
-var React = require('react-native');
-var UIExplorerList = require('./UIExplorerList.ios');
-var {
+const React = require('react-native');
+const UIExplorerList = require('./UIExplorerList.ios');
+const SetPropertiesExampleApp = require('./SetPropertiesExampleApp');
+const RootViewSizeFlexibilityExampleApp = require('./RootViewSizeFlexibilityExampleApp');
+const {
AppRegistry,
NavigatorIOS,
StyleSheet,
- Text,
- TouchableHighlight,
View,
StatusBar,
} = React;
-var UIExplorerApp = React.createClass({
+class UIExplorerApp extends React.Component {
- getInitialState: function() {
- return {
+ constructor(props) {
+ super(props);
+ this.state = {
openExternalExample: (null: ?React.Component),
};
- },
+ }
- render: function() {
+ render() {
if (this.state.openExternalExample) {
- var Example = this.state.openExternalExample;
+ const Example = this.state.openExternalExample;
return (
{
@@ -49,7 +49,7 @@ var UIExplorerApp = React.createClass({
}
return (
-
+
);
}
-});
-var styles = StyleSheet.create({
+}
+
+const styles = StyleSheet.create({
container: {
flex: 1,
},
itemWrapper: {
backgroundColor: '#eaeaea',
},
- bigContainer: {
- flex: 1,
- height: 60,
- backgroundColor: 'gray',
- },
- smallContainer: {
- flex: 1,
- height: 40,
- backgroundColor: 'gray',
- },
- center: {
- flex: 1,
- alignItems: 'center',
- justifyContent: 'center',
- },
- whiteText: {
- color: 'white',
- }
-});
-
-var SetPropertiesExampleApp = React.createClass({
-
- render: function() {
- var wrapperStyle = {
- backgroundColor: this.props.color,
- flex: 1,
- alignItems: 'center',
- justifyContent: 'center'
- };
-
- return (
-
-
- Embedded React Native view
-
-
- );
- },
-});
-
-var RootViewSizeFlexibilityExampleApp = React.createClass({
-
- getInitialState: function () {
- return { toggled: false };
- },
-
- _onPressButton: function() {
- this.setState({ toggled: !this.state.toggled });
- },
-
- render: function() {
- var viewStyle = this.state.toggled ? styles.bigContainer : styles.smallContainer;
-
- return (
-
-
-
-
- React Native Button
-
-
-
-
- );
- },
});
AppRegistry.registerComponent('SetPropertiesExampleApp', () => SetPropertiesExampleApp);
diff --git a/Examples/UIExplorer/UIExplorerList.android.js b/Examples/UIExplorer/UIExplorerList.android.js
index 804ed69d4..8959a0919 100644
--- a/Examples/UIExplorer/UIExplorerList.android.js
+++ b/Examples/UIExplorer/UIExplorerList.android.js
@@ -53,7 +53,6 @@ var APIS = [
require('./ImageEditingExample'),
require('./IntentAndroidExample.android'),
require('./LayoutEventsExample'),
- require('./NavigationExperimental/NavigationExperimentalExample'),
require('./LayoutExample'),
require('./NavigationExperimental/NavigationExperimentalExample'),
require('./NetInfoExample'),