The Complete Guide To Create Your First Mobile App With React Native and Redux Sagas - Part 1

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
1 import apisauce from 'apisauce'

2
3 const create = (baseURL = 'http://www.thecocktaildb.com/api
4
5 const api = apisauce.create({
6 baseURL,
7 timeout: 15000
8 })
9
10 const getGlassCocktails = () => api.get('/filter.php',
11
12 return {
13 getGlassCocktails,
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

The Complete Guide To Create Your First Mobile App With React Native and Redux Sagas - Part 1

Uploaded by

Copyright:

Available Formats

The Complete Guide To Create Your First Mobile App With React Native and Redux Sagas - Part 1

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

The Complete Guide To Create Your First Mobile App With React Native and Redux Sagas - Part 1

Uploaded by

Copyright:

Available Formats

Images haven’t loaded yet.

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

mobile app with React Native and

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

• We will install and configure redux-sagas

The other parts

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

• Some knowledge of React

Final result of part 1

It shows a list of cocktails and its name

2. Fetch data from external api

3. Configure Redux Sagas

1) Create React Native project

• Open the command line and type

react-native init mobileApp

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

• Open the terminal and change the directory to the mobileApp

• The app should open in the emulator

• In the root lets create a new folder called App

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

• Lets install a new package called apisauce

• Run the following command

yarn add apisauce

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

1 import apisauce from 'apisauce'

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,

• 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

4) Create the home screen

• Inside the Containers create the file HomeScreen.js

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

4.1) Create the CocktailRowComponent

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

5) Run the app

• 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

You might also like