Build Your Own Mobile Application With

React Native, Redux, Firebase, and

Sketch
A Beginner's Guide To Programming Mobile Application
Mada Perdhana

2019
Table of Content

Table of Content 3

Book Introduction 9

Preparation 10
1.1 Mac OS Environment 10
1.1.1 React Native Installation 10
1.2 Linux Environment 10
1.1.2 React Native Installation 10
1.2 Code Editors 10
1.2.1 Atom 10
1.2.2 Microsoft Visual Studio Code 11
1.2.3 Sublime 11
1.3 Introduction to ESLint 11
1.3.1 Installation on Atom 11
1.3.2 Installation on Visual Studio Code 11
1.3.3 Installation on Sublime 11
1.4 Github 11
1.4.1 Introduction 11
1.4.2 Installation 11
1.4.3 Using Github 12

React and React Native 13

2.1 Introduction to React 13
2.2 Introduction to React Native 13
2.3 Creating A Component With JSX 13
2.4 Registering A Component 13
2.5 Destructuring Imports 13
2.6 Application Outline 13
2.7 The Header Component 13
2.8 Handling File Exports 14

UI/UX Design & Sketch 14

3.1 The Roles of UI/UX 15
3.2 A Value of Good Design 15
3.3 UI Vs UX 15
 3.4 UX Design 15
3.4.1 UX principles and UX stack 15
3.4.2 Full UX Design Stack 15
3.4.3 UX Design Process 15
3.4.4 Approaches of UX Design Process 15
3.4.5 UX Design Parts 15
3.5 UI Design 16
3.5.1 UI Design Parts 16
3.5.2 UI Prototyping 16
3.5.3 UI Design Principles 16
3.5.4 Techniques 16
3.5.5 UI Design Process 16
3.6 Mobile Application Design 16
3.7 Sketch 16
3.7.1 Installation 17
3.7.2 Art Boards 17
3.7.3 Shapes 17
3.7.4 Text And Alignment 17
3.7.5 Importing 17
3.7.6 More On Artboards 17
3.7.7 Shared Styles and Text Styles 17
3.7.8 Symbols 17
3.7.9 Exporting Artboards 17

Making A Good Looking Application 18

4.1 Styling With React Native 18
4.2 Styling Components 18
4.3 Flexbox 18
4.4 Header Styling 18
4.5 Reusable Header 18

Handling HTTP 19
5.1 Design API Based Data 19
5.2 Listing On Boiler Plate 19
5.3 Class Based Component 19
5.4 Lifecycle Methods 19
5.5 Network Handling 19
5.6 Component Level State 19
5.7 More On Component Level State 19
5.8 Rendering List Of Component 20
 5.9 Displaying Data 20
5.10 Reusable Components 20
5.11 Styling A Card 20
5.12 Component As Props 20
5.13 Cards Into Section 20

Layout Component 21
6.1 Layout With Flexbox 21
6.2 Positioning Elements on Mobile Interface 21
6.3 Image Processing 21
6.4 Displaying Image 21
6.5 Scrollable 21
6.6 User Input - Buttons 21
6.7 Styling Button 22
6.8 Handle User Input 22
6.9 Linking 22
6.10 Setting Button Text By Props 22
6.11 Wrapup 22

Firebase 22
7.1 Authentication Design 23
7.2 Root Component 23
7.3 Reuseable Component 23
7.4 Introduction To Firebase 23
7.5 Firebase Setup 23
7.6 Login Form 23
7.7 Handling User Input 23
7.8 More On User Input 24
7.9 Controlled Components 24
7.10 Input Text 24
7.11 Passing Props 24
7.12 Beautify Input 24
7.13 Wrapping Up 24
7.14 Password Type Input 24

Redux 24
8.1 Mockup And Approaches 25
8.2 Introduction on Redux 25
8.3 More on Redux 25
8.4 Depth in Redux 25
8.5 Application Boilerplate 25
 8.6 More On Boilerplate 25

Involving React 26
9.1 Rendering Header 26
9.2 Reducer And State Produce Design 26
9.3 Data Library 26
9.4 JSON Data 26
9.5 Connection Function 26
9.6 MapStateToProps With Connect 26
9.7 Quick Review 26

Handling List 27
10.1 Theory 27
10.2 ListView 27
10.3 Rendering Single Row 27
10.4 Styling List 27
10.5 Creating Selection Reducer 27
10.6 Introduction To Action Creation 27
10.7 Calling Action Creator 27
10.8 Adding Touchable 28
10.9 Rules Of Reducers 28
10.10 Expanding A Row 28
10.11 Moving Logic Out Of Components 28
10.12 Animation 28
10.13 Wrap Up 28

Sum Up And Go For Training! 29

11.1 Next App 29
11.2 Challange 29
11.3 Touch More Setup 29
11.4 More On Boilerplate Setup 29

Handling Data - React Vs Redux 30

12.1 Login Form in Redux 30
12.2 Rebuilding Login Form 30
12.3 Handling Form Update With Action Creator 30
12.4 Linking Action Creator 30
12.5 Typed Actions 30

Handling State 31
13.1 Immutable State 31
13.2 Creating Immutable State 31
 13.3 More On Creating Immutable State 31
13.4 Synchronous and Asynchronous Action Creator 31
13.5 Introduction on Redux Thunk 31
13.6 Redux Thunk in Action 31
13.7 More On Redux Thunk 31
13.8 Hardening Login User 32
13.9 Creating Users Account 32
13.10 Showing Error Message 32
13.11 Firebase 32
13.12 Showing Spinner 32

Navigating User 33
14.1 Dealing With Navigation 33
14.2 Navigation In Router 33
14.3 Handling Styling Issues 33
14.4 Displaying Multiple Scene 33
14.5 Navigating Between Routes 33
14.6 Grouping Scene With Bucket 33
14.7 Navigation Bar Button 33
14.8 Navigating To Form 34
14.9 Building Creation Form 34
14.10 Form Action 34
14.11 Handling Form Update At Reducer 34
14.12 Dynamic Property Update 34
14.13 Picker Component 34
14.14 Pickers And Styles Override 34

Firebase As Data Store 35

15.1 Firebase JSON Scheme 35
15.2 Data Security In Firebase 35
15.3 Creating Records 35
15.4 Default Form Value 35
15.5 Data Savings 35
15.6 Resetting Form Properties 35
15.7 Fetching Data 35
15.8 Storing Data 35
15.9 Dynamic Data Source 36
15.10 Transforming Object To Array 36
15.11 List Building 36

Code Reuse 37
 16.1 Reusing Form 37
16.2 Create Vs Edit 37
16.3 Reuseable Form 37
16.4 A Standalone Edit Form 37
16.5 Initializing Form From State 37
16.6 Updating Firebase Record 37
16.7 Clearing Form Attribute 37
16.8 Texting 37
16.9 Modals As Reusable Components 38
16.10 More On Modal Component 38
16.11 Styling Modal 38
16.12 Delete Action Creator 38
16.13 Wiring Up 38

Resource References 39
Book Introduction

In this book, you will learn how to build a simple mobile application using React Native
with Firebase as a data storing server. You will also learn how to design and use the
designer application, Sketch, to help you make your mobile application UI/UX better.

This book will cover basic knowledge about React Native and how to design a proper
UI/UX application, including using a popular designer tool name Sketch. By the end of
the book, you should have a piece of basic knowledge on how to develop a mobile
application, from the design stage to run the application on a mobile device.

Finally, hope you will enjoy the book and gain basic knowledge on how to build a mobile
application.

Cheers,

Mada Perdhana
1. Preparation

Before we start to build a mobile application with React Native, first of all, we need to
prepare the environment to develop and run React Native properly. In this chapter, we
will discuss how to prepare all needed elements to develop and run the application,
including development tools that usually used widely by programmers on developing a
mobile application using React Native.

This book will cover two operating systems, Mac OS and Linux. For Windows operating
system, you may refer to React Native installation page at
https://facebook.github.io/react-native/docs/getting-started#docsNav 
 

1.1 Mac OS Environment

1.1.1 React Native Installation

1.2 Linux Environment

1.1.2 React Native Installation

1.2 Code Editors

1.2.1 Atom

1.2.2 Microsoft Visual Studio Code

1.2.3 Sublime

1.3 Introduction to ESLint

1.3.1 Installation on Atom

1.3.2 Installation on Visual Studio Code

1.3.3 Installation on Sublime

1.4 Github

1.4.1 Introduction
1.4.2 Installation

1.4.3 Using Github

2. React and React Native

2.1 Introduction to React

2.2 Introduction to React Native

2.3 Creating A Component With JSX

2.4 Registering A Component

2.5 Destructuring Imports

2.6 Application Outline

2.7 The Header Component

2.8 Handling File Exports
3. UI/UX Design & Sketch

3.1 The Roles of UI/UX

3.2 A Value of Good Design

3.3 UI Vs UX

3.4 UX Design

3.4.1 UX principles and UX stack

3.4.2 Full UX Design Stack

3.4.3 UX Design Process

3.4.4 Approaches of UX Design Process

3.4.5 UX Design Parts

3.5 UI Design

3.5.1 UI Design Parts

3.5.2 UI Prototyping

3.5.3 UI Design Principles

3.5.4 Techniques

3.5.5 UI Design Process

3.6 Mobile Application Design

3.7 Sketch
3.7.1 Installation

3.7.2 Art Boards

3.7.3 Shapes

3.7.4 Text And Alignment

3.7.5 Importing

3.7.6 More On Artboards

3.7.7 Shared Styles and Text Styles

3.7.8 Symbols

3.7.9 Exporting Artboards

4. Making A Good Looking Application

4.1 Styling With React Native

4.2 Styling Components

4.3 Flexbox

4.4 Header Styling

4.5 Reusable Header

5. Handling HTTP

5.1 Design API Based Data

5.2 Listing On Boiler Plate

5.3 Class Based Component

5.4 Lifecycle Methods

5.5 Network Handling

5.6 Component Level State

5.7 More On Component Level State

5.8 Rendering List Of Component

5.9 Displaying Data

5.10 Reusable Components

5.11 Styling A Card

5.12 Component As Props

5.13 Cards Into Section

6. Layout Component

6.1 Layout With Flexbox

6.2 Positioning Elements on Mobile Interface

6.3 Image Processing

6.4 Displaying Image

6.5 Scrollable

6.6 User Input - Buttons

6.7 Styling Button

6.8 Handle User Input

6.9 Linking

6.10 Setting Button Text By Props

6.11 Wrapup
7. Firebase

7.1 Authentication Design

7.2 Root Component

7.3 Reuseable Component

7.4 Introduction To Firebase

7.5 Firebase Setup

7.6 Login Form

7.7 Handling User Input

7.8 More On User Input

7.9 Controlled Components

7.10 Input Text

7.11 Passing Props

7.12 Beautify Input

7.13 Wrapping Up

7.14 Password Type Input

8. Redux

8.1 Mockup And Approaches

8.2 Introduction on Redux

8.3 More on Redux

8.4 Depth in Redux

8.5 Application Boilerplate

8.6 More On Boilerplate

9. Involving React

9.1 Rendering Header

9.2 Reducer And State Produce Design

9.3 Data Library

9.4 JSON Data

9.5 Connection Function

9.6 MapStateToProps With Connect

9.7 Quick Review

10. Handling List

10.1 Theory

10.2 ListView

10.3 Rendering Single Row

10.4 Styling List

10.5 Creating Selection Reducer

10.6 Introduction To Action Creation

10.7 Calling Action Creator

10.8 Adding Touchable

10.9 Rules Of Reducers

10.10 Expanding A Row

10.11 Moving Logic Out Of Components

10.12 Animation

10.13 Wrap Up
11. Sum Up And Go For Training!

11.1 Next App

11.2 Challange

11.3 Touch More Setup

11.4 More On Boilerplate Setup

12. Handling Data - React Vs Redux

12.1 Login Form in Redux

12.2 Rebuilding Login Form

12.3 Handling Form Update With Action Creator

12.4 Linking Action Creator

12.5 Typed Actions

13. Handling State

13.1 Immutable State

13.2 Creating Immutable State

13.3 More On Creating Immutable State

13.4 Synchronous and Asynchronous Action Creator

13.5 Introduction on Redux Thunk

13.6 Redux Thunk in Action

13.7 More On Redux Thunk

13.8 Hardening Login User

13.9 Creating Users Account

13.10 Showing Error Message

13.11 Firebase

13.12 Showing Spinner

14. Navigating User

14.1 Dealing With Navigation

14.2 Navigation In Router

14.3 Handling Styling Issues

14.4 Displaying Multiple Scene

14.5 Navigating Between Routes

14.6 Grouping Scene With Bucket

14.7 Navigation Bar Button

14.8 Navigating To Form

14.9 Building Creation Form

14.10 Form Action

14.11 Handling Form Update At Reducer

14.12 Dynamic Property Update

14.13 Picker Component

14.14 Pickers And Styles Override

15. Firebase As Data Store

15.1 Firebase JSON Scheme

15.2 Data Security In Firebase

15.3 Creating Records

15.4 Default Form Value

15.5 Data Savings

15.6 Resetting Form Properties

15.7 Fetching Data

15.8 Storing Data

15.9 Dynamic Data Source

15.10 Transforming Object To Array

15.11 List Building

16. Code Reuse

16.1 Reusing Form

16.2 Create Vs Edit

16.3 Reuseable Form

16.4 A Standalone Edit Form

16.5 Initializing Form From State

16.6 Updating Firebase Record

16.7 Clearing Form Attribute

16.8 Texting

16.9 Modals As Reusable Components

16.10 More On Modal Component

16.11 Styling Modal

16.12 Delete Action Creator

16.13 Wiring Up
17. Resource References