diff --git a/Examples/UIExplorer/ScrollViewSimpleExample.js b/Examples/UIExplorer/ScrollViewSimpleExample.js new file mode 100644 index 000000000..79673e6d0 --- /dev/null +++ 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: '', + description: 'Component that enables scrolling through child components.' + }, + makeItems: function(nItems, styles) { + var items = []; + for (var i = 0; i < nItems; i++) { + items[i] = ( + + {'Item ' + i} + + ); + } + return items; + }, + + render: function() { + // One of the items is a horizontal scroll view + var items = this.makeItems(NUM_ITEMS, styles.itemWrapper); + items[4] = ( + + {this.makeItems(NUM_ITEMS, [styles.itemWrapper, styles.horizontalItemWrapper])} + + ); + + var verticalScrollView = ( + + {items} + + ); + + 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;