ReactNative FlatList

Introduction:

• React Native List show has different way to represent, react native listview either FlatList or SectionList.
• Flatlist is term used for static data just like array of list to view.

Process:

• index.js

import React, { Component } from 'react';

import { AppRegistry, FlatList, StyleSheet, Text, View } from 'react-native';

export default class FlatListBasics extends Component {

  render() {

    return (

      <View style={styles.container}>

        <FlatList

          data={[

            {key: 'Devin'},

            {key: 'Jackson'},

            {key: 'James'},

            {key: 'Joel'},

            {key: 'John'},

            {key: 'Jillian'},

            {key: 'Jimmy'},

            {key: 'Julie'},

          ]}

          renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}

        />

      </View>

    );

  }

}

const styles = StyleSheet.create({

  container: {

   flex: 1,

   paddingTop: 22

  },

  item: {

    padding: 10,

    fontSize: 18,

    height: 44,

  },

})

// skip this line if using Create React Native App

AppRegistry.registerComponent('AwesomeProject', () => FlatListBasics);

ScreenShot/Output:

Description:

• 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, the FlatList only renders elements that are currently showing on the screen, not all the elements at once.

• 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.

• 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.

Conclusion:

• The Flatlist is appending on view where we render the data whether it's static or dynamic.
• Data will two we can show for list either it's in array or objects.
• Rendering flatlist has default scroll for list data which can be set automatically when data of object or array are of data appending.
• After this list either we can set in class component or functional components.
• Set listview on any js file that has created for class or functional components need to finish with import thing it's very necessary for react native.
• Run npm install
• react-native run-android
• in any case if you got error like react native metro bundler error please follow previous post that will help you to run react native program.