Restaurant Search App with React Native using Zomato API

I had delayed learning React Native for some time now. After working with React for quite sometime, it is the obvious next step.

So, i headed over to Udemy and started the highly rated Stephen Grider course.

He created a restaurant app with Yelp API, but since yelp is not available in India i decided to go ahead with Zomato API. Zomato is a popular food delivery platform in India.

Our Restaurant Search app will have a Search Bar to search anything about food and then three categories of Restaurants — Cost Effective, Bit Pricer and Big Spender.

We will generate our React native project using expo-cli. So, head over to terminal and run the below command.

It will show the below screen. Press enter.

Image for post
Image for post
The screen

Then, we will be prompted to enter the name of the project. Type the same name restroSearch and press enter.

Image for post
Image for post
Name

Once the installation is done, it will create a new folder restroSearch. Change to that and run npm start. It will open the http://localhost:19002 / in browser.

Image for post
Image for post
localhost

Now, i am running the output on a physical Android device. For running on a physical device, you need to head over to Play Store and install Expo

Now, open the app on your phone. You will get the below screen.

Image for post
Image for post
Expo App

Click on Scan QR Code, it will open Camera. Point it to the QR code in the browser and you will the below screen, after all installation is done.

Image for post
Image for post
Initial App

We will be using the StackNavigator in our project. So, go ahead and install these dependencies.

Open your project in Visual Studio Code and replace App.js content with below.

Image for post
Image for post
New App

Now, create a file SearchScreen.js inside src -> screens. You need to create these two folders also.

Image for post
Image for post
SearchScreen

This will change our Application in our Android app and will show the SearchScreen component.

Image for post
Image for post
SearchScreen

Let’s create the SearchBar first. First create a components folder inside src. The create a file SearchBar.js inside it. Add the below content in it.

Here we are using View, TextInput, StyleSheet from react-native. We are also using an icon for Search from expo.

The styling in react native is mostly done through camelCase notation.

Image for post
Image for post
SearchBar

Now, our app will look like below.

Image for post
Image for post
Restaurant Search

We will be passing a state from our parent component SearchScreen to SearchBar and will use callback to change it from SearchBar.

So, open SearchScreen.js and add a state and pass it to SearchBar.

Image for post
Image for post
SearchScreen Changes

Now, we will use those in our SearchBar component.

Image for post
Image for post
SearchBar Changes

Our search should start only when the user hit enter on the device. So, we will add the logic for the same next. Add a new callback in SearchScreen. We will later use it to call the zomato API.

Image for post
Image for post
SearchScreen

Next, add the same in SearchBar component.

Image for post
Image for post
SearchBar

Now, we can test it. Open you Android app and then type something on it and press the green enter key.

Image for post
Image for post
Searching

We can see the console log in our terminal after submitting.

Image for post
Image for post
console log

Next, we will do the API call to get the list of restaurant and search anything. So, head over to https://developers.zomato.com/api and get your API keys.

Zomato’s documentation is pretty good and contains swagger,so you can check the API there itself.

Image for post
Image for post
Zomato swagger

We will be using the Restaurant Search API mainly. I will be searching only the restaurants in Bangalore, so we will use the below GET api. We also need to pass our API keys in the header.

Next, we will head over to terminal and install axios

Next to use the zomato API, we will use the axios instance method. Create a folder api inside src and a file zomato.js inside it.

Image for post
Image for post
zomato file

Next, we will be creating a reusable hook. Create a folder hooks inside src and a file useResults.js inside it. Here we are hitting the zomato url and setting the result in results.We are also using an initial search, so that when the app loads we get some data.

Image for post
Image for post
hooks

Now, we will use these hooks inside our SearchScreen component.

Image for post
Image for post
Using hooks

Now, i our android app we get the result.

Image for post
Image for post
API

Next, we will create the component to show this result on screen. We will create a component ResultsList.js

Image for post
Image for post
ResultsList

Next, we will pass the title from SearchScreen

Image for post
Image for post
SearchScreen

In our app, we are showing three different categories of restaurants by price. Now, zomato categories them by price_range value. We will filter the array and pass different price list to different ResultsList.

Image for post
Image for post
Pricing

Next, let’s use this in the ResultsList component.

Image for post
Image for post
ResultsList

This will show the below in our App.

Image for post
Image for post
The Result

Now, let’s use the data an show it properly. We will use the FlatList to display the horizontal list, but use another component to show each item.

Image for post
Image for post
FlatList

Next, we will create the ResultsDetail component. It just take the item, which is pass and shows it with some styling.

Image for post
Image for post
ResultsDetail

It will show as the almost complete version of the App.

Image for post
Image for post
The App

You might have noticed, we were not able to scroll vertically on an Android phone. So, to fix that issue we have to use ScrollView to wrap our list and also need to change the View to and empty div <>

Image for post
Image for post
Scroll Issue

Now, we will add the logic to show more details of an individual restaurant, when the user clicks on it. For this we have to create a new Screen. Let’s first wire it up in App.js

Image for post
Image for post
App

Then we will add the Navigation logic to the ResultsList component. We are using withNavigation and passing the restaurant id to the ResultsShow component. With had wrapped the ResultsDetail with TouchableOpacity, so onPress we will be taken to the ResultsShow

Image for post
Image for post
Navigation

Now, inside screens folder create ResultsShowScreen component. Here we are receiving the id from the parent component and using it to another api call to zomato api to get the restaurant details.

Image for post
Image for post
ResultsShowScreen

Next, we will add some elements to show some details about the restaurant.

Image for post
Image for post
Some elements

Next, we will add some styles for these elements.

Image for post
Image for post
Some styles

Now click on any restaurant and it will open the details of the restaurant.

Image for post
Image for post
Restaurant details

You can find the code for the same in github here and the apk file can be downloaded from here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store