From e0249eace1278a4d97475fbce23cce6003d312e8 Mon Sep 17 00:00:00 2001 From: Joel Marcey Date: Mon, 20 Jun 2016 17:51:39 -0700 Subject: [PATCH 1/2] Add ScrollView to Basics docs Fixes #8261 --- docs/Basics-Component-ListView.md | 4 +- docs/Basics-Component-ScrollView.md | 70 +++++++++++++++++++++++++++++ docs/Basics-Component-TextInput.md | 2 +- 3 files changed, 74 insertions(+), 2 deletions(-) create mode 100644 docs/Basics-Component-ScrollView.md diff --git a/docs/Basics-Component-ListView.md b/docs/Basics-Component-ListView.md index 63844ed17d444c..8e9e3a81fd9501 100644 --- a/docs/Basics-Component-ListView.md +++ b/docs/Basics-Component-ListView.md @@ -7,7 +7,9 @@ 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. + +> Unlike the more generic `ScrollView`, 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..e2dda1fa1fb82a --- /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). + +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. + +The `ScrollView` requires + +```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. From 261776fd3932958add5de516d8eb587ef0e2ac97 Mon Sep 17 00:00:00 2001 From: Joel Marcey Date: Tue, 21 Jun 2016 09:31:36 -0700 Subject: [PATCH 2/2] A few fixes and a bit more detail --- docs/Basics-Component-ListView.md | 4 +++- docs/Basics-Component-ScrollView.md | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/Basics-Component-ListView.md b/docs/Basics-Component-ListView.md index 8e9e3a81fd9501..15c556a4ef60e1 100644 --- a/docs/Basics-Component-ListView.md +++ b/docs/Basics-Component-ListView.md @@ -9,7 +9,9 @@ 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/basics-component-view.html) that displays a *vertically* scrolling list of changing, but similarly structured, data. -> Unlike the more generic `ScrollView`, the `ListView` only renders elements that are currently showing on the screen, not all the elements at once. +`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 index e2dda1fa1fb82a..cf3dd5d75db9d2 100644 --- a/docs/Basics-Component-ScrollView.md +++ b/docs/Basics-Component-ScrollView.md @@ -11,11 +11,11 @@ Given the screen sizes of mobile devices, the ability to scroll through data is 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). -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. +`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. -The `ScrollView` requires +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'