React Native - Render FlatList using API data

dwjosh
November 6, 2022
106 views
0 votes
2 Answers

I’m trying to get data from an external API and then render it into a flatlist.

I’m very new to React Native so this may be easy to solve.

I’m trying to use the following data: https://www.nationaltrust.org.uk/search/data/all-places

I want to fetch it from the URL, and render the ‘title’ and ‘imageUrl’ fields into a flatlist component.

This is what I have so far:

const placesURL = "https://www.nationaltrust.org.uk/search/data/all-places";

const [isLoading, setLoading] = useState(true);
const [places, setPlaces] = useState([]);

useEffect(() => {
fetch(placesURL)
.then((response) => response.json())
.then((json) => setPlaces(json))
.catch((error) => alert(error))
.finally(setLoading(false));
})

And in the flatlist:


export default function App() {
return (
<View style={styles.container}>
<FlatList
data={places}
renderItem={({ item }) => (
<Text>{item.title}</Text>
)}
keyExtractor={(item) => item.id}

      />
      <StatusBar style="auto" />
    </View>

);
}

If anyone could tell me what to do I would really appreciate it.

Answers

try updating your useEffect hook to this

useEffect(() => {
if(places.length === 0 && isLoading){

fetch(placesURL)
.then((response) => response.json())
.then((json) => setPlaces(json))
.catch((error) => alert(error))
.finally(setLoading(false));
}

}, [places, isLoading])

and

export default function App() {
return (
<View style={styles.container}>

{places.length !== 0 &&
<FlatList
data={places}
renderItem={({ item }) => (
<Text>{item.title}</Text>
)}
keyExtractor={(item) => item.id}

      />
}

      <StatusBar style="auto" />
    </View>

);
}

This URL https://www.nationaltrust.org.uk/search/data/all-places returns a JSON object not an array of objects. It’s required to transform an object into an array of objects to be compatible with FlatList.

import React, { useState, useEffect } from "react";
import { Text, View, StyleSheet, FlatList } from "react-native";

const placesURL = "https://www.nationaltrust.org.uk/search/data/all-places";
export default function App() {
  const [isLoading, setLoading] = useState(true);
  const [places, setPlaces] = useState([]);

  const getPlaces = async () => {
    try {
      const response = await fetch(placesURL);
      const result = await response.json();

      const newPlaces = Object.values(result);
      setPlaces(newPlaces);
      setLoading(false);
    } catch (error) {
      setLoading(false);
      console.log(error);
    }
  };

  useEffect(() => {
    getPlaces();
  }, []);

  if (isLoading) {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text> Searching places.... </Text>
      </View>
    );
  }
  return (
    <View style={styles.container}>
      <FlatList
        data={places}
        renderItem={({ item }) => <Text>{item.title}</Text>}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",

    padding: 20,
  },
});

Here is Expo Snack for testing – https://snack.expo.dev/@emmbyiringiro/a98de6

Note: Use Android or iOS emulator, not Web preview.

Please signup or login to give your own answer.

Click here to cancel reply.

React Native – Render FlatList using API data

Answers