Add simple ScrollView example to UI Explorer

Martin Konicek · facebook-github-bot-2 · commit 169da2a1b7ce · 2015-09-11T14:10:30.000-07:00
Reviewed By: @foghina Differential Revision: D2434588
diff --git a/Examples/UIExplorer/ScrollViewSimpleExample.js b/Examples/UIExplorer/ScrollViewSimpleExample.js
@@ -0,0 +1,82 @@
+/**
+ * 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';
+
+var React = require('react-native');
+var {
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity
+} = React;
+
+var NUM_ITEMS = 20;
+
+var ScrollViewSimpleExample = React.createClass({
+  statics: {
+    title: '<ScrollView>',
+    description: 'Component that enables scrolling through child components.'
+  },
+  makeItems: function(nItems, styles) {
+    var items = [];
+    for (var i = 0; i < nItems; i++) {
+       items[i] = (
+         <TouchableOpacity key={i} style={styles}>
+           <Text>{'Item ' + i}</Text>
+         </TouchableOpacity>
+       );
+    }
+    return items;
+  },
+
+  render: function() {
+    // One of the items is a horizontal scroll view
+    var items = this.makeItems(NUM_ITEMS, styles.itemWrapper);
+    items[4] = (
+      <ScrollView key={'scrollView'} horizontal={true}>
+        {this.makeItems(NUM_ITEMS, [styles.itemWrapper, styles.horizontalItemWrapper])}
+      </ScrollView>
+    );
+
+    var verticalScrollView = (
+      <ScrollView style={styles.verticalScrollView}>
+        {items}
+      </ScrollView>
+    );
+
+    return verticalScrollView;
+  }
+});
+
+var styles = StyleSheet.create({
+  verticalScrollView: {
+    margin: 10,
+  },
+  itemWrapper: {
+    backgroundColor: '#dddddd',
+    alignItems: 'center',
+    borderRadius: 5,
+    borderWidth: 5,
+    borderColor: '#a52a2a',
+    padding: 30,
+    margin: 5,
+  },
+  horizontalItemWrapper: {
+    padding: 50
+  }
+});
+
+module.exports = ScrollViewSimpleExample;
