A Short Future-Reference for Debugging, Security Issues, and API Usage (Yelp API) with React Native

As promised, I am back to share some beginner-level knowledge that I recently internalized all along with my ongoing full-stack Bootcamp. Last month our schedule was very intense, and I could hardly find time to write human-readable content other than machine-readable codes .

Security tips over Yelp API implementation with react-native

Anyway, let’s get started. Neither I nor you have plenty of time. In this short article, you will find some debugging and security tips over an API implementation with react-native, namely Yelp API.

“The Yelp API gives developers access to Yelp’s wealth of high quality, local content across 50 million businesses across 32 international markets.”

I won’t mention the details over the documentation just because it is clear enough. You can find further details here: Yelp API (https://www.yelp.com/developers) . But I can say that it is a fully-fledged API that can meet your needs for all front-end, back-end, and testing purposes.

I would like to emphasize that this writing is only focused on how to get a response from the API and additionally, over some basic security concerns. Anyway, after getting the response body from the endpoint, the sky is the limit. I am sure you have lots of great ideas on how to use and present that data in your outstanding projects.

Steps to follow:

• Get your API key from https://www.yelp.com/developers page.
• Create an app from https://www.yelp.com/login?return_url=/developers/v3/manage_app .
• Jump into your coding environment and initialize your react-native project. If you don’t have the necessary set-up yet, please visit https://reactnative.dev/docs/environment-setup .

Right here, let’s catch a breath and consider some security concerns. Be warned that this is an API with a personal API key. A common beginner fault is uploading the API credentials to GitHub. No need to mention the dangers of that. To avoid this, please follow the consecutive steps:

• Be sure that you have a .gitignore file in the root directory.
• Create a .env file and add it to your .gitignore file.
• Install these two packages to be able to manage environment variables within the react-native setting.

1. react-native-config (https://www.npmjs.com/package/react-native-config)
2. react-native-dotenv (https://www.npmjs.com/package/react-native-dotenv)

At that point, I would like to mention some hardships with regards to the possible obstinate emulator and/or npm related errors emerging from newly added packages in case you don’t fully abide by the instructions. Please, don’t be in a hurry in this phase. If you make a mistake here, believe me, you will waste lots of your time debugging to be able to see the lovely mobile screen again.

🚥 As a rule of thumb, do not install new packages while your node terminal on which your app is running is active. If you use CocoaPods, please remember running pod install (cd ios && pod install && cd ../ && react-native run-ios) before restarting your app.

The most common steps to fix unsuccessful react-native build

Yet, if the build is unsuccessful, don’t panic, this happens to the best of us. Just read the error message and behave accordingly. In most cases, a fresh npm install may be needed. Those are the most common steps for it (of course subject to change according to your development environment):

• Clear watchman watches: watchman watch-del-all
• Delete node_modules: rm -rf node_modules
• Install again: npm install or yarn
• Install pods: cd ios && pod install && cd ../ && react-native run-ios
• If needed, reset metro’s cache: yarn start –reset-cache
• If needed, for android: cd android && ./gradlew clean && cd ..

Assuming that you are done with the new package installations, let’s move over to the API call part. As I mentioned above, put your API key in your .env file (if it doesn’t exist, create one.) Here, use no quotations.

.env

YOUR_API_KEY=someApiKey33ClarusWayE2134

In your component, add the lines below to safely use your API keys without being exposed to the world. Yelp needs a header for the search string which you can easily create within an object and pass as a second parameter to fetch (or Axios) call.

SomeComponent.js

import Config from "react-native-config";

const apiKey = Config.YOUR_API_KEY;

const config = {
    headers: {
        Authorization: 'Bearer ' + apiKey,
    },
};

const fetchCafes = (location, term) => {
    fetch(`https://api.yelp.com/v3/businesses/search?                    term=${term}&location=${location}`, config)
        .then((response) => response.json())
        .then(json => {
            console.log(json.businesses)
        })
        .catch((error) => console.error(error))
        .finally(() => {//some code here});
}

Now that you see the response body with some help of the old good console.log command, the rest is upon you. Make some great projects with it. If you have read till here, you deserved a virtual hug from me.

For further details, you can visit my GitHub repository and explore the full source code there. Please don’t keep your expectations high, it is an easy sandbox project over which I implemented my newly learned react-native knowledge using a weather API (OpenWeather API – https://openweathermap.org/api), Yelp API – https://www.yelp.com/, navigation – https://reactnavigation.org/, and WebView – https://www.npmjs.com/package/react-native-webview.

YouTube link of the Yelp API, Weather API and React-Native Preview is here:

Pull requests and feedback are more than welcome. I am always ready to update my article according to your comments in order not to be the spreader of erroneous information. Hope to see you in my next article. Until then keep yourself safe and healthy.

Last Updated on November 18, 2023