React Native FlatList

The FlatList component displays the similar structured data in a scrollable list. It works well for large lists of data where the number of list items might change over time. The FlatList shows only those renders elements which are currently displaying on the screen, not all the elements of the list at once.

The FlatList component takes two required props: data and renderItem.

The data is the source of elements for the list, and renderItem takes one item from the source and returns a formatted component to render.

To implement the FlatList component, we need to import FlatList from ‘react-native’ library.

React Native FlatList Example

In this example, we provide hardcoded elements to data prop. Each element in the data props is rendered as a Text component.

The ItemSeparatorComponent prop of FlatList is used to implement the separator between the elements of the list. To perform the click event on list items, we use onPress prop to Text.

1. import React, { Component } from ‘react’;  
2. import { AppRegistry, FlatList,  
3.     StyleSheet, Text, View,Alert } from ‘react-native’;  
4.   
5. export default class FlatListBasics extends Component {  
6.   
7.     renderSeparator = () => {  
8.         return (  
9.             <View  
10.                 style={{  
11.                     height: 1,  
12.                     width: “100%”,  
13.                     backgroundColor: “#000”,  
14.                 }}  
15.             />  
16.         );  
17.     };  
18.     //handling onPress action  
19.     getListViewItem = (item) => {  
20.         Alert.alert(item.key);  
21.     }  
22.   
23.     render() {  
24.         return (  
25.             <View style={styles.container}>  
26.                 <FlatList  
27.                     data={[  
28.                         {key: ‘Android’},{key: ‘iOS’}, {key: ‘Java’},{key: ‘Swift’},  
29.                         {key: ‘Php’},{key: ‘Hadoop’},{key: ‘Sap’},  
30.                         {key: ‘Python’},{key: ‘Ajax’}, {key: ‘C++’},  
31.                         {key: ‘Ruby’},{key: ‘Rails’},{key: ‘.Net’},  
32.                         {key: ‘Perl’},{key: ‘Sap’},{key: ‘Python’},  
33.                         {key: ‘Ajax’}, {key: ‘C++’},{key: ‘Ruby’},  
34.                         {key: ‘Rails’},{key: ‘.Net’},{key: ‘Perl’}  
35.                     ]}  
36.                     renderItem={({item}) =>  
37.                         <Text style={styles.item}  
38.                               onPress={this.getListViewItem.bind(this, item)}>{item.key}</Text>}  
39.                     ItemSeparatorComponent={this.renderSeparator}  
40.                 />  
41.             </View>  
42.         );  
43.     }  
44. }  
45.   
46. const styles = StyleSheet.create({  
47.     container: {  
48.         flex: 1,  
49.     },  
50.     item: {  
51.         padding: 10,  
52.         fontSize: 18,  
53.         height: 44,  
54.     },  
55. })  
56.   
57.   
58. AppRegistry.registerComponent(‘AwesomeProject’, () => FlatListBasics);  

Output: