Here this is My Code
import React,{ Component } from ‘react’;
import {ScrollView, TouchableOpacity,StyleSheet, Text,View,TextInput,Button,Image,ImageBackground,Dimensions,AsyncStorage,NetInfo,StatusBar,ActivityIndicator,FlatList,ProgressBarAndroid,TouchableHighlight} from ‘react-native’;
import {createStackNavigator, createAppContainer,StackNavigator} from ‘react-navigation’;
import { Col, Grid, Row } from ‘react-native-easy-grid’;
import { Divider } from ‘react-native-elements’;
import axios from ‘axios’;
import {Card,CardItem} from ‘native-base’;
import strings from ‘./res/strings’
import color from ‘./res/colors’
const screenWidth = Math.round(Dimensions.get(‘window’).width);
const screenHeight = Math.round(Dimensions.get(‘window’).height);
const ip=strings.values.commonvalues.ip;
const tokken=strings.values.commonvalues.tokken;
const blue=color.values.Colors.blue;
const colorprimary=color.values.Colors.colorPrimary;
const white=color.values.Colors.white;
export default class TaskList extends React.Component {
static navigationOptions = {
title: “Task List”,
color:“#fff”,
headerStyle: {
backgroundColor:colorprimary,
},
headerTintColor: white,
headerTitleStyle: {
fontWeight: ‘bold’,
},
};
constructor(props) {
super(props);
this.state = {
isLoading: false,
dataSource:‘’,
pid:‘’,UserID:‘’,pdesc:‘’,cid:‘’,cname:‘’,
};
}
gettaskdetails=(index)=>{
const id=index
const {TaskID,TagIDNo}=this.state.dataSource[id]
this.props.navigation.navigate(‘TaskDetailsActivity’,{
TID:TaskID,
TagID:TagIDNo,
PID:this.state.pid,
UserID:this.state.UserID,
PDesc:this.state.pdesc,
CusID:this.state.cid,
CusName:this.state.cname
});
}
gettasklist=()=>{
const config = {
headers: {
‘currentToken’: tokken,
},
params: {
pid:this.state.pid,//823
}
};
this.setState({isLoading:true})
axios.get(ip+‘/getTaskList’, config)
.then(response => this.setState({ dataSource:response.data},() => {if(response.status==200){this.setState({isLoading:false})}}))
.catch(err => console.log(err));
}
componentDidMount(){
this.setState({
pid:this.props.navigation.getParam(‘PID’, ‘’),
cid:this.props.navigation.getParam(‘CusID’, ‘’),
pdesc:this.props.navigation.getParam(‘PDesc’, ‘’),
cname:this.props.navigation.getParam(‘CusName’, ‘’),
UserID:this.props.navigation.getParam(‘UserID’, ‘’)
},()=>{this.gettasklist();})
}
render() {
if (this.state.isLoading) {
return (
<View style={{ flex: 1,
justifyContent: ‘center’,
flexDirection: ‘column’ }}>
)
}
return (
{this.state.pid+“-”+this.state.pdesc}
<Divider style={{ backgroundColor:white}} />
<Divider style={{ backgroundColor:white}} />
{this.state.cid+“-”+this.state.cname}
<FlatList
data={ this.state.dataSource }
initialNumToRender={this.state.dataSource.length}
renderItem={({item,index}) =>
<Card>
<CardItem style={{alignItems:"flex-start",width:'100%',flexWrap:'wrap'}}>
<Grid onPress={() => this.gettaskdetails(index)}>
<Row>
<Col style={{alignItems:'flex-start',width:'20%'}}>
<Text style={{fontSize:12,color:colorprimary}}>Tag ID-</Text>
</Col>
<Col style={{alignItems:'flex-start',width:'30%'}}>
<Text style={{fontSize:12}}>{item.TagIDNo}</Text>
</Col>
<Col style={{alignItems:'flex-start',width:'20%'}}>
<Text style={{fontSize:12,color:colorprimary}}>Task ID-</Text>
</Col>
<Col style={{alignItems:'flex-start',width:'30%'}}>
<Text style={{fontSize:12}}>{item.TaskID}</Text>
</Col>
</Row>
<Row>
<Col style={{alignItems:'flex-start'}}>
<Text style={{fontSize:12}}>{item.TaskDesc}</Text>
</Col>
</Row>
</Grid>
</CardItem>
</Card>
}
keyExtractor={(item, index) => index.toString()}
/>
</ScrollView>
)
}
};
const styles = StyleSheet.create({
titleText: {
flex:1,
flexWrap:‘wrap’,
color:white,
fontSize:12,
padding:5
},
});