React Native for Mobile Development, Second Edition Harness the Power of React Native to Create Stunning iOS and Android… (Akshat Paul, Abhishek Nalwaya)（Z-Library）
,
Mobile
Develop native iOS and Android apps with ease using React Native. Learn by doing through an example-driven approach, and have a substantial running app at the end of each chapter. This second edition is fully updated to include ES7 (ECMAScript 7), the latest version of React Native (including Redux), and development on Android. You will start by setting up React Native and exploring the anatomy of React Native apps. You'll then move on to Redux data flow, how it differs from flux, and how you can include it in your React Native project to solve state management differently and efficiently. You will also learn how to boost your development by including popular packages developed by the React Native community that will help you write less; do more. Finally, you'll learn to how write test cases using Jest and submit your application to the App Store. React Native challenges the status quo of native iOS and Android development with revolutionary components, asynchronous execution, unique methods for touch handling, and much more. This book reveals the the path-breaking concepts of React.js and acquaints you with the React way of thinking so you can learn to create stunning user interfaces. What You'll Learn Build stunning iOS and Android applications Understand the Redux design pattern and use it in your project Interact with iOS and android device capabilities such as addressbook, camera, GPS and more with your apps Test and launch your application to the App Store Who This Book Is For Anyone with JavaScript experience who wants to build native mobile applications but dreads the thought of programming in Objective-C or Java. Developers who have experience with JavaScript but are new or not acquainted to React Native or ReactJS.
10
Views
Registered users can read the full content for free
Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.
Page
1
React Native for Mobile Development Harness the Power of React Native to Create Stunning iOS and Android Applications — Second Edition — Akshat Paul Abhishek Nalwaya
Page
2
React Native for Mobile Development Harness the Power of React Native to Create Stunning iOS and Android Applications Second Edition Akshat Paul Abhishek Nalwaya
Page
3
React Native for Mobile Development ISBN-13 (pbk): 978-1-4842-4453-1 ISBN-13 (electronic): 978-1-4842-4454-8 https://doi.org/10.1007/978-1-4842-4454-8 Copyright © 2019 by Akshat Paul and Abhishek Nalwaya This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. Managing Director, Apress LLC: Welmoed Spahr Acquisitions Editor: Louise Corrigan Development Editor: James Markham Coordinating Editor: Nancy Chen Cover designed by eStudioCalamar Cover image designed by Freepik (www.freepik.com) Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail orders-ny@springer- sbm.com, or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation. For information on translations, please e-mail rights@apress.com, or visit http://www.apress.com/ rights-permissions. Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales web page at http://www.apress.com/bulk-sales. Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub via the book’s product page, located at www.apress.com/9781484244531. For more detailed information, please visit http://www.apress.com/source-code. Printed on acid-free paper Akshat Paul Gurgaon, Haryana, India Abhishek Nalwaya Jaipur, Rajasthan, India
Page
4
(This page has no text content)
Page
5
(This page has no text content)
Page
6
(This page has no text content)
Page
7
(This page has no text content)
Page
8
(This page has no text content)
Page
9
ix About the Authors Akshat Paul is a software architect and author of the books React Native for iOS Development and RubyMotion iOS Development Essentials. He is also a seasoned technical reviewer for books on the topics of React, React Native, and Microservices with top publishers. He has extensive experience in DevOps, mobile, and Web development. In other avatars, Akshat frequently speaks at conferences and meetups on various technologies. He was an invited speaker at the React Native Conference EU, Devops@scale Amsterdam, TheDevTheory Conference, RubyConfIndia, and the #inspect-RubyMotion Conference Brussels. He was also the keynote speaker at technology leadership events in Bangkok and Kuala Lumpur on TDD. Besides writing code, Akshat spends time with his family, is an avid reader, and is obsessive about healthy eating. More information about Akshat can be found at https://www.akshatpaul.com/. Abhishek Nalwaya is the author of three books and has spoken at many conferences and meetups, such as RubyConf India and the RubyMotion conference. He has extensive experience in DevOps, Web, and mobile development. Besides programming, Abhishek loves to run and cook healthy food. More information about Abhishek can be found at http://www.nalwaya.com/.
Page
10
xi About the Technical Reviewer Alexander Chinedu Nnakwue has a background in mechanical engineering from the University of Ibadan in Nigeria and has been a front-end developer for more than three years working on both Web and mobile technologies. He also has experience as a technical author, writer, and reviewer. He enjoys programming for the web, and occasionally, you can also find him playing soccer. He was born in Benin City and is currently based in Lagos, Nigeria.
Page
11
xiii Acknowledgments We would like to thank our families, who saw us through this book, talked things over, offered constructive feedback and provided support through our strenuous schedule without which conceiving this book wouldn’t have been possible. Also, we would like to thank Louise Corrigan, James Markham and the entire team at Apress. And especially Nancy Chen who gave us complete creative freedom to do things over the course of this book which some time took more time then expected. Writing a book is a long and arduous journey, but you all made it so easy for us.
Page
12
xv Introduction React is one of the most popular JavaScript framework as of 2019. It took web development by storm when first introduced and its popularity has been increasing among the developer community ever since. React Native took this one step further when first introduced in 2015 and helped build Native iOS apps with common knowledge of web technologies like JavaScript. In just a few years, React Native has become an important player in native mobile development, and extending its support for both Apple iOS and Google Android was a game changer. This required us to write second edition of this book, which covers both platforms end to end to help you create stunning React Native apps. This book is divided into ten chapters and each one teaches a unique aspect of building React Native applications. By end of this journey we believe you will be a master developer with React Native and will be able to publish your app to the Apple App Store or Google Play Store. We commence our journey with an introduction to React in Chapter 1, where you learn about core React concepts like Virtual DOM, one- way data flows, props, and state, and also build a small React application. In Chapter 2 we cover how to set up React Native and start building a simple Hello World program. This chapter also cover the anatomy of a React Native project and how to debug the application. In Chapter 3 we discuss design patterns like MVC, as well as new programming paradigms such as Flux and Redux. In this chapter you learn about Redux core concepts, how to use Redux with React Native, and the benefits of including it in a React Native application. Chapter 4 covers how to build a user interface (UI) with the help of Flexbox, navigation with React Navigation, and few critical UI components, such as touchable highlight, listview, scrollview, and more. In Chapter 5 we address how to implement device capabilities, including creating apps to use features like GeoLocation, MapView, Native Alert, WebView, and deep linking. Chapter 6 covers a key feature that is essential to any real-world application: communication with back-end servers. In this chapter you learn how to make requests to get data from a server and post data back to a server using various available React Native options. In Chapter 7, we discuss how to access native application programming
Page
13
xvi interfaces (APIs) that do not have a corresponding JavaScript library; this is building Native Bridge. This skill helps us harness all the features of native iOS and Android development. Chapter 8 covers how to write tests for our React Native application using Jest, and also introduces snapshot testing. This chapter also introduces a static type check commonly used in the React Native world, called Flow. In Chapter 9, once you have learned how to create a full-featured React Native application, it is equally important to test it with users and push it onto the Apple App Store and Google Play Store. This chapter describes how to beta test a React Native application with the distribution systems available for iOS and Android. We also cover how to create builds for iOS and Android, which is essential for submitting an application to the Apple App Store and Google Play Store. In the final chapter, Chapter 10, you learn about some popular React Native libraries and where to go next, how to get help, and how to stay in touch with the amazing React Native community. In all, we hope that by end of this book you are confident in building your next mobile application with React Native and launching it for both iOS and Android. All the best! InTroduCTIon
Page
14
1 © Akshat Paul and Abhishek Nalwaya 2019 A. Paul and A. Nalwaya, React Native for Mobile Development, https://doi.org/10.1007/978-1-4842-4454-8_1 CHAPTER 1 Learning the Basics: A Whistle-Stop Tour of React The journey of a thousand miles begins with one step. —Lao Tzu Before you embark on your React Native journey, you must know a little bit about React (also known as ReactJS or React.js). In this chapter, we quickly look at the core concepts of React, which will help you to work on React Native. This chapter introduces the following topics: • Introduction to React • Virtual Document Object Model (DOM) • One-way data flow • React installation and setup • Creating a first React Hello World app • Introduction to components • Props and state Let’s get started! React is different from most popular web technologies, and you will learn why as you move through this chapter. Its core concepts will open your mind to a new way of thinking if you have spent a considerable amount of time with traditional
Page
15
2 frameworks; this new way of thinking is sometimes called the React way of thinking. You might have heard the phrase “Write once, run everywhere,” but dismissed it as nearly impossible due to the explosion of different form factors (web, mobile, tablets). React has a different guiding principle: “Learn once, write anywhere.” That seems quite different, and liberating. We begin this first chapter with a quick tour of React, which will help prepare you for React Native. If you have an elementary knowledge of React, you can skip this chapter and move on to Chapter 2. According to the official documentation, React is a JavaScript (JS) library (not framework) for creating user interfaces (UIs). It was built in a combined effort by teams from Facebook and Instagram. React was first introduced to the world in 2013, and has taken it by storm, with community-wide acceptance and the benefit of being the technology at the heart of Facebook. According to official documentation, some consider React to be the V in a model-view-controller (MVC) framework, because React makes no assumptions about the rest of the technology stack used. You can use whatever technology you wish and you can create a single section of your app with React or React Native; you can also conveniently make changes in an already created application by incrementally adding React to it. Why React? Do we really need another JavaScript library in a world full of JavaScript libraries and frameworks? There is hardly a month that goes by without a new JavaScript framework introduced. React came into existence because its creators were faced with a significant problem: how to build large applications in which data change frequently. This problem occurs in almost any real-world application and React was created from the ground up to solve it. As you know, many popular frameworks are MVC or model-view-wildcard (MV*), but here’s a point to be noted and reiterated: React is not an MV* framework. It’s a just a library for building composable UIs for UI components with data that change over time. Unlike popular JS frameworks, React does not use templates or Hypertext Markup Language (HTML) directives. React builds UIs by breaking the UI into many components. That’s it, nothing else. This means that React uses the full features of programming languages to build and render views. Chapter 1 Learning the BasiCs: a WhistLe-stop tour of reaCt
Page
16
3 The following are some of the advantages of choosing React for your next project: • React uses JavaScript extensively: Traditionally the views in HTML are separated from the functionality in JavaScript. With React, components are created and there is one monolithic section where JavaScript has intimate knowledge of your HTML. • Extendable and maintainable: Components are formed by a unified markup with its view logic, which actually makes the UI easy to extend and maintain. • Virtual DOM: React applications are blazing fast. The credit for this goes to the virtual DOM and its diffing algorithm. • One-way data flow: Two-way data binding is a great idea, but in real- world applications it produces more pain than benefit. One of the common drawbacks with two-way data binding is that you have no idea how your data get updated. With one-way data flow, things are simple: You know exactly where data are mutating, which makes it easier to maintain and test your app. To have a strong foundation with a new technology, it’s necessary to understand its core concepts. The next section explores a few unique concepts of React, which will bring you one step closer to understanding this amazing technology. Virtual DOM In all web applications one of the most expensive operations from which an app suffers is mutating the DOM. To solve this problem, React maintains a virtual representation of the DOM (as shown in Figure 1-1), which is called Virtual DOM (VDOM). Along with a diffing algorithm, React is able to compute the data against the actual DOM and only update the part of the DOM that is changed. The amount of change is therefore less, which leads to a blazing fast application. In the beginning of your application you might not see it, but as your project balloons to greater complexity (which usually happens in real-world apps), you will begin to see the benefits of a snappy experience for users. Chapter 1 Learning the BasiCs: a WhistLe-stop tour of reaCt
Page
17
4 Manual DOM manipulation is messy, and keeping track of the previous state of the DOM is very hard. As shown in Figure 1-1, React solves this problem by keeping two copies of a VDOM. Next, a diffing algorithm is applied on these two VDOMs, which essentially checks for the changes that occurred and returns a stream of DOM operations. These DOM operations are then applied to the actual browser DOM. Let’s now understand in terms of components how a VDOM works. In React, every component has a state; this state is likely observable. Whenever there is a change in state, React essentially knows that this change requires a rerender. When the application state changes, it generates a new VTree; once again the diffing algorithm shares the DOM paths for required changes, as shown in Figure 1-2. This results in keeping manual DOM manipulation to a minimum. Figure 1-1. Virtual DOM and diffing algorithm operations Chapter 1 Learning the BasiCs: a WhistLe-stop tour of reaCt
Page
18
5 This feature of VDOM is not just important, but a killer feature of React. DOM access is super slow, and honestly speaking, the world has made it worse by hitting the DOM again and again in most applications. To make your application fast, you should access the DOM as little as possible, and this is beautifully handled by the implementation of VDOM. You won’t notice this with a small and trivial application, but once your app grows to include thousands of DOM elements all trying to get updated, React will not let your performance suffer. One-Way Data Flow React is primarily the V in an MVC pattern, but before you dive into the idea of one-way data flow in React, you must understand the challenges of MVC frameworks. One of the biggest challenges of an MVC framework is managing the view. As you know, the view component of the MVC framework is mainly the DOM representation. It is simple when you write code that interacts with the DOM, but it is very complicated for the framework to handle various DOM manipulations. Traditional MVC views generally encompass a lot of heavy UI, and as the data change even for a tiny element, it eventually rerenders the app again, and the cycle continues. The reason for this is that typically most of these MVC frameworks follow two- way data binding (see Figure 1-3). C1 Before (Components) After (Components) C2 C4 C5 C6 C7 C4 C5 C6 C7 C3 C2 C3 C1 Figure 1-2. Components with virtual VDOM Chapter 1 Learning the BasiCs: a WhistLe-stop tour of reaCt
Page
19
6 In JavaScript, data change in memory and they are bound to a view in the UI, which means that when data are modified in JavaScript, which is in memory, the data will be changed in the UI as well. In return, when data change in the UI (i.e., the DOM) by clicking a button or any other event, they get updated in memory also, keeping the two in sync. In theory, this works flawlessly and the idea is romantically perfect. However, in real-world applications, problems arise when you have a fairly complex and large application with multiple views representing data in one of your models. As you add more models and more views, this two-way data binding ends up as spaghetti with every change in data added to the pot, which sometimes even ends up in an infinite event loop where one view updates a model, which in turn updates a view, and so on, as shown in Figure 1-4. MODEL VIEW Data modifies view View modifies data Figure 1-3. Two-way data binding Chapter 1 Learning the BasiCs: a WhistLe-stop tour of reaCt
Page
20
7 Another issue with this system is that making changes comes at a very high cost. When you introduce a new developer to an application that is this complex, it’s tough to understand the impact one change might have in this abyss of spaghetti relationships. React follows one-way data flow to keep things simple, as shown in Figure 1-5. It is based on the concept of separation of concerns (SoC). This is a design principle in computer science in which an application or program is divided into distinct sections, each addressing a single or specific concern. The value of this design principle is that MODEL MODEL MODEL Complex application VIEW VIEW VIEW VIEW Figure 1-4. Unwanted spaghetti relationship Chapter 1 Learning the BasiCs: a WhistLe-stop tour of reaCt
The above is a preview of the first 20 pages. Register to read the complete e-book.
AI Reading Assistant
Whole-book reading guide from stratified index samples; jump to passages in the text
AI guide
【One-Line Pitch】
A hands-on, example-driven guide that takes JavaScript developers from React fundamentals to a working cross-platform mobile app, covering Redux state management, native device features, testing, and app store submission. Best suited for developers who know JavaScript but want to build native iOS and Android apps without learning Objective-C or Java.
【Book Arc】
- **Opening (~0%–15%)**: Establishes the React foundation—virtual DOM, diffing, components, state, and props—then sets up the React Native toolchain and walks through a first "Hello World" app, solving the problem of orienting readers who know JavaScript but not the React way of thinking.
- **Early (~15%–35%)**: Moves from Expo-based scaffolding to ejecting into native Xcode/Android Studio projects, explaining how React Native differs from hybrid and JavaScript-to-native approaches (separate layout threads, JavaScriptCore), and introduces Flux and Redux as a solution to state management at scale.
- **Middle (~35%–55%)**: Builds the running HouseShare app—Redux integration with actions, reducers, and a single store; UI work with react-navigation, NavigatorIOS, Flexbox layout, images, and touch handling—turning concepts into a functioning multi-screen interface.
- **Late (~55%–85%)**: Expands beyond the core framework into community packages, native device capabilities (camera, GPS, address book) via the Native Bridge, and testing with Jest, snapshot testing, and Flow type checking. (Excerpts do not detail the exact chapter boundaries here.)
- **Ending (~85%–100%)**: Covers beta testing and distribution, creating iOS and Android builds, submitting to the Apple App Store and Google Play Store, and points readers toward popular libraries and community resources for continued learning.
【Book Arc】
- **Opening (~0%–15%)**: React fundamentals and environment setup—virtual DOM, components, and a first React Native app.
- **Early (~15%–35%)**: Ejecting from Expo, understanding React Native's architecture, and the case for Flux/Redux.
- **Middle (~35%–55%)**: Redux in practice plus UI construction—navigation, Flexbox, images, and touchable components.
- **Late (~55%–85%)**: Community packages, native device access through the Native Bridge, and testing with Jest and Flow.
- **Ending (~85%–100%)**: Build creation, beta testing, and App Store/Google Play submission, plus where to go next.
【Key Takeaways】
- **React's virtual DOM and diffing algorithm are the conceptual core** (Opening): Understanding how React tracks state changes and minimizes manual DOM manipulation is the prerequisite for everything that follows in React Native.
- **React Native is architecturally distinct from hybrid and JavaScript-to-native approaches** (Early): It runs layouts on separate threads and uses JavaScriptCore to bridge JavaScript and native code, which is why animations and UI rendering stay smooth—a key mental model for performance decisions.
- **Redux solves state management at scale where MVC and Flux become unwieldy** (Early–Middle): The book contrasts MVC's growth problems with Flux's dispatcher/store model, then shows Redux's single store, actions, reducers, and `combineReducers()` in a working Todo example.
- **Ejecting from Expo is a deliberate trade-off** (Early): Expo enables rapid device testing without SDKs, but ejection unlocks Xcode and Android Studio—necessary for native builds and understanding the project anatomy.
- **Flexbox is the layout system for React Native UIs** (Middle): `flexDirection` and `flex` ratios control child flow and sizing, and mastering them is essential for responsive screens across device sizes.
- **Navigation is handled by community and platform-specific tools** (Middle): react-navigation provides cross-platform routing with history, gestures, and animations, while NavigatorIOS offers iOS-only UIKit navigation with back-swipe support.
- **The Native Bridge unlocks device capabilities** (Late): When a JavaScript library doesn't exist for a native API, writing a bridge lets your app access camera, GPS, address book, and other platform features.
- **Testing and distribution are part of the development lifecycle** (Late–Ending): Jest, snapshot testing, and Flow type checking catch issues before beta testing and build creation for App Store and Google Play submission.
【Reading Tips】
- **Deep-read Chapters 1–3** if you're new to React or Redux; the virtual DOM and Flux/Redux contrast are foundational and repay careful attention.
- **Skim the setup and ejection sections** if you're already comfortable with React Native tooling—the Expo-to-Xcode/Android Studio transition is mechanical once you've done it once.
- **Follow the HouseShare app build hands-on**; the book is explicitly example-driven, and typing the code (rather than reading it) is where the concepts stick.
- **Treat the testing and distribution chapters as reference**—return to them when you're actually preparing a release rather than reading linearly.
- **Watch for version drift**: the second edition targets ES7 and a specific React Native version; expect some commands and package versions to have moved on since publication.
【Coverage Limits】
The excerpts cover the book's structure, early chapters, and key themes well, but do not detail the exact content of the native device, testing, and distribution chapters beyond their stated scope. Specific code examples, chapter titles, and later-chapter depth are only partially represented.
Passage locations
Excerpt 1
ut dreads the thought of programming in Objective-C or Java. Developers who have experience with JavaScript but are new or not acquainted to React Native or...
View in text
Excerpt 2
hapter 1 Learning the BasiCs: a WhistLe-stop tour of reaCt render() { return ( <div> <input id="text" onChange={this.handleChange} value={this.state.text} <b...
View in text
Excerpt 3
3- 2). Figure 3-2. MVC pattern for a large application Wow! That is an explosion of arrows. Welcome to the real world where many models and views interact w...
View in text
Excerpt 4
takes a route configuration object and because it returns a React component, we can use this in the App component. It provides a way for your app to transiti...
View in text
Recommended for You
{{#thumbnailUrl}}
{{/thumbnailUrl}}
{{^thumbnailUrl}}
{{/thumbnailUrl}}
Loading recommended books...
Failed to load, please try again later
Tip the Site
Scan the WeChat Pay or Alipay code to tip. No login required.
WeChat Pay
Alipay