ListView firing end - достигло самого себя, React Native

Я создаю приложение в собственном реагировании, и я использую Lisview для отображения некоторых данных по какой-то странной причине, endReached запускается сам без прокрутки списка, и listView сначала отображает все элементы, как будто я увеличиваю значение страницы каждый раз, также я получаю повторяющиеся результаты для первого вызова API со значением page 1.

Код:

import React, {Component} from 'react';
import {Alert, ListView, Text, View} from 'react-native';
import categoryApi from './category.api';
import styles from './category.styles';
import CategoryItem from './category.items.component';
import ShopsNear from "../listshops/list-shops.component";

export default class Category extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            rawData: [],
            isLoading: false,
            categories: new ListView.DataSource({
                rowHasChanged: (row1, row2) => row1 !== row2
            }),
            page: 1,
        };
    }

    static navigationOptions = {
        headerTitle: 'Categories',
        title: 'Categories',
    };

    componentDidMount() {
        this.fetchCategories();
    }

    fetchCategories() {
        this.setState({isLoading: true});
        categoryApi.getOne(this.state.page).then(response => {
            if (response.data) {
                this.setState({
                    rawData: this.state.rawData.concat(response.data.data),
                    categories: this.state.categories.cloneWithRows(this.state.rawData.concat(response.data.data)),
                    isLoading: false,
                });
            } else {
                this.setState({isLoading: false});
                Alert.alert(
                    'Something wrong happened!',
                    'My Alert Msg',
                    [],
                    {cancelable: true}
                )
            }
        });
    }

    componentWillMount() {

    }

    showMore = () => {
        this.setState({page: this.state.page + 1});
        console.info("End reached... page: " + this.state.page);
        this.fetchCategories();
    };

    render() {
        const {navigate} = this.props.navigation;

        return (
            <View style = {styles.container}>
                <View style = {styles.projektiHeader}>
                    <Text style = {styles.projekti}>VALITSE PROJEKTI</Text>
                </View>
                <View style = {styles.categoriesList}>
                    <ListView
                        dataSource = {this.state.categories}
                        renderRow = {(rowData) => <CategoryItem navigate = {navigate} item = {rowData}/>}
                        renderSeparator = {(sectionId, rowId) => <View key = {rowId} style = {styles.separator}/>}
                        onEndReached = {this.showMore}
                    />
                </View>
                <View style = {styles.shopsNear}>
                    <ShopsNear navigate = {navigate}/>
                </View>
            </View>
        );
    }
}

По сути, showMore () - это сам по себе. Кто-нибудь знает, что здесь происходит? Я пытаюсь добиться этого каждый раз, когда прокручиваю и дохожу до конца списка, чтобы вызвать функцию showMore, которая будет извлекать данные из API.