FlatList implementation in react native

React Native provide component called FlatList which is used for listing any type dynamic or static data. In this blog we will discuss how to implement a FlatList in React Native.

To use FlatList component import FlatList from 'react-native' as below.

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

Now define an array of data which will bind in flatlist, Here i am taking static data as below , you can have your own static or dynamic data from API endpoint.

const data=[
    {key:"1",title:"Android"},
    {key:"2",title:"IOS"},
    {key:"3",title:"React"},
    {key:"4",title:"Node JS"},
    {key:"5",title:"Java"},
    {key:"6",title:"PHP"},
    {key:"7",title:"Javascript"},
    
  ];

Now call FlatList component with data-source.

  <FlatList
      data={data}
      renderItem={({item})=>this.renderItem(item)}
      keyExtractor={item=>item.key}
   />

That's all, we done with flatlist so complete component will looks like

import React, {Component} from 'react';
  import {SafeAreaView,View,StyleSheet,Text,FlatList,Alert} from 'react-native';
  import Constants from 'expo-constants';
  const data=[
    {key:"1",title:"Android"},
    {key:"2",title:"IOS"},
    {key:"3",title:"React"},
    {key:"4",title:"Node JS"},
    {key:"5",title:"Java"},
    {key:"6",title:"PHP"},
    {key:"7",title:"Javascript"},
    
  ];
  class FlatListScreen extends Component {
      renderItem=(item)=>{
        return(
        <View key={item.key} style={styles.item}>
          <Text>{item.title}Text>
        >
        )
      }
      render(){
          return(
              <SafeAreaView style={styles.container}>
                  <FlatList
                  data={data}
                  renderItem={({item})=>this.renderItem(item)}
                  keyExtractor={item=>item.key}
                  />
                  
              SafeAreaView>
              
          )
      }
  }
  export default FlatListScreen;

  const styles =StyleSheet.create({
      container: {
          flex: 1,
          marginTop: Constants.statusBarHeight,
          padding:10
        },
        item:{
          padding:10,
          borderWidth:1,
          borderRadius:5,
          borderColor:"#c1dec5",
          marginBottom:10},
  })

Now if want to display item title on touch of list item, or other operation on an item then modified your renderItem function as bellow

      showItem=(data)=>{
          Alert.alert(data);
        }
      renderItem=(item)=>{
        return(
        <View key={item.key} style={styles.item}>
          <TouchableOpacity onPress={()=>this.showItem(item.title)}>
            <Text>{item.title}Text>
          >
        >
        )
      }