opencodez

React Native:Tutorial #5 – React Native API Integration

Pavan

React Native API Integration is one of the easiest way to fetch data from a remote urls. You can user the API integration to use not only GET request but we can also use any other HTTP requests like POST, PUT, DELETE easily on both Android and iOS using a single piece of code. In this tutorial, we will learn how to do a GET request with one example. Our application will fetch some dummy data and populate it in the application.

If you have not read previous articles in this series, we request you to do so-

Tutorial Index

  1. Tutorial #1 – React Native – Introduction
  2. Tutorial #2 – React Native Props and State
  3. Tutorial #3 – Styling React Native App
  4. Tutorial #4 – React Native UI Components
  5. Tutorial #5 – React Native API Integration
  6. Tutorial #6 – React Native Animation
  7. Tutorial #7 – Top 10 React Native libraries

Fetch API:

React native uses one API called Fetch API for handling HTTP requests. This is the same API used in web applications. If you have used ‘fetch’ before, this guide will be easier to understand. One global method called ‘fetch()’ is used to fetch data. This is an asynchronous method. Its simplest form can take only one argument : the url of the data that we are fetching.We can use it to fetch data asynchronously and perform operations on that data once the fetch is completed. For example :

fetch('https://websiteurl.com/data.json');

That’s it.

Fetch deals with Request and Response objects. As you have seen above, fetch can be used minimum one argument. It returns one Promise object. It resolves to the response to that object. Once we get the Response, we can access other body params.

Other Arguments for Fetch API:

fetch also takes one second argument that can be used to customize the request. We can change the type of request like ‘POST’, ‘GET’ , ‘PUT’ etc. and also we can customize the header and body of the request. For example :

fetch('https://api.mywebsite.url/v1/postdata', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    param1: 'value1',
    param2: 'value2',
  }),
});

In this example, we are making one ‘POST’ request with a header and body values. The body is of type JSON.

Handling Response Data :

As explained above, we can handle the response using the Promise object returned by fetch. We can either use ‘then’ to handle this promise or any ‘async await’ function.

fetch('https://api.mywebsite.url/v1/postdata', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    param1: 'value1',
    param2: 'value2',
  }),
});

In this example, we are fetching the data and converting the data to ‘json’ using its JSON. Async await example is at the end of the article.

Request Properties and Methods :

Request() constructor is used to create a new Request object. If you are receiving the Request object access various properties of the object. You can its find below those properties and a brief details of each-

Properties (read only) :

Methods:

Below are some methods of Request object that you can use readily.

Response Properties and Methods :

Similar to Request, Response object also has some properties and methods, which you can check below-

Properties(read only) :

Methods :

Running Example:

Let’s learn fetch with one simple example.

import * as React from 'react';
import { Text, View, StatusBar } from 'react-native';
export default class App extends React.Component {
  state = {
    jsonData: '',
  };
  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/posts/1', {
      method: 'GET',
    })
      .then(response =x response.json())
      .then(json =x {
        this.setState({
          jsonData: json.body,
        });
      })
      .catch(error =x {
        console.error(error);
      });
  }
  render() {
    return (
      xView style={{ paddingTop: 30 }}x
        xTextx{this.state.jsonData}x/Textx
      x/Viewx
    );
  }
}

In this example, we are fetching dummy data from the ‘jsonplaceholder’ API. This is a open API and you can use it for testing.

  1. ‘App’ is a react component that has one ‘state’ with one key ‘jsonData’.
  2. In the ‘render’ method, it returns one ‘Text’ component that is showing the value defined by ‘jsonData’. This value is read from the ‘state’ object. By default the value of ‘jsonData’ is empty. Once the data is fetched, it will set the value to ‘jsonData’ and reload the component.
  3. componentDidMount method is called once this component is loaded. Inside this method, we are using ‘fetch’ to make one GET request to the json API. It returns the response promise and we are using this promise object to get the ‘json’ value from that response.
  4. Finally, the body of that json value is set to the ‘jsonData’ key. Once the value of state is changed, it will re-render the component UI and the json value will be shown in the UI like below :

As you can see in the above example that the json data is fetched and shown in the UI.

We can also use async-await while fetching like below :

async function getJsonData() {
  try {
    let res = await fetch(
      'https://facebook.github.io/react-native/movies.json',
    );
    let json = await res.json();
    return json.data;
  } catch (error) {
    console.error(error);
  }
}

You can use any one of the above function, totally depends on the architecture of the application.

Note:

For iOS applications, if a request is not SSL encrypted, it will be blocked or it will not work. This is the default behavior. You can avoid it by adding an ATS or app transport security exception.

Conclusion

The article has shown us how easy it is to integrate any third party API, Rest Services in React Native Application.

Please give it a try and let us know your comments.

Tutorial Index

  1. Tutorial #1 – React Native – Introduction
  2. Tutorial #2 – React Native Props and State
  3. Tutorial #3 – Styling React Native App
  4. Tutorial #4 – React Native UI Components
  5. Tutorial #5 – React Native API Integration
  6. Tutorial #6 – React Native Animation
  7. Tutorial #7 – Top 10 React Native libraries