Add ScrollView to Basics docs

Summary:
Add basic information about the generic `ScrollView` -- talk a bit about how it renders elements and a quick compare against something like a `ListView`. Provide a simple example.

Fixes facebook#8261
Closes facebook#8266

Differential Revision: D3465105

Pulled By: JoelMarcey

fbshipit-source-id: 3a2e1eac6e877669763fc6b8bb0fc78ebe870ab1

Author: JoelMarcey

docs/Basics-Component-ListView.md

@@ -7,7 +7,11 @@ permalink: docs/basics-component-listview.html
 next: basics-integration-with-existing-apps
 ---
 
-On mobile devices, lists are a core element in many applications. The [`ListView`](/react-native/docs/listview.html#content) component is a special type of [`View`](/react-native/docs/tutorial-component-view.html) that displays a vertically scrolling list of changing data.
+On mobile devices, lists are a core element in many applications. The [`ListView`](/react-native/docs/listview.html#content) component is a special type of [`View`](/react-native/docs/basics-component-view.html) that displays a *vertically* scrolling list of changing, but similarly structured, data.
+
+`ListView` works best for possibly lengthy datasources (e.g., from an endpoint or database), where the number of items may not be known a priori.
+
+> Unlike the more generic [`ScrollView`](/react-native/docs/basics-component-scrollview.html), the `ListView` only renders elements that are currently showing on the screen, not all the elements at once.
 
 The `ListView` component requires two properties, `dataSource` and `renderRow`. `dataSource` is the actual source of information that will be part of the list. `renderRow` takes the data and returns a renderable component to display.
 

docs/Basics-Component-ScrollView.md

@@ -0,0 +1,70 @@
+---
+id: basics-component-scrollview
+title: ScrollView
+layout: docs
+category: Basics
+permalink: docs/basics-component-scrollview.html
+next: basics-component-listview
+---
+
+Given the screen sizes of mobile devices, the ability to scroll through data is generally paramount for a proper usability experience.
+
+The [`ScrollView`](/react-native/docs/scrollview.html) is a generic scrolling container that can host multiple components and views. The scrollable items need not be homogenous, and you can scroll both vertically and horizontally (by setting the `horizontal` property).
+
+`ScrollView` works best to present a list of short, static items of a known quantity. All the elements and views of a `ScrollView` are rendered a priori, even if they are not currently shown on the screen. Contrast this with a `ListView`, which render only those views that are on the screen and remove views that go off-screen.
+
+> [`TextView`](/react-native/docs/basics-component-textview.html) and [`ListView`](/react-native/docs/basics-component-listview.html) are specialized scrollable containers.
+
+This contrived example creates a horizontal `ScrollView` with a static amount of heterogenous elements (images and text).
+
+```JavaScript
+import React, { AppRegistry, ScrollView, Image, Text, View } from 'react-native'
+
+var SimpleScrollView = React.createClass({
+  render(){
+      return(
+        <ScrollView horizontal={true}>
+          <View>
+            <Image source={require('./img/check.png')} />
+          </View>
+          <View>
+            <Image source={require('./img/check.png')} />
+          </View>
+          <View>
+            <Image source={require('./img/check.png')} />
+          </View>
+          <View>
+            <Text style={{fontSize:96}}>Text1</Text>
+          </View>
+          <View>
+            <Text style={{fontSize:96}}>Text2</Text>
+          </View>
+          <View>
+            <Text style={{fontSize:96}}>Text3</Text>
+          </View>
+          <View>
+            <Text style={{fontSize:96}}>Text4</Text>
+          </View>
+          <View>
+            <Image source={require('./img/check.png')} />
+          </View>
+          <View>
+            <Image source={require('./img/check.png')} />
+          </View>
+          <View>
+            <Image source={require('./img/check.png')} />
+          </View>
+          <View>
+            <Text style={{fontSize:96}}>Text5</Text>
+          </View>
+          <View>
+            <Text style={{fontSize:96}}>Text6</Text>
+          </View>
+        </ScrollView>
+    );
+  }
+});
+
+
+AppRegistry.registerComponent('MyApp', () => SimpleScrollView);
+```

docs/Basics-Component-TextInput.md

@@ -4,7 +4,7 @@ title: TextInput
 layout: docs
 category: Basics
 permalink: docs/basics-component-textinput.html
-next: basics-component-listview
+next: basics-component-scrollview
 ---
 
 Direct text-based user input is a foundation for many apps. Writing a post or comment on a page is a canonical example of this. [`TextInput`](/react-native/docs/textinput.html#content) is a basic component that allows the user to enter text.