Images haven’t loaded yet.

Please exit printing, wait for images to load, and try to

The complete guide to create your rst
print again.

mobile app with React Native and

Redux Sagas — Part 1
Xavier Perez - thexap Follow
Apr 5, 2018 · 4 min read

Learn how easily you can create a real life mobile app with React Native
and Redux Sagas

Objective
• The objective of this tutorial is to create a mobile app from scratch
step by step

• We are going to create a Cocktail app that is going to show images

of cocktails and we can navigate to other screen to see the details
of that cocktail.

• We will learn how to consume and fetch data from an external api.
We are going to use this public api to fetch data
(https://www.thecocktaildb.com/api.php)

• We will install and configure redux-sagas

The other parts

Part 2:
• We will configure navigation

• We will add a secondary screen to navigate from the main screen

Part 3:
• Add animations

Part 4:
• Add and configure Google admob to the app

Part 5:
• How to deploy to Google play store and Apple app store
Requisites
• Have react native cli installed

• Some knowledge of React

Source code
https://github.com/xap5xap/mobileApp

Final result of part 1

This is the app that we are build in the first part.

It shows a list of cocktails and its name

Basically it has one screen that request data from an external API and
present it in a grid list
Table of contents
1. Create React Native project

2. Fetch data from external api

3. Configure Redux Sagas

4. Create homescreen
5. Run the app

1) Create React Native project

• We are going to create our project and it will be called mobileApp.
You are free to name it as you want.

• Open the command line and type

react-native init mobileApp

• Let’s confirm that the app is running without problems in the

emulator.

• Open the terminal and change the directory to the mobileApp

folder and run the following command to run the app in the
emulator

react-native run-ios

• The app should open in the emulator

2) Fetch data from external API
Let’s change the folder structure in our project so that it is easy to
navigate and find files.

• In the root lets create a new folder called App

• Inside the App folder lest create a new folder called Services

Now, create a new file that will have the code that will consume the
data from the external api.

• In the Services folder, create a new file called Api.js

• Lets install a new package called apisauce

(https://github.com/infinitered/apisauce) that will make easy to
call the external API. It is not required to use this package to fetch
data from an API, but I will use that for this tutorial.

• Run the following command

yarn add apisauce

• Add the following code to the API.js file. Basically we are

exporting a function `getGlassCocktails` that fetches glass
cocktails. Here you can checkout the API documentation

3) Configure Redux-Saga
• Install the packages

yarn add redux-saga

 yarn add react-redux

yarn add redux

yarn add reduxsauce

yarn add seamless-immutable

Lets create new folders to better structure our app

• Inside the App folder create the folders: Containers, Redux,

Sagas, Components, Themes, Images

• Inside the Redux folder create the file CreateStore.js

• Inside the Redux folder create the file CocktailsRedux.js

• Inside the Sagas folder create a file CocktailsSagas.js

• Inside the Sagas folder create the file index.js

• Inside the Redux folder create the file index.js

• Please refer to the source code to see the actual

implementation of the files

4) Create the home screen

• Lets move the App.js file to the Containers folder and modify the
content to setup the redux store

• Inside the Containers create the file HomeScreen.js

• I used a package called react-native-animated-ellipsis to show

when fetching data the first time
4.1) Create the CocktailRowComponent
• The component is going to render the image and the name of the
cocktail inside the list

• Create a new file called CocktailRow.js inside the Components

folder

5) Run the app

• Run the app in the iOS emulator with the command

react-native run-ios
Summary
• This simple add was built on 4 simple steps

• Add code to fetch data from external API

• Configure Redux Saga

• Create the screen

• Style the screen

• In the future I will write the rest of the parts to make it mr

functional.
• Please refer to the source code to see the actual
implementation of the files