diff --git a/docs/Basics-Component-ListView.md b/docs/Basics-Component-ListView.md index 63844ed17d444c..15c556a4ef60e1 100644 --- a/docs/Basics-Component-ListView.md +++ b/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. diff --git a/docs/Basics-Component-ScrollView.md b/docs/Basics-Component-ScrollView.md new file mode 100644 index 00000000000000..cf3dd5d75db9d2 --- /dev/null +++ b/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( + + + + + + + + + + + + Text1 + + + Text2 + + + Text3 + + + Text4 + + + + + + + + + + + + Text5 + + + Text6 + + + ); + } +}); + + +AppRegistry.registerComponent('MyApp', () => SimpleScrollView); +``` diff --git a/docs/Basics-Component-TextInput.md b/docs/Basics-Component-TextInput.md index 0942e2faec08bb..9d44207af38e22 100644 --- a/docs/Basics-Component-TextInput.md +++ b/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.