React Native Flatlist

Video Demo:

Basically a Flatlist is a view of group that illustrates the data in a horizontal or vertical scrollable view. In react native Listview is deprecated, so most of the time FlatList is used in react. FlatList is similar as ListView. In this tutorial we are going to learn how to work with FlatList in react native. DOWNLOAD SOURCE CODE FROM BELOW.

STEPS TO CREATE A REACT NATIVE PROJECT:

Step 1-> To create your project run this command:
sudo npm install -g react-native-cli
Step 2->
Now initialise your project name. Replace your project name with MovingScreen:
react-native init MovingScreen
Now you can start work on your React native project

HomeScreen.js

import React ,{Component} from 'react'
import {View,Text, StyleSheet,Button, StatusBar, FlatList, Alert,TouchableOpacity} from 'react-native'


export default class HomeScreen extends Component{
        state={
            datasource: [
               {name: 'Apple'},
               {name:'Alphabet'},
               {name: 'Microsoft'},
               {name:'Amazon'},
               {name:'Tencent Holdings'},
               {name:'Walmart'},
               {name:'State Grid'},
               {name:'Toyota Motor'},
               {name:'BP'},
               {name:'Facebook'},
               {name:'Bank of America'},
               {name:'Alibaba'},
               {name:'Johnson & Johnson'},
               {name:'ICBC'},
               {name:'China Construction Bank'},
               {name:'JPMorgan Chase'},
               {name:'General Electric'},          


]
        }


listSeperator(){
        return(
            <View style={styles.sepratorList}>
            </View>
        )
    }


rowItemView(rowdata){
        return(
            <TouchableOpacity style={styles.listContainer}
             onPress={()=>this.clickRowItem(rowdata)}>
            <View style={styles.listContainer}>
            <Text>{rowdata.item.name}</Text>
            </View>
            </TouchableOpacity>
        )
    }


clickRowItem(rowdata){
        Alert.alert(rowdata.item.name)
    }


render(){
        return (
            <View style={styles.container}>
            <StatusBar backgroundColor='#FF7043'></StatusBar>
               <View style={styles.headerContainer}>
                    <Text style={styles.headerTxt}>Home Screen</Text>
               </View>


<FlatList
                    data={this.state.datasource}
                    renderItem=  {this.rowItemView.bind(this)}
                    keyExtractor={(item, index) => index.toString()}
                    ItemSeparatorComponent={this.listSeperator}/>
                
            </View>
        )
    }
}


const styles = StyleSheet.create({
    container:{
        flex:1
    },


headerContainer:{
        width:'100%',
        height:40,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'#FF5722'
    },


headerTxt:{
        fontSize:13,
        color:'white',


},


sepratorList:{
        height:1,
        width:"100%",
        backgroundColor:'#EAEAEA'
    },


listContainer:{
        height:40,
        justifyContent:'center',
        width:'100%',
        paddingLeft:10        
    },


listTxt:{
        fontSize:13,
        color:'black',
        height:40,
        width:'100%',   
    },    
})