Untitled

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { H3, Text } from 'native-base';
import axios from 'axios';
import Loading from '../components/Loading.js';
import HTML from 'react-native-render-html';
import { heightPercentageToDP as hp } from 'react-native-responsive-screen';
import { ScrollView } from 'react-native-gesture-handler';
import PartnersInfo from './PartnersInfo';

export default class InfoDetailInfo extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,
            error: '',
            items: []
        }
        this.reRenderSomething = this.props.nav.addListener('willFocus', () => {
            this.componentDidMount();
        });
    }

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

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

    render() {
        const { isLoading, items } = this.state;
        if (isLoading || items.length === 0) {
            return (<Loading />);
        }
        return (
            <View style={styles.viewStyle}>
                <ScrollView>
                    {items.filter(i => "#" + i.anchor === this.props.anchor).map(i =>
                        <View>
                            <H3 style={styles.titleStyle}>{i.title}</H3>
                            {i.blocks.map(i1 =>
                                <View>
                                    {(i1.type === 'rectangle_blocks') ?
                                        (<View style={styles.textStyle}>
                                            {i1.block.map(i2 =>
                                                <View>
                                                    <Text style={styles.titleStyle}>{i2.title}</Text>
                                                    <Text style={styles.textStyle}>{i2.desc}</Text>
                                                </View>
                                            )}
                                        </View>) : (<View></View>)}
                                    <View style={styles.textStyle}>
                                        {(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>)}
                                    </View>
                                    {(i1.type === 'rectangle_blocks_with_image' || i1.type === 'auto_slide_banners') ?
                                        (<View>
                                            {(typeof i1.block !== "undefined") ? (<PartnersInfo items={i1.block} />) : (<View></View>)}
                                        </View>) : (<View></View>)
                                    }
                                </View>
                            )}
                        </View>
                    )}
                </ScrollView>
            </View>
        );
    }

}
const styles = StyleSheet.create({
    viewStyle: {
        flex: 1,
        padding: 25,
        marginTop: 10,
        backgroundColor: '#fff',
        justifyContent: 'flex-end'
    },
    titleStyle: {
        fontWeight: 'bold',
        paddingLeft: 5
    },
    textStyle: {
        padding: 5
    },
    itemImage: {
        borderRadius: 15,
        marginTop: 10,
        marginBottom: 15,
        width: null,
        height: hp('10%'),
    }
});