Build a food listing app with React Native
In my previous blog, we have developed a food listing app that will display a list of recipe/meal and was built with ReactJS. Here, in this blog, we’ll create the same food listing app but now with React Native.
React also let’s you build mobile apps using its native library, written in JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.
Requirements:
1. Basic understanding of HTML, CSS, Javascript, and ReactJS.
2. NodeJS, NPM and create-react-native-app.
3. Code Editor(I’m using Sublime Editor).
Note: Above list is quite easy to install and use, so don’t sweat if you are listening to these words for the first time.
Topics which we’ll cover in this tutorial:
- React Native.
- Fetching data of an API.
- Styling.
Let’s jot down our plan.
- Create a react native environment using
create-react-native-app. - Fetching the data of an API using JavaScript’s built-in fetch API library.
- Using built-in native components to develop our app.
- Add native developer in your resume 😎.
Setting up native environment.
Note: Before this, download Expo application on your android or IOS devices. Expo is a free and open source tool chain built around React Native to help you build native iOS and Android projects using JavaScript and React. Android and IOS’s Expo links.
We will use create-react-native-app as our boilerplate for this application. Using create-react-native-app is very simple, just follow my lead:
$ npm install -g create-react-native-app
$ create-react-native-app whats-in-local-meal
$ cd whats-in-local-meal/
$ npm startWith npm start, you can see a bar code like graphic on our terminal. Remember you have installed expo app on your mobile devices, this is the right time to open it and scan the bar code.
Once you have scanned it, the JavaScript bundling process will start and a home page will be displayed on your mobile device which will be something like this
The reason for choosing expo is, it is easy to set up, instead of downloading heavy application like Android Studio for your Window PC or XCode for your macOS. Make sure, while using expo, your both PC and mobile device is connected on same network.
Catching up with API:
To display a list of recipes, we are gonna require an API which will fetch all the data from a database which is hosted on another planet(not actually). After running a marathon, I reached out to a site name TheMealDB. Its API section contains a list of various API requests from which I pulled out the one which will help me in displaying a list of meals.
https://www.themealdb.com/api/json/v1/1/latest.phpFor this project, I would like to go with some built-in native components that will definitely save our time.
Let’s go line by line.
Line 1: Importreact library
Line 2: Get some built-in components from react-native library like Text, View, FlatList, ActivityIndicator.
Line 10: Creating a constant URL which will hold our API endpoint.
Line 12: Start of our component Recipe.
Line 15: We are setting a state which is a JSON object with isLoading as name and false as its value. This check will make sure that our rendering of component is not before our API request.
Line 19: componentDidMount is a right place to put your API fetch request.
React native do provide Fetch API to do all your networking needs.
Line 33: contains render where component rendering takes place.
Line 58: StyleSheet is an abstraction similar to CSS Stylesheets. Think of it as writing CSS in JavaScript’s object.
Running this piece of code will give you a list of meal’s name and its type.
Keep up a good hope because you are on your way to complete your first native app, if you haven’t.
It’s time to add Image component and upgrading some styling to complete your food listing native app.
Above code are the final change that we made and voila, our native app is ready.
This masterpiece is available here.
Thank you for reading
Don’t forget to hit that clap button and share it with your friends and colleagues. In case of any doubts in this tutorial, please feel free to leave a comment.
