'RCTRootView's size flexibility' UIExplorer demo

Reviewed By: javache

Differential Revision: D2622491

fb-gh-sync-id: de79a96ee0fef432bbd0512eba8994719a0adad3

Examples/UIExplorer/UIExplorerApp.ios.js

@@ -23,6 +23,7 @@ var {
   NavigatorIOS,
   StyleSheet,
   Text,
+  TouchableHighlight,
   View
 } = React;
 
@@ -72,6 +73,24 @@ var styles = StyleSheet.create({
   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({
@@ -94,7 +113,35 @@ var SetPropertiesExampleApp = React.createClass({
   },
 });
 
+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 (
+      <TouchableHighlight onPress={this._onPressButton}>
+        <View style={viewStyle}>
+          <View style={styles.center}>
+            <Text style={styles.whiteText}>
+              React Native Button
+            </Text>
+          </View>
+        </View>
+      </TouchableHighlight>
+    );
+  },
+});
+
 AppRegistry.registerComponent('SetPropertiesExampleApp', () => SetPropertiesExampleApp);
+AppRegistry.registerComponent('RootViewSizeFlexibilityExampleApp', () => RootViewSizeFlexibilityExampleApp);
 AppRegistry.registerComponent('UIExplorerApp', () => UIExplorerApp);
 UIExplorerList.registerComponents();