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.
|
1 2 3 4 5 6 |
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.
|
1 2 3 4 5 6 7 8 9 10 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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> )} |
So here is the complete code for that.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
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> )} } |
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.
[
{
“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”
}
]
}
]
}
]