[add] initial ScrollView

Supports the following props: `children`, `contentContainerStyle`,
`horizontal`, `onScroll`, `scrollEnabled`, `scrollEventThrottle`, and
`style`.

Fix #6

examples/components/App.js

@@ -1,7 +1,7 @@
 import GridView from './GridView'
 import Heading from './Heading'
 import MediaQueryWidget from './MediaQueryWidget'
-import React, { Image, StyleSheet, Text, TextInput, Touchable, View } from '../../src'
+import React, { Image, StyleSheet, ScrollView, Text, TextInput, Touchable, View } from '../../src'
 
 export default class App extends React.Component {
   static propTypes = {
@@ -9,6 +9,13 @@ export default class App extends React.Component {
     style: View.propTypes.style
   }
 
+  constructor(...args) {
+    super(...args)
+    this.state = {
+      scrollEnabled: true
+    }
+  }
+
   render() {
     const { mediaQuery } = this.props
     const rootStyles = {
@@ -152,6 +159,52 @@ export default class App extends React.Component {
             )
           })}
         </GridView>
+
+        <Heading size='large'>ScrollView</Heading>
+        <label>
+          <input
+            checked={this.state.scrollEnabled}
+            onChange={() => this.setState({
+              scrollEnabled: !this.state.scrollEnabled
+            })}
+            type='checkbox'
+          /> Enable scroll
+        </label>
+
+        <Heading>Default layout</Heading>
+        <View style={styles.scrollViewContainer}>
+          <ScrollView
+            contentContainerStyle={styles.scrollViewContentContainerStyle}
+            onScroll={e => console.log('ScrollView.onScroll', e)}
+            scrollEnabled={this.state.scrollEnabled}
+            scrollEventThrottle={1} // 1 event per second
+            style={styles.scrollViewStyle}
+          >
+            {Array.from({ length: 50 }).map((item, i) => (
+              <View key={i} style={styles.box}>
+                <Text>{i}</Text>
+              </View>
+            ))}
+          </ScrollView>
+        </View>
+
+        <Heading>Horizontal layout</Heading>
+        <View style={styles.scrollViewContainer}>
+          <ScrollView
+            contentContainerStyle={styles.scrollViewContentContainerStyle}
+            horizontal
+            onScroll={e => console.log('ScrollView.onScroll', e)}
+            scrollEnabled={this.state.scrollEnabled}
+            scrollEventThrottle={1} // 1 event per second
+            style={styles.scrollViewStyle}
+          >
+            {Array.from({ length: 50 }).map((item, i) => (
+              <View key={i} style={{...styles.box, ...styles.horizontalBox}}>
+                <Text>{i}</Text>
+              </View>
+            ))}
+          </ScrollView>
+        </View>
       </View>
     )
   }
@@ -179,6 +232,9 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     borderWidth: '1px'
   },
+  horizontalBox: {
+    width: '50px'
+  },
   boxFull: {
     width: '100%'
   },
@@ -194,5 +250,14 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     height: '200px',
     justifyContent: 'center'
+  },
+  scrollViewContainer: {
+    height: '200px'
+  },
+  scrollViewStyle: {
+    borderWidth: '1px'
+  },
+  scrollViewContentContainerStyle: {
+    padding: '10px'
   }
 })