Untitled

import React, { Component } from 'react';
import { View, StyleSheet, Image, Dimensions } from 'react-native';
import { Card, CardItem, Body, Text, Toast, H3 } from 'native-base';
import axios from 'axios';
import Loading from '../components/Loading.js';
import HTML from 'react-native-render-html';
import I18n from '../locales';

export default class TransportInfo extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,
            error: '',
            items: []
        }
    }

    async componentDidMount() {
        this.getItems(this.props.url);
    }

    showErrorToast = () => {
        this.setState({ isLoading: false });
        Toast.show({
            text: I18n.t('internetErrorText'),
            type: "danger",
            duration: 3000,
            position: "top"
        });
    }

    getItems = (url_path) => {
        this.setState({ isLoading: true });
        axios.create({ headers: { 'from-app': '1' } }).get(url_path)
            .then(result =>
                this.setState({
                    items: result.data,
                    isLoading: false
                })
            )
            .catch(error => this.showErrorToast());
    }

    render() {
        const { isLoading, items } = this.state;
        if (isLoading || items.length === 0) {
            return (<Loading />);
        }

        return (
            <View style={styles.viewStyle}>
                <Image style={styles.itemImage1} source={{ uri: items.page.banner_image }} />
                {items.page.blocks.map(i =>
                    i.blocks.map(i1 =>
                        <View style={styles.infoViewStyle}>
                            {(i1.type === 'text_with_brown_text_block_and_image') ?
                                (<View>
                                    {(i1.title !== '') ? (<Text style={styles.titleStyle}>{i1.title}</Text>) : (<View></View>)}
                                    <H3 style={styles.titleStyle}>{i.title}</H3>
                                    <HTML html={i.desc} />
                                </View>) : (<View></View>)}
                        </View>
                    )
                )}
                {items.page.blocks.map(i =>
                    <View style={styles.infoViewStyle1}>
                        {
                            i.blocks.map(i1 =>
                                <View>
                                    {(i1.type === 'text_image_right') ?
                                        ((typeof i1.body !== "undefined") ?
                                            (<View>
                                                {(i1.title !== '') ? (<Text style={styles.titleStyle}>{i1.title}</Text>) : (<View></View>)}
                                                <HTML html={i1.body} />
                                            </View>) :
                                            (<View></View>)) : (<View></View>)}
                                    {(i1.type === 'rectangle_blocks_with_image' || i1.type === 'auto_slide_banners') ?
                                        (<View>
                                            {(typeof i1.block !== "undefined") ? (
                                                i1.block.map(i =>
                                                    <Card style={styles.cardStyle}>
                                                        <CardItem cardBody>
                                                            <Image resizeMode="contain" source={{ uri: i.image }} style={styles.itemImage} />
                                                        </CardItem>
                                                        <CardItem>
                                                            <Body>
                                                                <Text>{i.title}</Text>
                                                                <HTML html={i.desc_html} />
                                                            </Body>
                                                        </CardItem>
                                                    </Card>
                                                )
                                            ) : (<View></View>)}
                                        </View>) : (<View></View>)
                                    }
                                </View>
                            )
                        }
                    </View>
                )}
            </View>
        );

    }

}
const styles = StyleSheet.create({
    viewStyle: {
        flex: 1
    },
    infoViewStyle: {
        flex: 1,
        paddingLeft: 30,
        paddingRight: 30,
        paddingTop: 10
    },
    infoViewStyle1: {
        flex: 1,
        paddingLeft: 30,
        paddingRight: 30,
        paddingBottom: 30
    },
    cardStyle: {
        overflow: 'hidden',
        marginBottom: 20
    },
    itemImage: {
        flex: 1,
        width: null,
        height: 200,
    },
    itemImage1: {
        flex: 1,
        width: Dimensions.get('window').width,
        height: 200,
    },
    titleStyle: {
        marginTop: 10,
        marginBottom: 10
    },
    cardBodyStyle: {
        justifyContent: 'flex-start',
        alignItems: 'flex-start'
    },
    priceStyle: {
        fontWeight: 'bold'
    }
});