React Native FlatList
In React Native, there have been a number of ways to generate a scrolling list, most notably the ScrollView and the ListView. Each individual has advantages and disadvantages. React Native now offers the FlatList and the SectionList, two new list views, as of version 0.43.
It’s a simple method for creating a useful scrolling list of facts. It is not only effective but also exceedingly easy to use in terms of the API. It is fairly similar to the ListView component if you have used or are familiar with it, but it is better in (nearly) every way.
React Native FlatList Example
In this illustration, we give the data prop items that are hardcoded. The rendering of each element in the data props is a Text component.
The separator between the list’s elements is implemented using the FlatList’s ItemSeparatorComponent prop. We use the onPress prop to Text function to execute the click event on list elements.
import React, { Component } from 'react';
import { AppRegistry, FlatList,
StyleSheet, Text, View,Alert } from 'react-native';
export default class FlatListBasics 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: 'Android'},{key: 'iOS'}, {key: 'Java'},{key: 'Swift'},
{key: 'Php'},{key: 'Hadoop'},{key: 'Sap'},
{key: 'Python'},{key: 'Ajax'}, {key: 'C++'},
{key: 'Ruby'},{key: 'Rails'},{key: '.Net'},
{key: 'Perl'},{key: 'Sap'},{key: 'Python'},
{key: 'Ajax'}, {key: 'C++'},{key: 'Ruby'},
{key: 'Rails'},{key: '.Net'},{key: 'Perl'}
]}
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,
},
})
AppRegistry.registerComponent('AwesomeProject', () => FlatListBasics);
Output:
