What are the most used Third-Party API for React Native Application?

It might be the fact that you have come across the phrase “API” before. There are many tech giants such as Twitter and Facebook, which have an API, an abbreviation for Application Programming Interface. But what exactly is meant by that?

We can consider third-party APIs to be a toolbox provided to developers by companies so that they can work with them. Put simply, APIs enable the developers to gain access to information as well as certain technologies. For instance, it will be possible to create a site showcasing your Spotify playlist by using the Spotify API. The good thing is that there is no need to create your own.

Third-party APIs, similar to an open-source applications, focus on the collaborative nature of coding. So, instead of creating every time from scratch, if you hire React Native developers, they will be capable of finding an appropriate third-party API and providing much more functionality to their apps. Taking this into consideration, they are similar to NPM libraries.

If you happen to be a beginner, it will be prudent to ensure that the proper API has been selected. For this, you are suggested to do comprehensive research. Make it a point that the most effective API has been chosen for your use case. Moreover, the API must be properly tested and well documented.

Don’t allow documentation to scare you. A lot of time might be consumed for integrating an API having plenty of documentation, but the entire process can be streamlined to a great extent by documentation. Make your research given that there are many types of APIs, and choose the best one for your app.

Plaid API Create in React Native Application

In this article, we will talk about one particular API known as Plaid, which allows apps to connect with the users’ bank accounts. This emphasizes that APIs can make programming quite simple and useful – highly sensitive and complicated data such as banking information becomes safely and easily accessible using an API. Moreover, plaid happens to be a good example of excellent documentation.

Must Read: API Development: Complete guide to building robust APIs

Server-Side 

1. “Register” your app after receiving developer access to the API.

3 API keys will be available to you: a secret, public key, and a client_id. An API key happens to be the key for the application of the developer to gain access to the API as a whole. In this Plaid example, a client_id can be considered a non-sensitive and public identifier used to initiate Plaid Link. A secret happens to be a private identifier which we need for accessing financial information. This must not be in client-side code. We are going to save these 3 API keys in a secrets.js file by making use of process.env.

process.env.PLAID_CLIENT_ID = 'YOUR_CLIENT_ID_HERE'

process.env.PLAID_SECRET = 'YOUR_PLAID_SECRET_HERE'

process.env.PLAID_PUBLIC_KEY = 'YOUR_PLAID_PUBLIC_KEY_HERE'

2. Let us require Plaid in your routes file which has been named plaid.js.

We will likewise provide our file with “access” to the secrets. Besides this, Plaid also offers different environments to you for building in: development, sandbox, and production. Make sure to use sandbox at all times while building your project.

const plaid = require('plaid')const PLAID_CLIENT_ID = process.env.PLAID_CLIENT_ID

const PLAID_SECRET = process.env.PLAID_SECRET

const PLAID_PUBLIC_KEY = process.env.PLAID_PUBLIC_KEY

const PLAID_ENV = envvar.string('PLAID_ENV', 'sandbox')

3. The Plaid client has to be initialized. This will provide us access to different methods and web endpoints which the developers have given us from Plaid.

const plaidClient = new plaid.Client(

  PLAID_CLIENT_ID,

  PLAID_SECRET,

  PLAID_PUBLIC_KEY,

  plaid.environments[PLAID_ENV]

);

Client-Side

We’ll keep this section short since it has much more to do with Plaid Link within a React Native project than it does with incorporating a third-party API. Although you might want to know how it was accomplished, we have not covered this topic in this blog.

Must Read: Steps To Follow To Debug and Release APK File in React Native

4. Make use of Plaid Link for connecting your User to Plaid. Render the PlaidAuthenticator in the Link Component which we have imported from react-native-plaid-link.

render() {

  return <PlaidAuthenticator

    onMessage={this.onMessage}

    publicKey="YOUR_PLAID_PUBLIC_KEY"

    env="sandbox"

    product="auth,transactions"

    clientName="YourAppNameHere"

  />

}

onMessage = (data) => {

  this.setState({data})

}

5. Use a thunk for sending the public token to the backend.

export const sendToken = token => {

  return async dispatch => {

    try {

      const res = await axios.post(`${server}/api/plaid/plaid_exchange`, { public_token: token });

      dispatch(sendPublicToken(res.data));

    } catch (err) {

      console.log('Error sending public token: ', err.message);

    }

  }

}

Back to Server-Side

Plaid makes use of POST requests for getting the app “GET” info: bank, transactions information, and accounts.

6. Make requests to Plaid after writing your routes.

app.post('/get_access_token', function(request, response, next) {

  PUBLIC_TOKEN = request.body.public_token;

  plaidClient.exchangePublicToken(PUBLIC_TOKEN, function(error, tokenResponse) {

    if (error != null) {

      console.log('Could not exchange public_token!' + '\n' + error);

      return response.json({error: msg});

    }

    ACCESS_TOKEN = tokenResponse.access_token;

    ITEM_ID = tokenResponse.item_id;

    console.log('Access Token: ' + ACCESS_TOKEN);

    console.log('Item ID: ' + ITEM_ID);

    response.json({'error': false});

  });

});

7. Make use of methods such as getTransactions provided by Plaid for making MORE requests.

plaidClient.getTransactions(accessToken, '2017-01-01', '2017-02-15',{

  count: 250,

  offset: 0,

}, (err, result) => {

  // Handle err

  const transactions = result.transactions;

});

In case your API permits you, it might also be feasible for you to make API calls to the API from the client-side application directly.

Data Flow between our Client-Side Application and our Server-Side Application (and our Server-Side Application and the Plaid API)

We are going to run through the data flow quickly.

A user uses Plaid Link and PlaidAuthenticator for logging into his bank account, which returns a public token. The client-side application sends this token to the server-side application. This public token is converted to an access token by the server-side application. Acting as a client, this server-side application requests transactions to the Plaid API/ server based on the access token. The information is received by then received by the server-side, and it is stored in the server. Now, it will be possible for the client-side application to make requests directly to the server for transactions.

Conclusion

Even though APIs might appear to be quite complex, it is not the real fact. Perhaps you have already created a CRUD app if you happen to be a new developer who is building his portfolio from scratch. For this, an API key will be required by you, which will enable you to make calls to Web API endpoints instead of your localhost. Integrate some sort of API for making your CRUD app even better. Making use of APIs will allow you to work more effectively in the long run.