React native - Invariant violation-tried to get frame for out of range index

Question

I have tried to search other posts and forums for the solution to this error. However, either no one has solved those issues or the issues are not really doing the same thing as I am doing. I am getting an error saying " Invariant violation-tried to get frame for out of range index". This happens when I try to input the data into the flatlist from the poke api. Please see code below.

import React, { useState } from "react";
import { View, Text , Button, FlatList, ActivityIndicator } from "react-native";
import { GlobalStyles } from "../styles/GlobalStyles";

class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            dataSource: []
        }
    }

    componentDidMount() {
        fetch("https://pokeapi.co/api/v2/pokemon/")
            .then((res)=> res.json())
            .then((response)=> {
                this.setState({
                    isLoading: false,
                    dataSource: response
                })
                console.log(response)
            })
    }


    render() {
        const showIndicator = this.state.isLoading == true ? <ActivityIndicator size="large" color="#0000ff" /> : null;
        return(
            <View style={GlobalStyles.container}>
                <View style={GlobalStyles.activityIndicator}>{showIndicator}</View>
                <FlatList data={this.state.dataSource} renderItem={({item})=> {
                    return(
                        <View>
                            <Text>{item.name}</Text>
                        </View>
                    )
                }}/>
                <Button onPress={()=> this.props.navigation.navigate("About")} title="Go to about"/>
            </View>
        )
    }
}

export default Home;

Answer 1

The thing you are doing wrong is you are sending this.state.datasource is your data attribute, you need to send this.state.dataSource.results

import React, { useState } from "react";
import { View, Text , Button, FlatList, ActivityIndicator } from "react-native";

class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            dataSource: []
        }
    }

    componentDidMount() {
        fetch("https://pokeapi.co/api/v2/pokemon/")
            .then((res)=> res.json())
            .then((response)=> {
                this.setState({
                    isLoading: false,
                    dataSource: response
                })
                console.log(response)
            })
    }


    render() {
        const showIndicator = this.state.isLoading == true ? <ActivityIndicator size="large" color="#0000ff" /> : null;
        return(
            <View style={{marginTop:100}}>
                <View>{showIndicator}</View>
                <FlatList data={this.state.dataSource.results}
                 renderItem={({item})=> {
                    console.log("item is item",item);
                    return(
                        <View>
                            <Text>{item.name}</Text>
                        </View>
                    )
                }}/>
                <Button onPress={()=> this.props.navigation.navigate("About")} title="Go to about"/>
            </View>
        )
    }
}

export default Home;

Hope this helps!