|
1 | 1 | --- |
2 | 2 | id: using-a-listview |
3 | | -title: Using a ListView |
| 3 | +title: Using List Views |
4 | 4 | layout: docs |
5 | 5 | category: The Basics |
6 | 6 | permalink: docs/using-a-listview.html |
7 | 7 | next: network |
8 | 8 | previous: using-a-scrollview |
9 | 9 | --- |
10 | 10 |
|
11 | | -The `ListView` component displays a scrolling list of changing, but similarly structured, data. |
| 11 | +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). |
12 | 12 |
|
13 | | -`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. |
| 13 | +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. |
14 | 14 |
|
15 | | -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. |
| 15 | +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. |
16 | 16 |
|
17 | | -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. |
| 17 | +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. |
18 | 18 |
|
19 | | -> 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. |
20 | | -
|
21 | | -```ReactNativeWebPlayer |
| 19 | +```SnackPlayer?name=FlatList%20Basics |
22 | 20 | import React, { Component } from 'react'; |
23 | | -import { AppRegistry, ListView, Text, View } from 'react-native'; |
24 | | -
|
25 | | -export default class ListViewBasics extends Component { |
26 | | - // Initialize the hardcoded data |
27 | | - constructor(props) { |
28 | | - super(props); |
29 | | - const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); |
30 | | - this.state = { |
31 | | - dataSource: ds.cloneWithRows([ |
32 | | - 'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin' |
33 | | - ]) |
34 | | - }; |
| 21 | +import { AppRegistry, FlatList, StyleSheet, Text, View } from 'react-native'; |
| 22 | +
|
| 23 | +export default class FlatListBasics extends Component { |
| 24 | + render() { |
| 25 | + return ( |
| 26 | + <View style={styles.container}> |
| 27 | + <FlatList |
| 28 | + data={[ |
| 29 | + {key: 'Devin'}, |
| 30 | + {key: 'Jackson'}, |
| 31 | + {key: 'James'}, |
| 32 | + {key: 'Joel'}, |
| 33 | + {key: 'John'}, |
| 34 | + {key: 'Jillian'}, |
| 35 | + {key: 'Jimmy'}, |
| 36 | + {key: 'Julie'}, |
| 37 | + ]} |
| 38 | + renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>} |
| 39 | + /> |
| 40 | + </View> |
| 41 | + ); |
35 | 42 | } |
| 43 | +} |
| 44 | +
|
| 45 | +const styles = StyleSheet.create({ |
| 46 | + container: { |
| 47 | + flex: 1, |
| 48 | + paddingTop: 22 |
| 49 | + }, |
| 50 | + item: { |
| 51 | + padding: 10, |
| 52 | + fontSize: 18, |
| 53 | + height: 44, |
| 54 | + }, |
| 55 | +}) |
| 56 | +
|
| 57 | +// skip this line if using Create React Native App |
| 58 | +AppRegistry.registerComponent('AwesomeProject', () => FlatListBasics); |
| 59 | +``` |
| 60 | + |
| 61 | +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. |
| 62 | + |
| 63 | +```SnackPlayer?name=SectionList%20Basics |
| 64 | +import React, { Component } from 'react'; |
| 65 | +import { AppRegistry, SectionList, StyleSheet, Text, View } from 'react-native'; |
| 66 | +
|
| 67 | +export default class SectionListBasics extends Component { |
36 | 68 | render() { |
37 | 69 | return ( |
38 | | - <View style={{flex: 1, paddingTop: 22}}> |
39 | | - <ListView |
40 | | - dataSource={this.state.dataSource} |
41 | | - renderRow={(rowData) => <Text>{rowData}</Text>} |
| 70 | + <View style={styles.container}> |
| 71 | + <SectionList |
| 72 | + sections={[ |
| 73 | + {title: 'D', data: ['Devin']}, |
| 74 | + {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']}, |
| 75 | + ]} |
| 76 | + renderItem={({item}) => <Text style={styles.item}>{item}</Text>} |
| 77 | + renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>} |
42 | 78 | /> |
43 | 79 | </View> |
44 | 80 | ); |
45 | 81 | } |
46 | 82 | } |
47 | 83 |
|
| 84 | +const styles = StyleSheet.create({ |
| 85 | + container: { |
| 86 | + flex: 1, |
| 87 | + paddingTop: 22 |
| 88 | + }, |
| 89 | + sectionHeader: { |
| 90 | + paddingTop: 2, |
| 91 | + paddingLeft: 10, |
| 92 | + paddingRight: 10, |
| 93 | + paddingBottom: 2, |
| 94 | + fontSize: 14, |
| 95 | + fontWeight: 'bold', |
| 96 | + backgroundColor: 'rgba(247,247,247,1.0)', |
| 97 | + }, |
| 98 | + item: { |
| 99 | + padding: 10, |
| 100 | + fontSize: 18, |
| 101 | + height: 44, |
| 102 | + }, |
| 103 | +}) |
| 104 | +
|
48 | 105 | // skip this line if using Create React Native App |
49 | | -AppRegistry.registerComponent('ListViewBasics', () => ListViewBasics); |
| 106 | +AppRegistry.registerComponent('AwesomeProject', () => SectionListBasics); |
50 | 107 | ``` |
51 | 108 |
|
52 | | -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). |
| 109 | +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). |
0 commit comments