How to Hit Api in React native and set Data in Flat List

API integration in react native

In react-native we can use the fetch as per our need you can simply call the URL through fetch and make requests to the server as per need.

Lifecycle Method in React Native: There are several lifecycle methods in react-native. We’ll be using three of these lifecycle methods in this article: constructor, componentDidMount and Render.

First Step:

Firstly I will create the data source which stores the JSON data in the array.

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

constructor(props) {

super(props);

this.state = {

dataSource:[]

};

}

Second Step:

After completing the constructor part, We now move along with the part we are here for, i.e fetching data from an API for listing.

Now we will use the componentDidMount method as I want the API to be called at the beginning of the app.

I used the fetch to call the URL and then it returned a promise with then and catch. It’s similar to try and catch. The response from the API is in form of JSON which is fetched and then set into states we have already created. Check out the code for a more better understanding.

componentDidMount(){
fetch("http://jsonplaceholder.typicode.com/posts")
.then(response => response.json())
.then((responseJson)=> {
  this.setState({
   dataSource: responseJson
  })
})
.catch(error=>console.log(error)) //to catch the errors if any
}

componentDidMount(){

fetch("http://jsonplaceholder.typicode.com/posts")

.then(response => response.json())

.then((responseJson)=> {

this.setState({

dataSource: responseJson

})

.catch(error=>console.log(error)) //to catch the errors if any

}

Third Step:

Now we have store the data in a dataSource array and now we move to design part. now we will use flatlist to show the data.

FlatList is a component of react native and It’s an easy way to make an efficient scrolling list of data. and we used render function to make the UI.

render(){
     return(
      <View style={{padding:10}}>
      <FlatList
         padding ={30}
         data={this.state.dataSource}
         renderItem={({item}) => 
         <View style={{height: 50}}>
         <Text style={{height: 50}}>{item.title}</Text>
         <View style={{height: 1,backgroundColor:'gray'}}></View>
         </View>
        }
       />
     </View>
     )}

render(){

return(

<FlatList

padding ={30}

data={this.state.dataSource}

renderItem={({item}) =>

<Text style={{height: 50}}>{item.title}</Text>

</View>

}

</View>

)}

So here is the complete code for that.

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, FlatList} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});
 
export default class App extends Component {
  
  constructor(props) {
    super(props);
    this.state = {
      dataSource:[]
     };
   }

  componentDidMount(){
    fetch("http://jsonplaceholder.typicode.com/posts")
    .then(response => response.json())
    .then((responseJson)=> {
      this.setState({
       dataSource: responseJson
      })
    })
    .catch(error=>console.log(error)) //to catch the errors if any
    }

    render(){
     return(
      <View style={{padding:10}}>
      <FlatList
      padding ={30}
         data={this.state.dataSource}
         renderItem={({item}) => 
         <View style={{height: 50}}>
         <Text style={{height: 50}}>{item.title}</Text>
         <View style={{height: 1,backgroundColor:'gray'}}></View>
         </View>
        }
       />
      
     </View>
     )}
}

import React, {Component} from 'react';

import {Platform, StyleSheet, Text, View, FlatList} from 'react-native';

const instructions = Platform.select({

ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',

android:

'Double tap R on your keyboard to reload,\n' +

'Shake or press menu button for dev menu',

});

export default class App extends Component {

constructor(props) {

super(props);

this.state = {

dataSource:[]

};

}

componentDidMount(){

fetch("http://jsonplaceholder.typicode.com/posts")

.then(response => response.json())

.then((responseJson)=> {

this.setState({

dataSource: responseJson

})

.catch(error=>console.log(error)) //to catch the errors if any

}

render(){

return(

<FlatList

padding ={30}

data={this.state.dataSource}

renderItem={({item}) =>

<Text style={{height: 50}}>{item.title}</Text>

</View>

}

</View>

)}

}

Now once you are done with all the coding part here is how the screen will look to you.

Conclusion

We learned about what is an API and how it works to react native. We learned about the FlatList and how to use it in react-native and also there various lifecycle methods used in react-native.

Flat list in react natvie Hit api in react natvie

jitendra kumar

6 Mar, 2021
Updated by - jitendra kumar
11 Oct, 2021
Updated by - jitendra kumar

. . .

2 comments

Domingos Amândio Neto 4 years ago

How do I show all data from an api like this

[
{
“id”: “1”,
“data”: “any”,
“Exemplo”: [
{
“id”: “1”,
“data”: “any”
},
{
“id”: “2”,
“data”: “any”
}
]
},
{
“id”: “2”,
“data”: “any”,
“Exemplo”: [
{
“id”: “1”,
“data”: “any”
},
{
“id”: “2”,
“data”: “any”
}
]
}
]

}

]

jitendra kumar (Moderator) 3 years ago
Hello,

Kindly contact us at [email protected]. So that we could assist you in a better way.

Thanks.

Reply

How to Hit Api in React native and set Data in Flat List

API integration in react native

First Step:

Second Step:

Conclusion

Leave a Comment Cancel Reply

2 comments

Message Sent!