Untitled

import React, { Component } from 'react';
import { StyleSheet, View, Text, Image, TouchableWithoutFeedback } from 'react-native';
import { Card, CardItem, Body } from 'native-base';
import { FlatGrid } from 'react-native-super-grid';
import NavigationService from '../components/NavigationService.js';
import Loading from '../components/Loading.js';
import { URL } from '../components/url';
import axios from 'axios';

export default class CategoryGrid extends Component {

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

    componentDidMount() {
        this.getCategorySlide();
    }

    getCategorySlide = () => {
        this.setState({ isLoading: true })
        axios.get(URL + "app/apiv3/index.php/get_slayd_v/apikey/melhem3/dil/az")
            .then(result => this.setState({
                isLoading: false,
                slide: result.data
            }))
            .catch(error => this.setState({
                isLoading: false,
                error: error
            }));
    }

    _renderItem = ({ item }) => {
        return (
            <TouchableWithoutFeedback onPress={() => NavigationService.navigate('CategoryHomeDetail', { id: item.slayd_url_metn.slice(10, 30), title: item.slayd_adi })}>
                <Card style={styles.cardStyle}>
                    <CardItem cardBody>
                        <Image resizeMode="contain" source={{ uri: URL + item.slayd_sekil_url }} style={styles.itemImage} />
                    </CardItem>
                    <CardItem>
                        <Body style={styles.cardBodyStyle}>
                            <Text>{item.slayd_adi}</Text>
                        </Body>
                    </CardItem>
                </Card>
            </TouchableWithoutFeedback>
        );
    }

    render() {
        const { isLoading, slide } = this.state;
        if (isLoading) {
            <Loading />
        }
        return (
            <View style={styles.viewStyle} >
                <FlatGrid
                    itemDimension={130}
                    items={slide}
                    renderItem={this._renderItem}
                />
            </View>
        );
    }

}
const styles = StyleSheet.create({
    viewStyle: {
        padding: 20
    },
    cardStyle: {
        borderRadius: 15,
        overflow: 'hidden'
    },
    itemImage: {
        flex: 1,
        width: null,
        height: 130,
    },
    cardBodyStyle: {
        justifyContent: 'center',
        alignItems: 'center'
    }
});