The FlatList component is an effective way to display items in a scrollable list view. We can fetch data from an API and display in FlatList in React Native. It is a useful alternative to ScrollViews, especially when dealing with large data sets.

Flat lists, has the following features:

Fully cross-platform.
Optional horizontal mode.
Configurable viewability callbacks.
Header support.
Footer support.
Separator support.
Pull to Refresh.
Scroll loading.
ScrollToIndex support.
Multiple column support.
In this article, we shall see how we can fetch data from an endpoint and display the data using FlatList in React Native.

So, I will assume that you already know how to create a new React Native application. If you’re just getting started, you can check out the article on creating a new React Native project here.

Here’s what a new React Native application should look like:

We are going to be fetching data from the Cat Facts API. So we will write our React Native code as follows:

fetchItem() {
requestAnimationFrame(() =>
fetch(`https://catfact.ninja/breeds`, {
method: 'GET',
})
.then(response => response.json())
.then(responseJson => {
console.warn(responseJson);
})
.catch(error => {
{
alert(error)
}
}),
);
}

componentDidMount(){
this.fetchItem()
}
Let’s explain what’s happening here.

Here, we’re calling the endpoint https://catfact.ninja/breeds and logging the response to at least confirm that we’re even getting a response. We’re then calling that method in our componentDidMount()

Here’s the response from the call
Read more https://codeflarelimited.com/blog/fetch-data-from-an-api-and-display-in-flatlist-in-react-native/

Nice one but why are you using class component instead of functional component

Frontend:
Nice one but why are you using class component instead of functional component

No particular reason. I Just I just like class components. You can still replace the class components with functional components. instead of componentDidMount(), You can use useEffect and useState, then change the class part to function, you're good to go.

kemi72:
The FlatList component is an effective way to display items in a scrollable list view. We can fetch data from an API and display in FlatList in React Native. It is a useful alternative to ScrollViews, especially when dealing with large data sets.

Flat lists, has the following features:

Fully cross-platform.
Optional horizontal mode.
Configurable viewability callbacks.
Header support.
Footer support.
Separator support.
Pull to Refresh.
Scroll loading.
ScrollToIndex support.
Multiple column support.
In this article, we shall see how we can fetch data from an endpoint and display the data using FlatList in React Native.

So, I will assume that you already know how to create a new React Native application. If you’re just getting started, you can check out the article on creating a new React Native project here.

Here’s what a new React Native application should look like:

We are going to be fetching data from the Cat Facts API. So we will write our React Native code as follows:

fetchItem() {
requestAnimationFrame(() =>
fetch(`https://catfact.ninja/breeds`, {
method: 'GET',
})
.then(response => response.json())
.then(responseJson => {
console.warn(responseJson);
})
.catch(error => {
{
alert(error)
}
}),
);
}

componentDidMount(){
this.fetchItem()
}
Let’s explain what’s happening here.

Here, we’re calling the endpoint https://catfact.ninja/breeds and logging the response to at least confirm that we’re even getting a response. We’re then calling that method in our componentDidMount()

Here’s the response from the call
Read more https://codeflarelimited.com/blog/fetch-data-from-an-api-and-display-in-flatlist-in-react-native/

greetings bro, do you work with react-native ? I'm having having trouble setting up Android studio for simulation. I've been on this for more than 3 days now. Any tips that can help me ?

stankelz:
greetings bro, do you work with react-native ? I'm having having trouble setting up Android studio for simulation. I've been on this for more than 3 days now. Any tips that can help me ?

Having trouble... what trouble exactly. Be descriptive and post your log if possible.

stankelz:
greetings bro, do you work with react-native ? I'm having having trouble setting up Android studio for simulation. I've been on this for more than 3 days now. Any tips that can help me ?

Hello bro. How is it going. Have you been able to resolve this.
Sorry I'm not always online

kemi72:

Hello bro. How is it going. Have you been able to resolve this.
Sorry I'm not always online

hey bro sorry I've been working on a clients project so I've not been online as much myself. No, I haven't resolved this. To completely install Android studio is a problem, I gave up. I tried using Expo Go app to for development ,when I try to scan the QR code it crashes. Like this is really frustrating and hindering my learning process. I set a specific timeframe to learn React-native because I want to Learn and start creating AR experience for mobile

Please can you guide me on how to install Android Studio 🙏

stankelz:
hey bro sorry I've been working on a clients project so I've not been online as much myself. No, I haven't resolved this. To completely install Android studio is a problem, I gave up. I tried using Expo Go app to for development ,when I try to scan the QR code it crashes. Like this is really frustrating and hindering my learning process. I set a specific timeframe to learn React-native because I want to Learn and start creating AR experience for mobile

Please can you guide me on how to install Android Studio 🙏

Yeah, I get. I'm not always online myself. If you can send your email so I can send instructions on how to set it up.

kemi72:

Yeah, I get. I'm not always online myself. If you can send your email so I can send instructions on how to set it up.

stannz88@gmail.com