FlatList
FlatList components are used for rendering large quantities of scrollable content. Instead of rendering a children prop, the FlatList renders each item in an input data array using the renderItem prop. The renderItem prop is a function which takes an item from the data array and maps it to a React Element. Each item in data should be an object with a unique id, so that react can determine when items have been rearranged.
The FlatList only renders the content on screen and only updates rows that have changed.
Each time the FlatList decides to render a new item, it will call the renderItem function with an object as parameter. The object contain some rendering metadata, along with the item from the array we passed as the data prop.
The FlatList component require 2 props: data & renderItem.To implement the FlatList component we need to import FlatList.
Code: import {FlatList} from 'react-native'
Example:
__________________________________________
import React, { Component } from 'react';
import { FlatList, StyleSheet, Text, View,Alert } from 'react-native';
export default class App extends Component {
renderSeparator = () => {
return (
<View
style={{
height: 1,
width: "100%",
backgroundColor: "#000",
}}
/>
);
};
//handling onPress action
getListViewItem = (item) => {
Alert.alert(item.key);
}
render() {
return (
<View style={styles.container}>
<FlatList
data={[
{key: 'APPLE'},{key: 'SAMSUNG'}, {key: 'REDMI'},{key: 'NOKIA'},
{key: 'ONEPLUS'},{key: 'VIVO'},{key: 'OPPO'},
{key: 'HONOR'},{key: 'SONY'}, {key: 'ASUS'},
{key: 'LENOVO'},{key: 'HTC'},{key: 'ACER'},
{key: 'REALME'},{key: 'GOOGLE'},{key: 'MOTOROLA'},
{key: 'BLACKBERRY'}, {key: 'GIONEE'},{key: 'COOLPAD'},
]}
renderItem={({item}) =>
<Text style={styles.item}
onPress={this.getListViewItem.bind(this, item)}>{item.key}</Text>}
ItemSeparatorComponent={this.renderSeparator}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
});
______________________________________________________________________________________
Output:
