React Native list View

import React, { Component } from 'react';
import {
    Button,
    StyleSheet,
    Text,
    images,
    ListView,
    ActivityIndicator,
    View,
} from 'react-native';

export default class Profile extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            dataSource: new ListView.DataSource({
                rowHasChanged: (row1, row2) => row1 !== row2,
            }),
            isLoding: false,
        };
    }
    componentDidMount() {
        fetch("http://localhost:53554/api/TaskApi/GetTasks?username=kathiravalan421")
            .then((response) => response.json())
            .then((responseData) => {
                console.log(responseData);
                var ds = new ListView.DataSource({
                    rowHasChanged: (row1, row2) => row1 !== row2,
                });
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(responseData.data),
                    loaded: true,
                });
            })

    }
    render() {
        if (this.state.isLoding) {
            <View>
                <ActivityIndicator/>
            </View>
        }
        return (
            <View>
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this.renderTasks}
                    />
            </View>
        );
    }
    renderTasks(rowData) {
        return (
            <View style={styles.rightContainer}>
                <Text>
                    ProductReferenceId { rowData.ProductReferenceId }
                    ProductName { rowData.ProductName }
                    ProductWeight {rowData.ProductWeight}
                    Amount {rowData.Amount}
                    OrderDate {rowData.OrderDate}
                </Text>              
                <Text>
                    Address: {rowData.Address1}{rowData.Address2}
                    City: {rowData.City} State: {rowData.State} Country: {rowData.Country} ZipCode: {rowData.ZipCode}
                </Text>
                <Button                  
                    title="Assign"
                    color="#5E4FA2"
                    style={{ height: 2, width: 10 }}
                    accessibilityLabel="Assign"
                    />
            </View>
         
        )
    }
}

const styles = StyleSheet.create({
    counter: {
        padding: 30,
        alignSelf: 'center',
        fontSize: 26,
        fontWeight: 'bold',
    },
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    rightContainer: {
        flex: 1,
    },
    title: {
        fontSize: 20,
        marginBottom: 8,
        textAlign: 'center',
    },
    year: {
        textAlign: 'center',
    },
    thumbnail: {
        width: 53,
        height: 81,
    },
    listView: {
        paddingTop: 20,
        backgroundColor: '#F5FCFF',
    },
});



Comments

Popular posts from this blog

my reframce

Angular UI Grid To Bind JSON Data