Deepshikha Puri, the young Indian Entrepreneur heading the mobile development trade from years to successive extent, has worked with numerous clients and many tremendous brands in this industry of mobile encompassing in India and overseas maintaining promising work relationships with each of them with an impression to manage it's whole thing.

Monday, February 11, 2019

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.

flatlist react native react native flatlist example


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

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>{}</Text> </View> </TouchableOpacity> ) }
clickRowItem(rowdata){ Alert.alert( }
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%', }, })

Download source code from here

No comments:

Post a Comment