diff --git a/docs/HandlingTouches.md b/docs/HandlingTouches.md index 4aade17e0..597857c40 100644 --- a/docs/HandlingTouches.md +++ b/docs/HandlingTouches.md @@ -56,7 +56,7 @@ A common pattern to many mobile apps is the scrollable list of items. Users inte ScrollViews can scroll vertically or horizontally, and can be configured to allow paging through views using swiping gestures by using the `pagingEnabled` props. Swiping horizontally between views can also be implemented on Android using the [ViewPagerAndroid](docs/viewpagerandroid.html) component. -A [ListView](docs/using-a-listview.html) is a special kind of ScrollView that is best suited for displaying long vertical lists of items. It can also display section headers and footers, similar to `UITableView`s on iOS. +A [FlatList](docs/using-a-listview.html) is a special kind of ScrollView that is best suited for displaying long vertical lists of items. If you want to display section headers and footers, similar to `UITableView`s on iOS, then [SectionList](docs/using-a-listview.html) is the way to go. ### Pinch-to-zoom diff --git a/docs/UsingAListView.md b/docs/UsingAListView.md index 857ec95f2..a86b2baf4 100644 --- a/docs/UsingAListView.md +++ b/docs/UsingAListView.md @@ -1,6 +1,6 @@ --- id: using-a-listview -title: Using a ListView +title: Using List Views layout: docs category: The Basics permalink: docs/using-a-listview.html @@ -8,45 +8,102 @@ next: network previous: using-a-scrollview --- -The `ListView` component displays a scrolling list of changing, but similarly structured, data. +React Native provides a suite of components for presenting lists of data. Generally, you'll want to use either [FlatList](docs/flatlist.html) or [SectionList](docs/sectionlist.html). -`ListView` works well for long lists of data, where the number of items might change over time. Unlike the more generic [`ScrollView`](docs/using-a-scrollview.html), the `ListView` only renders elements that are currently showing on the screen, not all the elements at once. +The `FlatList` component displays a scrolling list of changing, but similarly structured, data. `FlatList` works well for long lists of data, where the number of items might change over time. Unlike the more generic [`ScrollView`](docs/using-a-scrollview.html), the `FlatList` only renders elements that are currently showing on the screen, not all the elements at once. -The `ListView` component requires two props: `dataSource` and `renderRow`. `dataSource` is the source of information for the list. `renderRow` takes one item from the source and returns a formatted component to render. +The `FlatList` component requires two props: `data` and `renderItem`. `data` is the source of information for the list. `renderItem` takes one item from the source and returns a formatted component to render. -This example creates a simple `ListView` of hardcoded data. It first initializes the `dataSource` that will be used to populate the `ListView`. Each item in the `dataSource` is then rendered as a `Text` component. Finally it renders the `ListView` and all `Text` components. +This example creates a simple `FlatList` of hardcoded data. Each item in the `data` props is rendered as a `Text` component. The `FlatListBasics` component then renders the `FlatList` and all `Text` components. -> A `rowHasChanged` function is required to use `ListView`. Here we just say a row has changed if the row we are on is not the same as the previous row. - -```ReactNativeWebPlayer +```SnackPlayer?name=FlatList%20Basics import React, { Component } from 'react'; -import { AppRegistry, ListView, Text, View } from 'react-native'; +import { AppRegistry, FlatList, StyleSheet, Text, View } from 'react-native'; -export default class ListViewBasics extends Component { - // Initialize the hardcoded data - constructor(props) { - super(props); - const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); - this.state = { - dataSource: ds.cloneWithRows([ - 'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin' - ]) - }; - } +export default class FlatListBasics extends Component { render() { return ( - - {rowData}} + + {item.key}} /> ); } } +const styles = StyleSheet.create({ + container: { + flex: 1, + paddingTop: 22 + }, + item: { + padding: 10, + fontSize: 18, + height: 44, + }, +}) + // skip this line if using Create React Native App -AppRegistry.registerComponent('AwesomeProject', () => ListViewBasics); +AppRegistry.registerComponent('AwesomeProject', () => FlatListBasics); ``` -One of the most common uses for a `ListView` is displaying data that you fetch from a server. To do that, you will need to [learn about networking in React Native](docs/network.html). +If you want to render a set of data broken into logical sections, maybe with section headers, then a `SectionList` is the way to go. + +```SnackPlayer?name=SectionList%20Basics +import React, { Component } from 'react'; +import { AppRegistry, SectionList, StyleSheet, Text, View } from 'react-native'; + +export default class SectionListBasics extends Component { + render() { + return ( + + {item}} + renderSectionHeader={({section}) => {section.title}} + /> + + ); + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + paddingTop: 22 + }, + sectionHeader: { + paddingTop: 2, + paddingLeft: 10, + paddingRight: 10, + paddingBottom: 2, + fontSize: 14, + fontWeight: 'bold', + backgroundColor: 'rgba(247,247,247,1.0)', + }, + item: { + padding: 10, + fontSize: 18, + height: 44, + }, +}) + +// skip this line if using Create React Native App +AppRegistry.registerComponent('AwesomeProject', () => SectionListBasics); +``` + +One of the most common uses for a list view is displaying data that you fetch from a server. To do that, you will need to [learn about networking in React Native](docs/network.html). diff --git a/docs/UsingAScrollView.md b/docs/UsingAScrollView.md index 2ffbce9dc..d88028141 100644 --- a/docs/UsingAScrollView.md +++ b/docs/UsingAScrollView.md @@ -62,4 +62,4 @@ AppRegistry.registerComponent( () => IScrolledDownAndWhatHappenedNextShockedMe); ``` -`ScrollView` works best to present a small amount of things of a limited size. All the elements and views of a `ScrollView` are rendered, even if they are not currently shown on the screen. If you have a long list of more items that can fit on the screen, you should use a `ListView` instead. So let's [learn about the ListView](docs/using-a-listview.html) next. +`ScrollView` works best to present a small amount of things of a limited size. All the elements and views of a `ScrollView` are rendered, even if they are not currently shown on the screen. If you have a long list of more items that can fit on the screen, you should use a `FlatList` instead. So let's [learn about list views](docs/using-a-listview.html) next. diff --git a/website/core/SnackPlayer.js b/website/core/SnackPlayer.js index 8fc2a6621..f21acdad9 100644 --- a/website/core/SnackPlayer.js +++ b/website/core/SnackPlayer.js @@ -15,8 +15,10 @@ var React = require('React'); const PropTypes = require('prop-types'); -const LatestSDKVersion = '15.0.0'; +const LatestSDKVersion = '16.0.0'; var ReactNativeToExpoSDKVersionMap = { + '0.44': '17.0.0', + '0.43': '16.0.0', '0.42': '15.0.0', '0.41': '14.0.0', }; @@ -51,8 +53,12 @@ var SnackPlayer = React.createClass({ render() { var code = encodeURIComponent(this.props.children); var params = this.parseParams(this.props.params); - var platform = params.platform ? params.platform : 'ios'; - var name = params.name ? decodeURIComponent(params.name) : 'Example'; + var platform = params.platform + ? params.platform + : 'ios'; + var name = params.name + ? decodeURIComponent(params.name) + : 'Example'; var description = params.description ? decodeURIComponent(params.description) : 'Example usage'; @@ -60,16 +66,22 @@ var SnackPlayer = React.createClass({ var optionalProps = {}; var { version } = this.context; if (version === 'next') { - optionalProps['data-snack-sdk-version'] = LatestSDKVersion; + optionalProps[ + 'data-snack-sdk-version' + ] = LatestSDKVersion; } else { - optionalProps['data-snack-sdk-version'] = ReactNativeToExpoSDKVersionMap[ - version - ] || LatestSDKVersion; + optionalProps[ + 'data-snack-sdk-version' + ] = ReactNativeToExpoSDKVersionMap[version] || + LatestSDKVersion; } return (
-
+
{this.props.children} @@ -77,7 +89,8 @@ var SnackPlayer = React.createClass({
+ style={{ marginTop: 15, marginBottom: 15 }} + >