DEV Community

Cover image for Restaurant Search App with React Native using Zomato API
Nabendu
Nabendu

Posted on • Updated on • Originally published at nabendu.blog

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.

npx expo-cli init restroSearch
Enter fullscreen mode Exit fullscreen mode

It will show the below screen. Press enter.

The screenThe screen

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

NameName

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.

localhostlocalhost

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.

Expo AppExpo 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.

Initial AppInitial App

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

npm install react-navigation

npx expo-cli install react-native-gesture-handler react-native-reanimated
Enter fullscreen mode Exit fullscreen mode

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

New AppNew App

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

SearchScreenSearchScreen

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

SearchScreenSearchScreen

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.

SearchBarSearchBar

Now, our app will look like below.

Restaurant SearchRestaurant 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.

SearchScreen ChangesSearchScreen Changes

Now, we will use those in our SearchBar component.

SearchBar ChangesSearchBar 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.

SearchScreenSearchScreen

Next, add the same in SearchBar component.

SearchBarSearchBar

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

SearchingSearching

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

console logconsole 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.

Zomato swaggerZomato 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.

https://developers.zomato.com/api/v2.1/search?entity_id=4&entity_type=city&q=Kabab
Enter fullscreen mode Exit fullscreen mode

Next, we will head over to terminal and install axios

npm install axios
Enter fullscreen mode Exit fullscreen mode

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.

zomato filezomato 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.

hookshooks

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

Using hooksUsing hooks

Now, i our android app we get the result.

APIAPI

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

ResultsListResultsList

Next, we will pass the title from SearchScreen

SearchScreenSearchScreen

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.

PricingPricing

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

ResultsListResultsList

This will show the below in our App.

The ResultThe 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.

FlatListFlatList

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

ResultsDetailResultsDetail

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

The AppThe 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 <>

Scroll IssueScroll 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

AppApp

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

NavigationNavigation

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.

ResultsShowScreenResultsShowScreen

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

Some elementsSome elements

Next, we will add some styles for these elements.

Some stylesSome styles

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

Restaurant detailsRestaurant details

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

Top comments (0)