react native-tutorial

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:

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.