Invariant Violation Tried to get frame for out of range index NaN (React Native) - FlatList with Fetch data in React Native

Question

I'm trying to display an array as a FlatList in React Native but it keeps giving me the following error: "Invariant Violation: Tried to get frame for out of range index NaN"

My code:

async function getNarrators() {
  const response = await fetch(
    'https://islamcompanion.pakjiddat.pk/api/get_narrators',
    {
      method: 'post',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: 'language=english',
    },
  );
  const json = await response.json();
  var peopleArray = Object.values(json);
  console.log(peopleArray);
  return peopleArray;
}

const ListItem = ({title}) => (
  <View>
    <Text>{title}</Text>
  </View>
);

function HomeScreen({navigation}) {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>🏠</Text>

      <FlatList
        data={getNarrators()}
        keyExtractor={(item) => item}
        renderItem={({item}) => <ListItem title={item} />}
      />

      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
      <MyButton />
    </View>
  );
}

Output from

console.log(peopleArray);

is

["A. J. Arberry", "Abdul Majid Daryabadi", "Abdullah Yusuf Ali", "Abul Ala Maududi", "Ahmed Ali", "Ahmed Raza Khan", "Ali Quli Qarai", "English Transliteration", "Hasan al-Fatih Qaribullah and Ahmad Darwish", "Mohammad Habib Shakir", "Mohammed Marmaduke William Pickthall", "Muhammad Sarwar", "Muhammad Taqi-ud-Din al-Hilali and Muhammad Muhsin Khan", "Saheeh International", "Talal Itani", "Wahiduddin Khan"]

Answer 1

You need to use useEffect and useState in your code and need to fetch your API like this, I had made some changes to your code try to do it like this:

import {View, Text, FlatList, Button} from 'react-native';
import React, { useEffect, useState } from 'react';

function HomeScreen({navigation}) {
    const [data, setData] = useState([]);
    useEffect(() => {
      const fetchData = async () => {
        const response = await fetch(
            'https://islamcompanion.pakjiddat.pk/api/get_narrators',
            {
              method: 'post',
              headers: {
                Accept: 'application/json',
                'Content-Type': 'application/x-www-form-urlencoded',
              },
              body: 'language=english',
            },
          );
          const json = await response.json();
          var peopleArray = Object.values(json);
          console.log(peopleArray);
        setData(peopleArray);
      };
      fetchData();
    }, []);
    const ListItem = ({title}) => (
        <View>
          <Text>{title}</Text>
        </View>
      );
    return   <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
    <Text>🏠</Text>

    <FlatList
      data={data}
      keyExtractor={(item) => item}
      renderItem={({item}) => {
          console.log("item is",item);
          return(
            <ListItem title={item} />
          )

      }
     }
    />

    <Button
      title="Go to Details"
      onPress={() => navigation.navigate('Details')}
    />
  </View>
  };

Hope this helps!