React native building mobile apps with javascript

React Native - Building Mobile Apps with JavaScript

Build real-world iOS and Android native apps with JavaScript

Vladimir Novick

BIRMINGHAM - MUMBAI


React Native - Building Mobile
Apps with JavaScript
Copyright © 2017 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, without the
prior written permission of the publisher, except in the case of brief
quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the
accuracy of the information presented. However, the information contained in
this book is sold without warranty, either express or implied. Neither the
author, nor Packt Publishing, and its dealers and distributors will be held
liable for any damages caused or alleged to be caused directly or indirectly by
this book.
Packt Publishing has endeavored to provide trademark information about all
of the companies and products mentioned in this book by the appropriate use
of capitals. However, Packt Publishing cannot guarantee the accuracy of this
information.

First published: August 2017

Production reference: 1230817

Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham
B3 2PB, UK.

ISBN 978-1-78728-253-7

www.packtpub.com


Credits

Author

Copy Editor

Vladimir Novick

Dhanya Baburaj

Reviewer

Project Coordinator

Vijay Thirugnanam

Devanshi Doshi

Commissioning Editor

Proofreader

Smeet Thakkar

Safis Editing


Acquisition Editor

Indexer

Siddharth Mandal

Mariammal Chettiyar

Content Development Editor

Graphics

Onkar Wani

Jason Monteiro

Technical Editor

Production Coordinator

Akhil Nair

Shraddha Falebhai



About the Author
Vladimir Novick is developer, software architect, public speaker, and
consultant. Coming from a web programming background, he started
programming for mobile using React Native around 2015. Vladimir works in
the web, mobile, VR, AR, and Internet of Things fields daily, developing
complex enterprise-level software, consulting clients, contributing to open
source, and teaching, and talking at various meetups and conferences. He is
also the author of several courses and workshops.
Previously, Vladimir worked in the video, gaming, sports, and entertainment
industries where he architected and developed large-scale web applications
for hundreds of millions of users, each month.
I would like to thank several people who helped make this book a reality.
First, I want to thank Tatyana Novick, my wife. Her encouragement and
support is something that kept me going forward. Thanks to my kids for
supporting me and understanding that sometimes, daddy is busy writing.
Thanks to my dad for introducing me to programming back in the 90s.
Thanks to my mom, even though I kept the writing process a secret from you
until the release, the idea of presenting you a hardcopied book was one of the
initial drivers that encouraged me to write.
Thanks to Onkar Wani, my content development editor, whose
professionalism and help was invaluable.


About the Reviewer

Vijay Thirugnanam is a React developer from Bangalore, India. Before
working as an independent developer, he worked for more than 16 years,
delivering software solutions as an engineer, a consultant, and a manager. His
past experience includes working in organizations such as ABB, Dell, and
Microsoft. He holds a bachelor's degree from Indian Institute of Technology,
Madras.
His current passion is developing apps with React and React native. Apart
from that, he likes to take short breaks at resorts around Bangalore with his
family, his wife Shalini and daughter Tanishka.


www.PacktPub.com
For support files and downloads related to your book, please visit www.PacktPub
.com. Did you know that Packt offers eBook versions of every book published,
with PDF and ePub files available? You can upgrade to the eBook version at
www.PacktPub.com and as a print book customer, you are entitled to a discount
on the eBook copy. Get in touch with us at for more
details.
At www.PacktPub.com, you can also read a collection of free technical articles,
sign up for a range of free newsletters and receive exclusive discounts and
offers on Packt books and eBooks.

/>
Get the most in-demand software skills with Mapt. Mapt gives you full
access to all Packt books and video courses, as well as industry-leading tools
to help you plan your personal development and advance your career.


Why subscribe?
Fully searchable across every book published by Packt

Copy and paste, print, and bookmark content
On demand and accessible via a web browser


Customer Feedback
Thanks for purchasing this Packt book. At Packt, quality is at the heart of our
editorial process. To help us improve, please leave us an honest review on
this book's Amazon page at If you'd like to
join our team of regular reviewers, you can e-mail us at
We award our regular reviewers with free eBooks
and videos in exchange for their valuable feedback. Help us be relentless in
improving our products!



For my wife and kids, who believed in me and supported all the
way


Table of Contents
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Downloading the color images of this book
Errata

Piracy
Questions

1.

Understanding Why React Native is the Future of Mobile Apps
What is React Native?
The history of React Native
It all begun with ReactJS
Hackathon, that grew bigger
React Native today
The motivation of creating React Native
Mobile development is too specific
Taking the React approach
Making developer experience state of the art
How React Native is different from hybrid applications?
What are hybrid applications?
Why Native applications lead the way?
Is React Native really a Native framework?
How the React Native bridge from JavaScript to Native world works?
Information flow
Architecture
Threading model
The benefits of React Native
Developer experience
Chrome DevTools debugging
Live reload
Hot reload

Component hierarchy inspections
Web-inspired layout techniques
Code reusability across applications
Summary

2.

Working with React Native
Setting up an environment for developing iOS and Android apps
Installing projects with native code
Installing iOS dependencies
Installing Android dependencies
Installing JDK
Installing Android studio
Installing SDK and built tools
Setting up the ANDROID_HOME environment variable
Creating an Android virtual device
The development environment
Creating your application
Application with create-react-app and Expo
Introduction to JSX and how it's used in React Native
What is JSX?
Children in JSX
JSX props
Stateful versus presentational components
Presentational components
Stateful components
React lifecycle methods
Mounting
Updating

Structuring React Native apps and their resemblance to HTML
Thinking in React
Reusable components
Containers
Basic React Native components
The folder structure
Summary

3.

Getting Familiar with React Native Components
Platform-independent components
Basic components
View


Layouting
Touch events
Accessibility
Text
StatusBar
Images and media
Basic user interaction
Button
TouchableOpacity
TouchableHighlight
TouchableWithoutFeedback
Getting feedback from your application
ActivityIndicator
Modal

Dealing with lists of data
ListView
ScrollView
RefreshControl
FlatList
SectionList
VirtualizedList
Embedding web content
Handling user input
TextInput
Restricted choice inputs
Platform-dependent components
Detecting specific platform
Extensions
DatePickerIOS
Progress bars
Additional controls
SegmentedControlIOS
TouchableNativeFeedback
Platform-specific navigation
Navigation in React Native
The Navigator component
Summary


4.

Debugging and Testing React Native
Debugging your React Native apps
Developer in-app menu

Reloading your app
Reloading
Live reload
Hot reloading
Remote debugging
Debug with Chrome DevTools
Debuging our device
Logging
In-app errors and warnings
Errors
Warnings
Inspecting React Native components
Performance monitoring
Testing
Introduction to the Jest testing framework
Setup
Preset system
Basic syntax
Snapshot testing your React Native components
Working with functions
Mocking modules
Summary

5.

Bringing the Power of Flexbox to the Native World
Flexbox styling concepts and techniques
The flexbox layout
Aligning elements
Item dimensions

How different is React Native styling from CSS or inline?
Laying out our app
Dealing with background images
Applying styles conditionally
Best practices and techniques for styling your React Native applications
Dimensions
Style sheet
Split your styles


Code your styles
Extract common components
Summary

6.

Animating React Native Components
Understanding animations
Conventions
How animation works
Using the LayoutAnimation API for simple animations
Basic syntax
The preset system under the hood
Using Animated API for complex animations
Animated values
Calculations
Animated functions
Interpolation
Extrapolation
Combining several animations to create complex sequences

Panning and scrolling animations
Summary

7.

Authenticating Your App and Fetching Data
Getting familiar with Firebase
What is Firebase?
Firebase setup
Creating real-time database
Managing permissions
Bringing Firebase to React Native and fetching data
Initializing your app
Setting up Firebase database listeners
Writing data to Firebase
Fetching data in React Native
Websockets support in React Native
Fetching and uploading files
Setting up authentication at Firebase
Creating functional Login and Sign Up screens
Login screen
The Sign Up screen
Authentication logic
Authenticating via social providers


Summary

8.

Implementing a Flux Architecture with Redux or MobX
What is Flux architecture?
MVC problem
The unidirectional data flow solution
How it works
Redux concepts and usage
What is Redux?
Redux in a nutshell
Three principles
A single source of truth
State is read-only
Changes are made with pure functions
Basic building blocks
Actions
Reducers
Store
Middleware
Data flow
Connecting Redux to your app
Containers versus Components
Provider
Using connect
Getting relevant state keys with selectors
Using redux-thunk for async actions
Async data flow
Adding redux-thunk
Centralizing side effects
Mobx- a functional reactive Flux implementation
What is Mobx?
Basic concepts

State
Derivations
Actions
Connecting MobX to our app
Summary

9.

Understanding Supported APIs and How to Use Them
Linking libraries and APIs with native code


Auto linking
Manual linking
Linking libraries
Configuring build phases
Getting familiar with a list of native APIs covered by React Native
Notification APIs
Alert
AlertIOS
ToastAndroid
ActionSheetIOS
Vibration
PushNotificationIOS
Information APIs
AccessibilityInfo
AppState
NetInfo
PixelRatio
Dimensions

Platform
Settings
Input related
Clipboard
Keyboard
DatePickerAndroid
TimePickerAndroid
App related
InteractionManager
Linking
Image related
ImageEditor
ImageStore
ImagePickerIOS
Style related
Other various APIs
BackHandler
PermissionsAndroid
AdSupportIOS
Share


Retrieving and saving photos with CameraRoll API
Getting your exact location with GeoLocation API
IOS
Android
Usage
Learning about persistence with AsyncStorage API
Responding to user gestures with PanResponder
The Gesture responder system

PanResponder
Combining it with Animated
Summary

10.

Working with External Modules in React Native
Diving deeper into react-navigation
Navigators explained
Navigation
Redux integration
MobX integration
Setting the app navigation structure for a real app.
The best open source packages to use
Visuals and animations
react-native-vector-icons
react-native-animatable
lottie-react-native
Shoutem UI
NativeBase
react-native-elements
Social providers
Facebook
OAuth
Additional APIs
ExpoKit
Maps
Image Picker
Video
Toasts

Camera
Data related packages
react-native-fetch-blob


react-native-firebase
react-native-push-notifications
react-native-i18n
Boilerplates
Writing your own Native modules
Diving into iOS and Objective-C
Android
Creating folder structure and files
Creating a native module Java class
Creating a native module package
Registering the package
Integrating React Native with the existing apps
Summary

11.

Understanding Application Development Workflow by Recreating Twitter
Defining your application requirements
Defining your application architecture using a desired design
Setting up functional navigation and a wireframe for your application
SplashScreen
The Login screen
Main flow
Home
Discover

Notifications
Profile
Tweet
Mock data and style application screens including animations
Bringing Redux or MobX to your application and moving data mocks to a centralized stat
e
Redux
Refactoring all actions
MobX
Using the Twitter API to work with real data
Summary

12.

Deploying Your App to App Store or Google Play
Deploying iOS apps and how it's done in React Native
Join the Apple Developer program
Creating a certificate for your device


Signing your app to run on a device
Enable App Transport Security
Configure Release scheme
Registering our App ID
Archiving your app
Deploying Android apps and how it's done in React Native
Generating a Signed APK file
Distributing your APK
Introducing fastlane - automate your deployment workflow
Get to know Microsoft CodePush and integrate it with your application

So, how do we get started
Setting up your mobile client
Summary


Preface
The world of web development is diverse and complicated. New technologies
are introduced each year, creating competition between various libraries and
frameworks for their place under the sun. Some of these technologies have
emerged as web development community answers to problems introduced by
constantly evolving user needs. Some were introduced by big corporations,
such as Facebook or Google.
For React Native, it all started as an internal hackathon project between the
walls of Facebook offices, and since then, it has grown to become one of the
most popular frameworks. React Native did something that web developers
had tried to do for several years preceding the hackathon--writing mobile
apps in JavaScript. There were several ways to write mobile apps, but all of
them tackled the idea of hybrid apps.
The main idea was to write apps in HTML, JavaScript, and CSS, and put
them inside a thin native container, which would be responsible for rendering
all elements. This was all about one code base written using web technologies
and rendered on both iOS and Android. Many companies used this idea in
production apps, but soon, everyone who wrote mobile hybrid apps figured
out that the performance difference was noticeable and multiple bugs led to
frustration among web developers trying to break into the mobile
development world.
React Native had a different idea in mind. Its idea was to use techniques used
in the React library, which came a few years before React Native, and create
modular components using JavaScript, but without HTML or CSS involved.
React Native uses an internal mechanism to transform JavaScript to native

modules. With it, we are dealing with real native apps and not hybrid ones.
Performance-wise, apps became identical to native ones, even for complex
animations and interactions. React Native also wraps lots of iOS and
Android-core APIs and provides a simple bridging API to wrap your own
modules or even integrate React Native app inside your existing app.