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.

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.

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.

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).

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.

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 it simplifies development to create a maintainable and scalable application. This leads to modularized code where an individual section can be reused, developed, and modified independently. This makes so much sense and is indeed an example of intelligent thinking.

Installation and Setup

To understand practical examples, you must first set up your environment to run your React code. Because React is just a node module, there are lot of different ways to set up a React project. We can include React in existing projects using npm or yarn and start using it. If you are starting a new project, we recommend using the create-react-app npm package. It is an out-of-the-box command-line interface (CLI) created by Facebook that creates a basic structure for the React app and takes care of ES7+ translation though Babel and Webpack. You don’t need to focus on configuration; instead you can focus on writing React code. You can find more details about this module on its official npm page. If it interests you, you can also check its github repo from here to look at its documentation: https://www.npmjs.com/package/create-react-app .

This command installs create-react-app globally.

where application name is the desired name of the application. We need to use npm naming conventions, so the name should be in lowercase and cannot start with a dot or underscore.

Introduction to Components

Components are the smallest units in React application development; they are indeed the most fundamental part of React. React is a library for building UIs and components are the key for creating any UI in React. You might think of it as widgets (like in Flutter) that you can plug in anywhere. These components define how DOM elements are created and how users can interact with them. The whole concept of components is that they are totally encapsulated, making them easy to test and reuse.

Creating reusable components is a work of art, and React provides many features for you. We will do a deep dive into them soon, but first let’s open the hello world app we created.

This is the main App component. As you can see, it’s just a JavaScript file that contains some HTML code. If you have been building software for some time, you know it is a best practice to keep your HTML and JavaScript code separate. Looking at this example, it goes against this fundamental best practice. The reason this best practice exists is to decrease coupling and increase cohesion, which means we write the UI in HTML and logic in JavaScript. The challenge with this approach is that we can only attach behavior to HTML through HTML elements (like ID, class, etc.). A library like jQuery is a good example of this. As your files grow, it becomes difficult to manage and test your code. React components solve this problem very well.

It lets you create JavaScript objects using HTML syntax. Components serve two purposes: templates and display logic. Therefore, markup and code are tied together intimately. Display logic often is quite complex and to express it using template languages does become difficult. The best way to solve this problem is to generate HTML and components from JavaScript itself. React JSX solves these problems with its HTML-type syntax by creating React tree nodes.

Going back to the preceding code snippet, App is a JavaScript class that is inherited from the React Component class API. Components can be created in two ways: one using class and the other using function. Components created using function are also called stateless components. We discuss this in detail in later chapters.

The App class has a render function or method. As the name suggests, it is used for rendering of our content, JSX markup. render is always a pure function, which means it is immutable. It’s like a single frame in a movie, as it represents the UI at a certain point in time. Updating the state inside a render will again call the render function, which once again, triggers render(), which then does the same thing, infinitely.

We are also importing Cascading Style Sheets (CSS) in the App component. Create React App uses Webpack, which takes care of importing CSS in the final bundle.

Now browse http://localhost:3000/, as shown in Figure 1-6.

This is the preferred way of creating a component if your state is not changing. It eliminates the class-related extra code like extends And constructors and makes the code more testable.

Deep-Dive into Components

In this section, we explore the vital concepts of components, which will help you work with them easily. We will learn about Props and State, which help manage the flow of data or state. The Props and State objects have one important difference. Inside a class component, the State object can be changed, whereas the Props object cannot. Now let’s take a deeper look into both Props and State.

Properties

Props is simply shorthand for properties. Props are how components talk to each other and the data flow is immutable. Props are passed down the component tree from parent to children and vice versa. One key point to remember is that props cannot be mutated when referenced from a parent component.

Let’s update our Hello World example to use props. Open App.js and add the following line:

<Message text="Hello to React World"  />

Here we are initializing the Message component with a prop named text. Let’s update the Message component to display the text:

import React, { Component } from 'react';

class Message extends Component {

  render() {

    return (

      <div>

        {this.props.text}

      </div>

    );

  }

}

export default Message;

If you refresh your browser, you will see a message from the property for your inner HTML.

As your application grows, you need to make sure your components are correctly created in the first place. In the case of a property, you can specify a kind of property with a range of validators. This ensures and validates the kind of data received. Let’s take look at this by updating our Hello World example. The Message components that we created accept prop text, so this string will always be required to render a Message component. Let’s update our Message component.

import React, { Component } from 'react';

import PropTypes from 'prop-types';

class Message extends Component {

  render() {

    return (

      <div>

        {this.props.text}

      </div>

    );

  }

}

Message.propTypes = {

  text: PropTypes.string.isRequired

};

export default Message;

Now to test this, go to App.js and temporarily remove prop from Message:

<Message />

Now check the console log in your browser, as shown in Figure 1-7.

Prop validation is a great module that can help developers to hunt down bugs. Here, the propType keyword signifies a hash of prop names and their types.

There are many other property types. Note that you can add isRequired to the end of any propType to make it required.

//some specific JS primitive

  optionalArray: PropTypes.array,

  optionalBool: PropTypes.bool,

  optionalFunc: PropTypes.func,

  optionalNumber: PropTypes.number,

  optionalObject: PropTypes.object,

  optionalString: PropTypes.string,

  optionalSymbol: PropTypes.symbol,

//if a value of a prop is necessary

        numberType: React.PropTypes.number.isRequired

There is also a default type in properties via the keyword getDefaultProps. For example, in the same component, you can mention default types for your text properties:

static defaultProps = {

 text: 'Default Hello World'

}

The defaultProps will be used to ensure that this.props.text will have a value if it was not specified by the parent component.

State

In the last section, you learned about properties, which are static values that are passed into your component. State, on the other hand, is maintained and updated by the component. State is used so that a component can keep track of information in between any renders that it does. When you setState it updates the state object and then rerenders the component. We can think of props variables used for component initialization, whereas state is like internal data that affects the rendering of components and is considered private data.

If you run this snippet, you will see the result shown in Figure 1-8 in your browser.

Now when you add some name in the text box, it will automatically reflect in label, as shown in Figure 1-9.

Like any other language, JavaScript class has constructors, a function that will get called whenever a new object is created. It’s important to call a super if we want to update the constructors. Calling this function will call the constructor of our parent class and allows it to initialize itself.

This new function, handleChange, takes an event called (e) and updates the value text state.

The input box has an onChange event that calls your custom method handleChange whenever the state gets updated. As you type in the text box, your printed message gets updated instantaneously.

Summary

This chapter provided a quick tour of React. Before you begin with the next chapter, let’s recap what you have learned so far. We introduced the React library and the reasons behind its invention. Then you learned how to install and set up React. You studied the fundamentals of this technology, such as VDOM, one-way data flow, and JSX. You also got an introduction to components, and took a closer look at components, understanding how to use states and props with components.

Now that you are equipped to code and work in the React ecosystem, the your journey begins in the next chapter as we start working with React Native.

What Is React Native?

React Native is an open source platform for developing native mobile applications; it was developed largely by a team at Facebook. The cool part of working with React Native is that your program uses standard web technologies like JavaScript (JSX), CSS, and HTML, yet your application is fully native. In other words, your application is fast and smooth, and it is equivalent to any native application built using traditional iOS technologies like Objective-C and Swift. However, React Native does not compromise in terms of performance and overall experience, like popular hybrid frameworks that use web technologies to build iOS apps.

React Native aims to bring the power of React, which was explained in Chapter 1, to mobile development. In the words of the React team, “Learn once, write anywhere.” Working with React and React Native, you will see how many of your components built for the Web using React can be easily ported to your React Native iOS apps with little or no modification. React Native introduces a highly functional approach to constructing UIs that is very different from the traditional iOS development approach.

Although React Native was built by Facebook developers, it’s an open source project. The code is available at https://github.com/facebook/react-native .

Installation

Let’s do a quick, one-time setup of React Native. React Native is an assortment of JavaScript and Swift code, so you need tools that create, run, and debug your native application written in JavaScript. Let’s go one by one.

Your First App

Now that you are all charged up about React Native and have your system set up, it’s time to create your first application. To keep things simple, in the beginning just follow along. Sometimes you might feel disconnected by monotonously typing in the code, but following along is enough for now. Remember that mimicry is a powerful form of learning; it’s how we learned most of our skills, such as talking, reading, and writing, and it’s how you will learn to program with React Native. As you proceed, this method will help you understand thoroughly why you authored certain pieces of code.

Throughout the book, you will create one application and take it from just Hello World to a full-blown, distribution-level application, except in a few places, where we need to digress to explore a concept independently. Before you set it up, then, let’s talk about the problem you plan to solve. The app you will create during the course of this book plans to solve a few housing problems; it will be a very primitive version of any popular property search application. Let’s call it HouseShare. It will have some rudimentary features like listings, creating an entry, geolocating a property, and a few more. As you move along, you will see how various React Native features fit with your application.

That’s quite a lot, but in this chapter you just create the basic structure for your project using React Native and some Hello World code.

Creating a Basic Skeleton

Fire up your terminal and type in the following command:

create-react-native-app HouseShare

...

...

...

Success! Created HouseShare at /Users/abhisheknalwaya/Documents/book/HouseShareInside that directory, you can run several commands:

yarn start

Starts the development server so you can open your React Native app in the Expo application on your phone.

yarn run ios

  (Mac only, requires Xcode)

Starts the development server and loads your app in an iOS simulator.

yarn run android

  (Requires Android build tools)

Starts the development server and loads your app on a connected Android device or emulator.

yarn test

Starts the test runner.

yarn run eject

Removes this tool and copies build dependencies, configuration files, and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing this:

cd HouseShare

yarn start

Happy hacking!

So far we have used Expo a few times, so what is Expo? Expo is an open source tool chain that is built around React Native to help build iOS and Android apps. Expo is the fastest way to kickstart your React Native development. Because it comes out of the box with React Native, you don’t need to perform any additional setup on your machine. The only extra thing you need to do is to install the Expo application from the Apple App Store for iOS and the Google Play Store for Android. Using this app, you will be able to test and interact with the application you are building during the development stages.

This code uses the CLI tool to construct a React Native project that is ready to build and run as is. This command creates the basic folder structure for your React Native iOS project.

> cd HouseShare

> yarn start

You should see output similar to Figure 2-1.

This will start a development server for us and print a QR code in your terminal.

To use this QR code, download the Expo app ( https://expo.io/ ) for iOS or Android on your device.

If you are using Android, just scan the QR code in your terminal from the Expo app and your app we automatically load. If you are using iOS, select “s” in your terminal, as shown in Figure 2-2.

Now open the e-mail, shown in Figure 2-3:

Note

Your mobile device needs to be connected to the same wireless network as your computer. Otherwise you will not able to open the app.

If the Expo app is already installed on your device and you click the link it will automatically run the React Native app in the Expo app, as shown in Figure 2-4.

That was really quick and easy. Without installing the iOS and Android software development kit (SDK), we can run the app on our device using Expo.

Thanks to a single command, the basic structure of your project is in place and your application is loaded in the device. Also note that the terminal always needs to be open. This is the Node package manager for React Native. If you kill this, the app will stop working.

Terminal is opened to start the React Native Packager and a server to handle the preceding request. The React Native Packager is responsible for reading and building the JSX (you’ll look at this later) and JavaScript code.

Set up your project in any editor you prefer. React Native does not force you to use nor does it have a preference for any specific editor, so you can continue to use your favorites.

Now let’s update some code in our application. Add the following code in App.js:

import React from 'react';

import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {

  render() {

    return (

      <View style={styles.container}>

        <Text>

          Hello World

        </Text>

      </View>

    );

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    justifyContent: 'center',

  },

});

Just save the file, and then check the Expo app on your device. It automatically reloads the page and shows you the screen shown in Figure 2-5.

That was quick! In a fraction of a second you can see the changes you applied. You don’t need to compile the code and restart the simulator for React Native changes. If you have done any native iOS app development before, pressing Refresh to see the changes might seem like a miracle.

Now, let’s understand the code. At the top of the file are the following lines:

import React from 'react';

import { StyleSheet, Text, View } from 'react-native';

This loads the React module and assigns it to a React variable that can be used in your code. React Native uses the same module-loading technology as Node.js; this is roughly equivalent to linking and importing libraries in Swift.

You are assigning multiple object properties to a single variable; this is called destructuring the assignment. This cool feature is in there in versions of JavaScript after ES6. Although it is optional, it’s very beneficial; otherwise, every time you use a component in your code, you would have to use a fully qualified name for it, such as React.Stylesheet, and so on. This saves quite a bit of time.

Next, you create a view:

export default class App extends React.Component {

  render() {

    return (

      <View style={styles.container}>

        <Text>

          Hello World

        </Text>

      </View>

    );

  }

}

React basic building blocks are called components. You can use the React.Component method to create custom component classes. This class has just one function, render(), which is responsible for what is shown on the screen. You use JavaScript syntax extensions (JSX) for rendering the UI. JSX is a JavaScript syntax extension that looks similar to XML.

Now you define the styling of your app. Here you will use Flexbox; it is similar to what CSS is to HTML. For now, you can type this code. We explain styling in the next chapter.

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    justifyContent: 'center',

  },

});

You can see that this styling is very similar to CSS; you can define font size, alignment, and so on.

Prerequisites for Running App on a Simulator

Using the Expo iOS or Android application to test your app, there is a downside: You can’t always carry your devices for testing your application. For such purpose there are simulators provided by both iOS and Android to be set up on your development machine. The following are few prerequisites to set them up.

Running the App on a Simulator

Now let’s go back to our application and start the app (see Figure 2-6):

yarn start

This will install Expo client on the emulator and run your React Native app. You can also use commands like yarn ios or yarn android to start the simulator with the app installed in it rather than loading the app inside the Expo simulator app.

It’s Not a UIWebView

You are using web technologies, but your app does not have a web component; it has a native component. Open Debug ➤ View Debugging ➤ Capture View Hierarchy (see Figure 2-7).

As you traverse through the tree of UIWindow, you’ll see that there is no UIWebView in the code, and “Hello World !!” is the call of RCTText, as shown in Figure 2-8.

What Makes React Native Different?

Apps created using these strategies have performance issues. WebView-based apps are slow because they use the DOM, and DOM manipulations are expensive, which leads to performance issues. As stated in a blog post at Flipboard (see http://engineering.flipboard.com/2015/02/mobile-web/ ), “You cannot build a 60fps scrolling list view with DOM.” This is one of the fundamental problems with apps developed through this technique: Although development time might be quick, you end up with a sluggish experience.

The other strategy, where the framework imitates JavaScript and HTML, and converts them to native code, has other challenges. Although the final app is native in nature, there is a basic issue during this conversion from JavaScript to native: It runs on the main thread. In these apps, you interface directly with native objects all the time, which leads once again to a slow and sluggish experience.

React Native is fundamentally different from these two approaches. It runs all layouts on separate threads, and your main thread is free to update the UI, which makes the animation and UI rendering smooth, just like 100 percent pure native apps.

React Native uses the JavaScriptCore framework to run JavaScript. In iOS 7, Apple introduced a native Objective-C API for JavaScriptCore. This framework allows JavaScript and Objective-C to talk to each other. This means you can create and call JavaScript functions from Objective-C or call back into Objective-C from JavaScript. It all works like a charm.

React Native is different in one more aspect. As seen in your Hello World example, you write a component in JavaScript just like you would with React, except that instead of using an HTML div, you use tags like View and Text. In the case of an iOS application, a View is basically a UIView.

Ejecting a React Native Application

Before we get into exploring the application structure, we have to eject our application from the Expo project (see Figure 2-9). You should not eject an app from the Expo environment until it is needed. We are doing this here to understand how create-react-native works.

yarn eject

RCTRootView is a Swift class provided by React Native, which is inherited from the iOS UIView Class. It takes your JavaScript code and executes it. It also loads the index bundle URL, which has your code written in App.js and also a program added by the React Native framework.

To start, run yarn start on terminal, as shown in Figure 2-10.

Now open HouseShare.xcodeproj. This Xcode project file will open your project in Xcode. Next, let’s load your application in the iOS simulator. To build your application and load it in the simulator, simply click the Run button at the top left (or execute Command + R), as shown in Figure 2-11. This will compile, build, and fire up your project in the iOS simulator

This will open the simulator and you can see the app running.

Debugging

Debugging with React Native is in line with how we debug web apps; in short, it’s really simple. To access debugging options, share the simulator by selecting Share Gesture from the Hardware menu. This will open a menu that provides several debugging options, as shown in Figure 2-12.

You must disable this menu for the final build because your end user should not see these options. To disable it, open the project in Xcode and select Product ➤ Scheme ➤ Edit Scheme (or press Command + <). Then select Run from the menu on the left and change the Build Configuration to Release.

Let’s review each of the options shown in Figure 2-12.

Debugging in Chrome

This is one of the best and most frequently used options for debugging your JavaScript code written in React Native. As with web apps, you can debug your React Native application in Chrome. When you click Debug in Chrome, it opens http://localhost:8081/debugger-ui in Chrome (Figure 2-13).

Install the React Developer Tools, which is a Chrome extension for debugging both your React application and React Native code. It allows you to inspect the React Native component hierarchies in the Chrome Developer Tools. To install it, please visit the Chrome webstore or go to https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en .

Once the extension is installed, press Command + Option + J or select View ➤ Developer ➤ Developer Tools in your Chrome browser to access the Developer Tools console.

You will see a new tab called React in your Chrome DevTools. This shows you the root React components that have been rendered on the page, as well as the subcomponents that they ended up rendering. You can also see props, state, components, and event listeners, as shown in Figure 2-14.

Look at Figure 2-15 and you can see a similar hierarchy to your Xcode: Hello World is wrapped in RCTText and that is in turn wrapped in RCTview.

Showing Performance Monitor

Many applications use a lot of animations and graphics. The smoothness of these animations for your application is defined in frames per second (FPS); this is used extensively in gaming apps. When you select Show FPS Monitor from the menu, it shows a few properties for your app in the simulator (see Figure 2-16). Although you might not find much use for these properties in your Hello World app, they are great for animation-intensive apps to prevent them lethargic performance, which can create a bumpy user experience.

The Inspect Element

You can also inspect a React Native element from the simulator, somewhat similar to how you inspect an element in a browser, although you can’t currently change live values of properties as you can in a browser. For now, you can see your stylesheet properties for any object. Click the HelloReact!! text (Figure 2-17) and it will open the details of that element.

The details of that element are shown in Figure 2-18 at the bottom left.

You can see that the font size for Hello World is 25 and it is center aligned.

Summary

In this chapter, you were introduced to React Native. You learned how to set up the React Native development environment and you wrote your first application. You also learned about Expo and the folder structure of React Native applications and how to debug. You are now all set to explore creating a UI with React Native for your iOS application.

Chapter 3 introduces about Flux and Redux, a pair of very important design patterns that are commonly used with React Native applications.

MVC Pattern

MVC is legendary and it’s an amazing way to structure your code. Things get a bit ugly, though, when your source code begins to grow and get complex. Although MVC is a very popular pattern to design applications, it comes with its own set of problems. Figure 3-1 shows how MVC works.

Figure 3-1 shows the simplest implementation of MVC, and this works pretty well with small applications. As your application grows, though, so does the demand for new features, and there should be room to accommodate more models and views. Let’s look at what happens when our model and view increase in an actual application (Figure 3-2).

Wow! That is an explosion of arrows. Welcome to the real world where many models and views interact with each other. A controller triggers another model and this goes on like spaghetti, which often ends up in an infinite loop. The worst part is that it’s really difficult to debug code in such a situation, eventually making the system fragile. Well, Facebook faced a similar problem with this pattern and solved it with a new pattern called Flux.

Flux

Flux abjures MVC in favor of a unidirectional data flow. Flux works well because the single directional data flow makes it easy to understand and modify an application as it grows and becomes more complex. Earlier we found that two-way data bindings lead to cascading updates, where change in one data model leads to an update in another data model, making it very difficult to predict what would change as the result of a single user interaction.

Flux applications have three major parts: the dispatcher, the store, and the view (where we use React components). These should not be compared with the model, view, and controller of the MVC pattern (Figure 3-3).

Although controllers do exist in a Flux application, these are controller views, where views are found at the top of the hierarchy that retrieve data from the stores and forward these data to their children.

If we look at the Flux architecture, the most important part is the dispatcher, which is a singleton that directs the flow of data and ensures that updates do not cascade (Figure 3-4).

As an application grows, eventually the dispatcher becomes more vital, as it is responsible for managing dependencies between stores by invoking the registered callbacks in a specific order.

When a user interacts with a React view, the view sends an action (usually represented as a JavaScript object with some fields) through the dispatcher, which notifies the various stores that hold the application’s data and business logic. When the stores change state, they notify the views that something has updated. This works especially well with React’s declarative model, which allows the stores to send updates without specifying how to transition views between states.

With predictable code, great things follow, as shown in Figure 3-5.

Flux Deep Dive

As we now know what Flux is, let’s look into and understand the concepts like dispatcher, store, and action

Redux

Now that we have read about Flux, next we discuss another pattern called Redux. Redux can be considered a predecessor to the Flux architecture, and it is also inspired by the functional programming language Elm. Redux was created by Dan Abramov in mid-2015. During that time, the React world was going through major changes and new things were coming every other day. No one, though, could imagine that a small library of just 2 KB would create such a tectonic shift in the way we interact with and create React applications.

Redux was built on top of functional programming concepts. Functional programming by design allows us to write clean and modular code that is easier to test, debug, and maintain. With functional programming, code is in the form of small functions that are isolated in scope and logic, thus making the code reusable. Because small pieces of code are isolated in nature, there is hardly any coupling and these tiny functions can be used as modules in an app. In functional JavaScript you will see pure functions, anonymous functions, and higher order functions used very often. Redux uses pure functions a lot, so a good understanding of this concept is important.

Pure functions return a value based on arguments passed to them. They do not modify or mutate existing objects, but they return new ones. These functions do not depend on the state from which they are called, but they return only one and the same result for any provided argument. That’s why they are very predictable. Because pure functions do not modify any value, they don’t have any observable side effects. Redux uses something called reducers, which are pure functions. We will learn in detail about reducers and other Redux code concepts in the next section.

Redux Core Concepts

Redux has three core pillars: action, store, and reducers (Figure 3-6). These words might sound complicated, but they are actually very simple.

Redux with React Native

The Redux module is required so that you can use Redux with your application. React-redux is going to help you connect your React native app to Redux once you have both of these installed. Figure 3-7 shows our application folder structure.

You would have to create all these folders: components, containers, reducers, store, and a TodoApp.js file. Within these folders we would have more JavaScript files reside inside our action, stores, reducers, and components. This way our code stays modularized and the logic remains isolated. Here, the Redux part is managed under the action, reducer, and the store folder, but we would need components that will use them.

Hence, we have two folders here: components, which consists of plain dumb components, which are the presentational components of the app having no idea that Redux exists or not in the app. Second, we have smart components that interact with Redux, and they reside in the containers folder.

Here, we have imported something called createStore from redux. Here we are combining all our reducers with rootReducer and exporting the same. Soon you will see how we have created two reducers that we plan to use with our store using rootReducer.

Here, we have imported our store and also used something called Provider from react-redux. Once we pass our Provider and store within that, it can be accessed anywhere in TodoApp no matter how many levels deep it is. Great! With this our store is set up.

Although our store is setup, we require some UI components. If you look at the containers folder, we have an addTodo component, which is a simple TextInput that will be used to create a new todo. Therefore, on this text input field there will be some action that will trigger it to create a new todo.

Here we have two actions—ADD_TODO and TOGGLE_TODO—that are responsible for adding a new record in the list and marking a record complete using their respective actions. We are able to determine the type of actions using action.type.

Here we are using something called CombineReducers from redux. This helps is keep the logical part separate but use it such in a way that we have only one reducer.

Working with the Components

Now that we have seen our reducers, let’s see how all this so far works with our components. Open the containers/AddTodo.js file.

import { connect } from 'react-redux '

import { addTodo } from '../actions'

class AddTodo extends Component {

    state = {

        text:  ' '

    }

    addTodo = (text) => {

        // redux store

        this.props.dispatch(addTodo(text))

        this.setState({ text: '' })

    }

    render() {

        return (

            <View style={{ flexDirection: 'row', marginHorizontal: 20 }}>

                <TextInput

                    onChangeText={(text) => this.setState({ text })}

                    value={this.state.text}

                    placeholder="E.g. Create New Video"

                    style={{ borderWidth: 1, borderColor: '#f2f2e1', backgroundColor: '#eaeaea', height: 50, flex: 1, padding: 5 }}

                />

                <TouchableOpacity onPress={() => this.addTodo(this.state.text)}>

                    <View style={{ height: 50, backgroundColor: '#eaeaea', alignItems: 'center', justifyContent: 'center' }}>

                        <Ionicons name="md-add" size={30} style={{ color: '#de9595', padding: 10 }} />

                    </View>

                </TouchableOpacity>

            </View>

        );

    }

}

export default connect()(AddTodo);

Here, we first have to set up the initial local state:

state = {

     text: ''

 }

This is just an empty string for the text input to stay empty. Next, we have to update the text from text input when a user types. This is done using onChangeText where the state is updated with the text entered by the user.

onChangeText={(text) => this.setState({ text })}

                    value={this.state.text}

Once the user submits the todo it must be updated to our store. For this, we use a helper method, connect, from react-redux.

import { connect } from 'react-redux'

In addition, the connect helper method should be passed with the component that is going to get connected to the Redux store. In this case, use AddTodo:

export default connect()(AddTodo);

We also have to import the action we plan to use; in this case, it is addTodo:

import { addTodo } from '../actions'

Great! Now that we have connected our store to the component, let’s trigger it onPress to add the todo in a list:

<TouchableOpacity onPress={() => this.addTodo(this.state.text)}>

Because this component is connected to the Redux store, we can dispatch the action to the respective store:

addTodo = (text) => {

        this.props.dispatch(addTodo(text))

        this.setState({ text: '' })

    }

This will update the todo list and also the text input state with an empty string so that new values can be added later.

To display the data, we use a dumb component whose only purpose is to display the to-do list. This component has nothing to do with Redux. You can find this dumb component inside component/TodoList.js

Finally, when we run our application, we will find the result shown in Figure 3-8 in the simulator.

As you saw, there is some work involved in using Redux along with your application, and as with any new piece of technology or new pattern, developers should always ask this: Why should I use it in the first place?”

It might be a little complicated to understand and implement something with Redux, but once you understand the fundamentals, it provides many advantages, including these:

• Expected outcomes: With Redux there is no confusion about where to locate our one source of truth; that will always be the store.

• Maintainability and organization of code: With a strict structure in place and predictable outcomes, maintaining the code becomes easier. Redux is also particular about how the code should be organized, and this becomes pivotal in maintaining the source code as an application becomes large.

• Tools: With developer tools, developers can track what’s happening in the application in real time.

• Community: Redux is not something that has just appeared; it has indeed passed the test of time. The community is flourishing, and you can easily get support and regular updates for the library.

• Ease of testing: Redux functions by design are small, pure, and isolated, which makes them perfect candidates to for which to write tests. Redux apps automatically make testing easy for the application.

Summary

In this chapter you learned about the Flux pattern, how it differs, and how it solves a fundamental problem differently from the traditional MVC pattern. We also looked closer at Flux core concepts. Next, you learned about the successor of Flux, Redux, its core concepts, benefits, and how to use it with React Native applications, which will be useful in real-world applications and in the upcoming chapters. Chapter 4 covers how to create UIs and navigation in React Native apps. Finally, you learn how to use animation in your views.

React Navigation

React Navigation is one of the popular JavaScript libraries for handling routing in React Native applications. iOS and Android have different ways to handle navigation, and react-navigation takes care of this for both platforms.

Figure 4-1 shows a HomeScreen rendered using react-navigation. We have used createStackNavigator, which returns a React component.

createStackNavigator 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 transition between components and manage navigation history, gestures, and animations, which is natively provided in Android and iOS.

Right now, we have used just the HomeScreen component. Let’s add one more screen and use react-navigation to route to this new screen.

Figure 4-2 shows the two screens and how users can navigate between them.

We have used createStackNavigator , which has created screens as a stack that can be navigated with the back button at the top. It manages a stack of screens to provide a drill-down interface for hierarchical content.

Run the app. Figure 4-3 shows the updated header styling for all the screens, but you can override this for a specific screen by adding this in a component as a static variable.

NavigatorIOS

If you are only targeting iOS you can also use NavigatorIOS. It wraps UIKit navigation and allows you to add a backswipe feature to your app. NavigatorIOS manages a stack of view controllers to provide a drill-down interface for hierarchical content. Now that we know what NavigatorIOS does, let’s implement it in our project.

We have done a little bit of styling in this section, which might be something new for you if you come from a grid-layout background. React Native uses Flexbox for styling, which is discussed in detail next.

Flexbox

In creating the layout in the previous example, you must have seen the flex property mentioned in the styles. This appears because React Native apps use the Flexbox layout model.

Turn back to the simulator and refresh the view using Command + R. Now, rotate the simulator, and you will see it automatically adjust the size of these colored boxes. Figure 4-4 shows the simulator in portrait mode.

Let’s change the simulator to landscape mode (see Figure 4-5). This can be done easily using Command + Right/Left arrow key (⌘ + Left Arrow). You can see how the box has adjusted its size, and how the title adjusted its width to use all the available space. Thanks to Flexbox, a pretty laborious task is simplified.

Now, let’s review the flex properties Flex-direction and flex.

flexDirection

Flexbox is a single-direction layout concept. flexDirection allows you to define the direction in which the child elements are going to flow. It can have two values, row and column. In the previous example we used column. Let’s change it to row here:

container: {

    flex: 1,

   flexDirection: 'row'

}

Turn back to the simulator and refresh the view with Command + R (see Figure 4-6).

You can see how the orientation of the box has changed. Now change the property flexDirection to column (see Figure 4-7).

Flex

You must have seen the flex value in the stylesheet; it can be either integers or decimals, indicating the relative size of the box:

container: {

    flex: 1,

    flexDirection: 'column'

  },

topBox: {

        flex: 2,

        backgroundColor: '#CCE5FF',

    },

    bottomBox: {

        flex: 1,

        backgroundColor: '#FFFFCC'

    }

Our view says:

 <View style={styles.container}>

      <View style={styles.topBox} />

      <View style={styles.bottomBox} />

    </View>

flex thus defines the size percentage for the box. We can see that the container has two views inside, topBox and bottomBox, with flex values of 2 and 1, respectively (see Figure 4-8).

Now, update the view and add one topBox view inside the container view:

 <View style={styles.container}>

      <View style={styles.topBox} />

      <View style={styles.bottomBox} />

      <View style={styles.topBox} />

  </View>

Refresh the view. The container has three views now: topBox, bottomBox, and then topBox again (see Figure 4-9).

This will divide the view into a 2:1:2 ratio, because their flex values are in the ratio 2:1:2.

To get a better sense of how this works, let’s change the flex values and see how that changes our screen. Let’s change the flex value of topBox to 1. Update the CSS to:

 container: {

    flex: 1,

    flexDirection: 'column'

  },

topBox: {

        flex: 1,

        backgroundColor: '#CCE5FF',

    },

    bottomBox: {

        flex: 1,

        backgroundColor: '#FFFFCC'

    }

Refresh the view to see the changes, as shown in Figure 4-10.

We can see that now the screen is divided in a ratio of 1:1:1, because the flex values of the views are in a ratio of 1:1:1. With Flexbox, it is easy to create layouts that can resize according to screen size and orientation. This is just an introduction to Flexbox; we explain more properties throughout the book as and when needed. You can also find more options at https://facebook.github.io/react-native/docs/flexbox.html .

Images

React Native has a built-in component, Image, that will help us to display images, including network images, temporary local images, and also images from a local disk, such as the Camera Roll. To start, we display local images.

Now run the simulator. The results are shown in Figure 4-11.

We can also give any server image URL as the source, and the Image component will take care of loading it from the network. For a different screen size you can also give images of a different density by using the @2x and @3x suffixes in the same folder. We will load an image from a server later in this chapter.

TouchableHighlight

Touch is one of the ways to interact with a view in an application. TouchableHighlight is a React Native component that helps us create clickable views that give a proper response in the event of a touch. To understand TouchableHighlight with an example, let’s continue building our app by adding one more view to list the housing options. This will be done by clicking on the show house image, which will redirect to another component.

Let us review what we have done here; we have added an onPress attribute to our TouchableHighlight component for the List Properties section. Whenever someone presses the List Properties image, it calls navigate('HomeListScreen') .

Refresh the app in the simulator and you’ll see the image. When you click that image the new page shown in Figure 4-12 appears.

Now we will load the image from a server and then create a nice-looking property view. This will look something like Figure 4-13.

Let’s refresh our application in the iOS simulator to see the changes (see Figure 4-14).

ListView

In the previous section, we populated one element. In this section, we populate a list of data using ListView. Before we embark on that, let’s learn a bit more about a different way to show the ListView component in React Native. React Native has two components: FlatList and SectionList.

FlatList is a component designed for populating vertically scrolling lists of dynamic data. The minimal steps are to create a FlatList data source and populate it with an array of data similar to the native TableView data source.

ListView looks very similar to TableView, but the implementation doesn’t actually use TableView. Rather, it uses ScrollView behind the scenes. Features like swipe to delete, reordering, and so on, cannot be used directly through ListView.

We will show the list of house address, as an example of the most common representation of data in mobile devices. With our HouseShare app, we will create a table view showing a list of properties, each of which has a thumbnail image to the left side. The rest of the details should appear next to it.

Refresh your application in the simulator to see the updated view, as shown in Figure 4-15.

We have once again specified what all components will be using in this section. There is a new component added, FlatList .

ScrollView

Although we are not using ScrollView in our HouseShare application, it can be used as an alternate way to populate a list just like we used ListView. ScrollView is one of the most versatile and useful controls, as it is a great way to list content that is greater in size than the screen size.

There are many other options available with ScrollView; for documentation and examples, you can visit https://facebook.github.io/react-native/docs/scrollview.html .

Animations

Animations are crucial when it comes to creating a good user experience. If you think of any popular mobile app, you will likely find animation at the center of an immersive user experience. React Native provides an animation API to perform different types of animations with ease.

Run the app and you can see the FadeIn animation on the Home List page. There are several different configurations available, which are documented at https://facebook.github.io/react-native/docs/animated#configuring-animations .

Summary

The next chapter covers different device capabilities like MapView, AsyncStorage, Native Alert, WebView, and deep linking.

MapView and GeoLocation

In this section, we will learn how to use iOS and Android location services with a React Native application. Location services are used very often in many popular apps, especially in travel, navigation, ride sharing, and so on. This single feature significantly improves the user experience and the bonus is that it’s very easy to implement.

react-native-maps ( https://github.com/react-community/react-native-maps ) is one of the best modules for map views. It includes numerous customization options available to help you design the best possible experience with maps.

You will see the map shown in Figure 5-1.

Reviewing the GeoLocationMap Code

Let’s now understand what we have done in this part of our program.

import React from 'react';

import { StyleSheet, Text, View } from 'react-native';

import MapView from 'react-native-maps';

We have imported the MapView component from react-native-maps. Next, we used the MapView component to plot a map:

export default class App extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      region: {

        latitude: 37.3230,

        longitude: -122.0322,

        latitudeDelta: 0.0922,

        longitudeDelta: 0.0922,

      }

    };

  }

  render() {

    return (

      <MapView

      style={styles.container}

      initialRegion={this.state.region}

    / >

    );

  }

}

Here, we have set the initial state for the region with certain latitude, longitude, latitudeDelta, and longitudeDelta parameters, which will be later set when we render the function with the MapView component. In the MapView component, we are using the region state, which is supplied with latitude, longitude, longitudeDelta, and latitudeDelta. These should always be numbers (integer or float), as they help us plot a specific region on the map. Finally, we have added some style with Flex and registered our component.

iOS devices show Apple Maps by default. We can choose to use a different provider like Google. Update provider to google with this code:

    <MapView

      style={styles.container}

      provider="google"

      initialRegion={this.state.region}

    / >

Now run the application. You can see that instead of Apple Maps, it loads Google Maps (Figure 5-2).

There are numerous customization options available. You can check https://github.com/react-community/react-native-maps/blob/master/docs/mapview.md for more details.

Adding Annotation on a Map

Annotations provide a way to highlight specific coordinates on a map. This valuable information is commonly added for any mobile application using a geolocation feature. Let’s add an annotation marker to our application and update initial state with the new state annotations, with parameters latitude and longitude for the marker.

  constructor(props) {

    super(props);

    this.state = {

      region: {

        latitude: 37.3230,

        longitude: -122.0322,

        latitudeDelta: 0.0922,

        longitudeDelta: 0.0922,

      },

      coordinate: {

      latitude: 37.3230,

      longitude: -122.0322,

      },

    };

  }

Now update the MapView component with the new prop called coordinate:

    <MapView

      style={styles.container}

      provider="google"

      initialRegion={this.state.region}

    >

    <Marker coordinate={this.state.coordinate} />

   </MapView>

Refresh and observe the changes. You will see something like the screen shown in Figure 5-3.

Displaying the Latitude and Longitude of the Current Location

In this final part of our geolocation application, we will display our present latitude and longitude on the screen. In the previous example, we had a constant location; in this part, we will move to our current location in real time. That sounds like something exciting, so let’s start building it. There are two ways to check for the current location on our maps. One is to simply add showsUserLocation={true} to the MapView component. Another way is to use NSLocationWhenInUseUsageDescription geolocation. Let’s try the first option. If you are using gelocation on an existing project, you need to update NSLocationWhenInUseUsageDescription in info.plist for iOS and <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> in AndroidManifest.xml for Android. Because we have created a project with Expo, which initially uses react-native init, gelocation is enabled by default.

Update the App.js Marker component with the following code:

    <MapView

      style={styles.container}

      provider="google"

      showsUserLocation={true}

      initialRegion={this.state.region}

    >

    <Marker coordinate={this.state.coordinate} />

   </MapView>

Now refresh the application to load it on the iOS simulator and you will see something similar to Figure 5-4.

If we allow this request, the map will move to the location we specified in our code; in this case it’s Apple’s headquarters in Cupertino, California (Figure 5-5).

Now let’s use the other method to get the user’s current location, using the Geolocation API, which is extended from the Geolocation web spec ( https://developer.mozilla.org/en-US/docs/Web/API/Geolocation ). Let’s first update the ref for MapView to this.map, so that we can use it:

  <MapView

      ref={ref => { this.map = ref; }}

      style={styles.container}

      provider="google"

      showsUserLocation={true}

      followUserLocation={true}

      loadingEnabled={true}

      initialRegion={this.state.region}

    >

    <Marker coordinate={this.state.coordinate} />

   </MapView>

Now add navigator.geolocation.watchPosition in the same file:

  componentDidMount() {

    navigator.geolocation.watchPosition(

       (position) => {

         console.log(position);

         this.map.animateToRegion({

           latitude: position.coords.latitude,

           longitude: position.coords.longitude,

           latitudeDelta: 0.005,

           longitudeDelta: 0.005

         });

       },

       (error) => console.log(error.message),

       { enableHighAccuracy: false, timeout: 200000, maximumAge: 1000 },

     );

 }

Here, in componentDidMount, we get the current position from the watchPosition function in navigator.geolocation, which continuously checks for location because we’ll need to get the location coordinates as the user moves. The Google Maps geolocation API has a watchPosition method that will help us get the location coordinates whenever they change. There are also other functions available like getCurrentPosition , which checks the current location just once when the app is refreshed (Figure 5-6).

Because we have a console log, we can see the position as it appears in the console, as shown in Figure 5-7.

We can now see the current location. Next, let’s try to change the location. To change a location, from the Simulator menu bar, select Debug ➤ Location ➤ Freeway Drive (see Figure 5-8). Freeway Drive will continuously change the simulator location.

We can see that the location is changed dynamically in the app. Because we chose to use Freeway Drive, we can see that the location and maps continuously move along a freeway (Figure 5-9).

AsyncStorage

Let’s build our application to see the results. You can enter the text in a text box as shown in Figure 5-10 and then click Save.

Once that is done, refresh for the result shown in Figure 5-11.

This time the text below, “This text is from local storage,” is coming from the AsyncStorage mechanism that we have put in place.

Native Alert

Alerts are used to provide important information to application users. Basic alerts consist of a dialog box with a specific title, message, and buttons. Occasionally alert boxes appear in an application to display a piece of important information. The buttons for an alert could either be a simple OK to proceed with the app, or OK, Cancel, Ask Me Later, and so on, which require the user to make a decision. Tapping this button could be linked to execute an inPress callback to execute a piece of code. By default an alert dialog box will have one button.

Let’s build this application and test it in the simulator. Figure 5-12 shows the result.

Tap the Button 1 button to see an alert box, as shown in the example in Figure 5-13.

Extending the NativeAlert Example

Now, to add some more buttons to the application, replace the following code for your NativeAlert component in App.js:

export default class App extends React.Component {

  onPressButton1() {

    Alert.alert(

      'Alert Title',

      'Alert Message',

    )

  }

  onPressButton2() {

    Alert.alert(

      'Alert Title',

      'Alert Message with Buttons',

      [

      {text: 'Button 1', onPress: () => console.log('Button 1 pressed')},

      {text: 'Button 2', onPress: () => console.log('Button 2 pressed')},

      {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},

      ],

    )

  }

  render() {

    return (

      <View style={styles.container}>

        <Button

          onPress={this.onPressButton1}

          title="Button 1"

          color="#841584"

          accessibilityLabel="Learn more about Button 1"

          />

        <Button

          onPress={this.onPressButton2}

          title="Button 2"

          color="#841584"

          accessibilityLabel="Learn more about Button 2"

          />

      </View>

    );

  }

}

Let’s refresh our view to see the changes made in Figure 5-14.

Click Button 2 to view the result shown in Figure 5-15.

Tapping Button 2 fires an onPress callback that uses the alert method of Alert to set title, message, and buttons for our alert box. In this part of the NativeAlert component we have three buttons.

WebView

The result is shown in Figure 5-16.

Deep Linking

Deep linking is a technique that allows an app to be opened to a specific UI or resource, in response to some external event. The deep refers to the depth of the page in an app’s hierarchical structure of pages. This is a very important feature for user engagement, as it also makes an app more responsive and capable of navigation to arbitrary content in response to external events like push notifications, e-mails, web links, and so on.

There are two ways of implementing deep linking: using a URL scheme or universal links. Although URL schemes are a well-known way of using deep linking, universal links are the new method Apple has implemented to easily connect your web page and your app under the same link. We implement URL schemes in our example that will handle external URIs. Let’s suppose that we want a URI like myapp://article/4 to open our app and link straight into an article screen that shows article number 1.

We have thus far created React Navigation and created routes for two pages. We have configured our navigation container to extract the path from the app’s incoming URI. On Android, the URI prefix typically contains a host in addition to the scheme, so we have used myapp://myapp/.

Now we have to write custom code for iOS and Android. First, open the iOS project in the iOS folder by clicking DeepLinkApp.xcodeproj. Select the project title from the folder list and navigate to the Info tab as shown in Figure 5-17. Scroll down to the URL Types section and add one. For the new URL type, set the Identifier to mychat and the URL Scheme to mychat.

The result is shown in Figure 5-18.

To test the DeepLink, open the Safari browser and type myapp://article/4. That will automatically open the app and open Article 4 (Figure 5-19).

You can also open the DeepLink page by running this command on your terminal (Figure 5-20):

xcrun simctl openurl booted myapp://article/3

Summary

This chapter covered various capabilities of iOS and Android devices using React Native. These capabilities helped us build features beyond just a UI. We learned how to use GeoLocation and loading maps for your app, AsyncStorage to persist data, Native alerts to share important info in your app, WebView to load HTML5 content, and finally deep linking.

Chapter 6 discusses how to interact with a back-end server because no real-world application is complete without connecting to a back end and consuming APIs.

XMLHttpRequest

Using XMLHttpRequest is quite tedious. However, because it is compatible with the browser API, it lets you use third-party libraries directly from npm (e.g., Parse). For more information on this API, please refer to its documentation at https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest .

WebSocket

Fetch

Now that you know how to interact with network APIs, let’s use one of the options, fetch, to get and post data to a server. To keep things simple, we have hosted a simple back-end server with restful APIs that you can consume for your application.

We will be using following the URLs to get and post data to a back-end server. For a quick test, you can use curl to see the response you get from making a request to these URLs.

You might see few results here that are created by other readers of this book.

Getting Data from a Server

Now, build or refresh the application and navigate to the of list of all the properties. Figure 6-1 shows it loaded on an iOS simulator .

Earlier we had created a stateless component, but because we would like to use life cycle methods and maintain state, we have modified our stateless component to a state component.

Here, we have created a constructor that sets the initial state for the dataSource property as null. This is the property that will store the data we will pull from a back-end server.

Next, we use a life cycle method componentDidMount() . We are making use of this life cycle method because we assume we would only be required to make a get call to the back-end API to get the list of properties once.

The structure of this request is straightforward: We use fetch to make a call that returns a promise. This promise is then resolved and we pass the response JSON to dataSource using the setState object .

Saving Data to a Server

Let’s refresh to see the changes on the home screen (Figure 6-2).

This is a simple form having two input fields, name and address, along with styling, which we added at the end. Just as in constructor, the state for these two properties was set to an empty string. We update the state with setState once the user fills in the form and pass it to the function onPressButtonPost.

You should notice we added a bind in render here. Because we are using ES6 while declaring React components, React no longer autobinds. Therefore we must resolve this by explicitly calling bind in render.

Here, we are using the updated values of the name and address properties and making a post request using fetch. Once our request is completed we get an alert box with a Created message.

This was simple. Now let’s try our code on a simulator. Once we navigate from the home screen to the add new property screen, we get the form shown in Figure 6-3.

Let’s fill in some values to submit to our back-end API (Figure 6-4).

Once we submit the data to the back-end API we get the Created message in an alert box (Figure 6-5).

Refresh the app and go to the List of Properties section (Figure 6-6).

Summary

This chapter covered various network APIs that are reimplemented from the ground up by the React Native team. You also learned about various options like XMLHttpRequest, WebSocket, and Fetch. Because no application is complete without making server calls, you added this capability into your housing application and learned how to get data from a server, add new records, and save them to a server.

In Chapter 7 we explore Native Bridge for iOS and Android. By using Native Bridge we can access Native iOS or Android APIs from JavaScript.

Native Bridge

To better undersand Native modules, we will create a Counter example in Swift for iOS and Java in Android, and this will be used in our React app. This will be a cross-platform example, so the same React code will work in both iOS and Android.

Because many readers of this book might not have worked in Swift or Java, we have tried to keep the use of both these languages very basic, so it should be easily understandable.

Prerequisites for the Example

Because we are writing some code in Native, you should have the following development setup installed on your computer.

• Xcode for running the app for iOS

• Android Studio for running the app for Android

• React Native

We will first create a React Native app with the React Native CLI. We could also use the Expo CLI, but then we would have to eject it to build a Native bridge.

$ react-native init CounterNativeModuleApp

$ cd CounterNativeModuleApp

This will create the basic structure of the React Native app. It also contains two folders, iOS and android, which have native code in Objective-C and Java, respectively. We first learn about bridging in iOS, and then use same repo to build for Android.

iOS Native Bridge

We will create a Counter class in Swift, which will have a static class variable count and two methods: one for incrementing the count and the other for getting the count value. We will then access this Swift class from JavaScript. Let’s start by opening the CounterNativeModuleApp.xcodeproj file in the ios folder. It should open Xcode with your iOS code.

Create a new file by going to File ➤ New ➤ File and selecting Swift, as shown in Figure 7-1.

Now give the file the name Counter and remember to select CounterNativeModuleApp for the Group setting, as shown in Figure 7-2.

As we are writing code in Swift and the repo, which is generated in Objective-C, we need a bridge to communicate between them. Click Create Bridging Header (Figure 7-3).

We can see that two files, Counter.swift and CounterNativeModuleApp-Bridging-Header.h, are created by Xcode.

Counter.swift is where we will write our Counter class and CounterNativeModuleApp-Bridging-Header.h will have header details. Remember that in a project we have only one bridging header file, so if we add new files, we can reuse this file. Update the following code in the CounterNativeModuleApp-Bridging-Header.h file:

#import "React/RCTBridgeModule.h"

Now let’s add a Swift class:

import Foundation

@objc(Counter)

class Counter: NSObject {

  @objc

  static var count = 0

  @objc

  func increment() {

    Counter.count += 1

    print("count is \(Counter.count)")

  }

}

In the preceding code we have created class Counter, which is inherited from NSObject. The root class of most Objective-C class hierarchies is NSObject, from which subclasses inherit a basic interface to the runtime system and the ability to behave as Objective-C objects.

You can see that we have used @objc before a function and class. This will make that class, function, or object available to Objective-C

Note

The @objc attribute makes your Swift API available in Objective-C and the Objective-C runtime.

Now create a new file from File ➤ New ➤ File and select Objective-C File. Name the file Counter (Figure 7-4).

This will create a file Counter.m, which will expose the Swift class to React Native:

#import "React/RCTBridgeModule.h"

@interface RCT_EXTERN_MODULE(Counter, NSObject)

RCT_EXTERN_METHOD(increment)

@end

React Native will not expose any function of Counter to React JavaScript unless explicitly done. To do so we can use the RCT_EXPORT_METHOD() macro. We therefore have to expose the Counter class and increment the method to our JavaScript code. Because the Swift object is converted to JSON, there is a type conversion. RCT_EXPORT_METHOD supports all standard JSON object types:

• string (NSString)

• number (NSInteger, float, double, CGFloat, NSNumber)

• boolean (BOOL, NSNumber)

• array (NSArray) of any types from this list

• object (NSDictionary) with string keys and values of any type from this list

• function (RCTResponseSenderBlock)

Now let’s update the JavaScript code and access this Counter class from our React component. To do so, open App.js and update it with the following code:

import React, {Component} from 'react';

import {StyleSheet, Text, View, NativeModules, Button} from 'react-native';

export default class App extends Component {

  increment = () => {

    NativeModules.Counter.increment();

    }

  render() {

    return (

      <View style={styles.container}>

      <Button

            onPress={this.increment}

            title="Increment"

            color="#841584"

          />

      </View>

    );

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor: '#F5FCFF',

  }

});

We need to import NativeModule from react-native. The Counter method increment can be accessed using NativeModules.Counter.increment() . We have created a Button and clicking on that button calls the increment method.

Now let’s run the app from Xcode by pressing Command + R. Make sure React Native code is running. If it is not, then run npm start.

We can see an Increment button and a warning message at the bottom as shown in Figure 7-5. For now, ignore the warning message. We will talk about that later in the chapter.

Now open the Xcode and check the console log. Try clicking the Increment button three times and you will see the output shown in the logs, as displayed in Figure 7-6.

We can see that we have called a Swift class method from a JavaScript React component.

Note

Remember, if you change any code in iOS Swift or Objective-C or Android Java, you need to rebuild the project. Only then will changes be reflected.

Now let’s fix the warning shown at the bottom of the simulator and in the browser console:

Module Counter requires main queue setup since it overrides ‘init’ but doesn’t implement ‘requiresMainQueueSetup’ . In a future release React Native will default to initializing all native modules on a background thread unless explicitly opted-out of.

To understand that better, let’s understand the thread React Native runs on:

• Main thread: Where UIKit works.

• Shadow queue: Where the layout happens.

• JavaScript thread: Where your JavaScript code is actually running.

• Every native module has its own GCD (Grand Central Dispatch) Queue unless it specifies otherwise.

Now because this Native module will run on a different thread and our main thread is dependent on it, it is showing this warning. To make this code to run on MainQueue, open Counter.swift and add the following function:

  @objc

  static func requiresMainQueueSetup() -> Bool {

    return true

  }

Now run the app again. Remember that because we have changed the Swift class, we need to rebuild the code. You will see the app running without the warning now, as shown in Figure 7-7.

Now let’s add the count value to our React screen. To do so we will add the getCount function to counter.swift and call that method from JavaScript code. We will create this method as a callback.

Note

React Native Bridge is asynchronous, so the only way to pass a result to JavaScript is by using callbacks or emitting events.

Open counter.swift and add the getCount method :

import Foundation

@objc(Counter)

class Counter: NSObject {

  @objc

  static var count = 0

  @objc

   func increment() {

    Counter.count += 1

    print("count is \(Counter.count)")

  }

  @objc

  func getCount(_ callback: RCTResponseSenderBlock) {

    callback([NSNull(), Counter.count])

  }

  @objc

  static func requiresMainQueueSetup() -> Bool {

    return true

  }

The getCount() method receives a callback parameter that we will pass from your JavaScript code. We have called callback with an array of values, which will be exposed in JavaScript. We have passed NSNull() as the first element, which we consider an error in callback.

We need to expose this method to counter.m:

#import "React/RCTBridgeModule.h"

@interface RCT_EXTERN_MODULE(Counter, NSObject)

RCT_EXTERN_METHOD(increment)

RCT_EXTERN_METHOD(getCount: (RCTResponseSenderBlock)callback)

@end

Let’s update the React code to take the count from the getCount method that we just created. Update App.js with following code:

import React, {Component} from 'react';

import {StyleSheet, Text, View, NativeModules, Button} from 'react-native';

export default class App extends Component {

  constructor(props) {

    super(props);

    this.state = { count: 0 };

    this.updateCount();

  }

  increment = () => {

    NativeModules.Counter.increment();

    this.updateCount();

    }

  updateCount = () => {

    NativeModules.Counter.getCount( (error, count)=>{

      this.setState({ count: count});

    })

  }

  render() {

    return (

      <View style={styles.container}>

        <Text>Counter from Native Code:</Text>

        <Text>{this.state.count}</Text>

      <Button

            onPress={this.increment}

            title="Increment"

            color="#841584"

          />

      </View>

    );

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor: '#F5FCFF',

  }

});

Rebuild the source code and run the app. You can then see the counter value and when you click Increment, it will increase the count as show, in Figure 7-8.

Try to refresh the page by pressing Command + R. The count value will be the same and does not reset to 0. If you rebuild the code, however, then the value will be reset to 0.

Native Bridge for Android

In this section we will make the same JavaScript code work with Android. This time we will create a Counter class in java and expose the same functions, increment and getCount, to Javascript.

Open Android Studio (Figure 7-9) and select Open an existing Android Studio project, and then select the android folder inside our CounterNativeModuleApp.

Once the project is opened and it has downloaded all gradle dependency (gradle is the dependency manager of Java), we will create a class Counter. Click Menu ➤ File ➤ New ➤ Java Class. Name the file Counter and then click OK (Figure 7-10).

Add the following code in Counter.java file:

package com.counternativemoduleapp;

import com.facebook.react.bridge.NativeModule;

import com.facebook.react.bridge.ReactApplicationContext;

import com.facebook.react.bridge.ReactContext;

import com.facebook.react.bridge.ReactContextBaseJavaModule;

import com.facebook.react.bridge.ReactMethod;

import com.facebook.react.bridge.Callback;

public class Counter extends ReactContextBaseJavaModule {

    private static Integer count = 0;

    public Counter(ReactApplicationContext reactContext) {

        super(reactContext);

    }

    @ReactMethod

    public void increment() {

        count++;

        System.out.println(count);

    }

    @ReactMethod

    public void getCount(

            Callback successCallback) {

        successCallback.invoke(null, count);

    }

    @Override

    public String getName() {

        return "Counter";

    }

}

We have created the Native module Counter , which is a Java class that is inherited from ReactContextBaseJavaModule. ReactContextBaseJavaModule requires that the function getName is called; this is always implemented. The purpose of this method is to return the string name of the Native module, which represents this class in JavaScript. Here we will call this Counter so that we can access it through React.NativeModules.Counter in JavaScript. Instead of Counter, you could also use a different name.

Not all functions are exposed to JavaScript. To expose a function to JavaScript, a Java method must be annotated using @ReactMethod. The return type of bridge methods is always void, so we create a function increment with @ReactMethod where we have to increase the value of the static variable count and then print the value in the console:

    @ReactMethod

    public void increment() {

        count++;

        System.out.println(count);

    }

We have also created a getCount function that has callback as a parameter. It returns a callback and passes the value of count.

    @ReactMethod

    public void getCount(

            Callback successCallback) {

        successCallback.invoke(null, count);

    }

The next step is to register the module, because if a module is not registered it will not be available from JavaScript. To create a file, click Menu ➤ File ➤ New ➤ Java Class. Name the file CustomCounterPackage and then click OK (Figure 7-11).

Now add the following code in CustomCounterPackage:

package com.counternativemoduleapp;

import com.facebook.react.ReactPackage;

import com.facebook.react.bridge.NativeModule;

import com.facebook.react.bridge.ReactApplicationContext;

import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;

import java.util.Collections;

import java.util.List;

public class CustomCounterPackage implements ReactPackage  {

    @Override

    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {

        return Collections.emptyList();

    }

    @Override

    public List<NativeModule> createNativeModules(

            ReactApplicationContext reactContext) {

        List<NativeModule> modules = new ArrayList<>();

        modules.add(new Counter(reactContext));

        return modules;

    }

}

We need to override the createNativeModules function and add the Counter object to the modules array. If this is not added there, it will not be available in JavaScript.

A CustomCounterPackage package needs to be provided in the getPackages method of the MainApplication.java file. This file exists in the android folder in your react-native application directory. Update the following code in android/app/src/main/java/com/CounterNativeModuleApp /MainApplication.java:

package com.counternativemoduleapp;

import android.app.Application;

import com.facebook.react.ReactApplication;

import com.facebook.react.ReactNativeHost;

import com.facebook.react.ReactPackage;

import com.facebook.react.shell.MainReactPackage;

import com.facebook.soloader.SoLoader;

import java.util.Arrays;

import java.util.List;

import com.counternativemoduleapp.CustomCounterPackage;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

    @Override

    public boolean getUseDeveloperSupport() {

      return BuildConfig.DEBUG;

    }

    @Override

    protected List<ReactPackage> getPackages() {

      return Arrays.<ReactPackage>asList(

          new MainReactPackage(),

          new CustomCounterPackage()

      );

    }

    @Override

    protected String getJSMainModuleName() {

      return "index";

    }

  };

  @Override

  public ReactNativeHost getReactNativeHost() {

    return mReactNativeHost;

  }

  @Override

  public void onCreate() {

    super.onCreate();

    SoLoader.init(this, /* native exopackage */ false);

  }

}

We don’t need to change any JavaScript code written in iOS, as we have exposed the same class name and function. If you skipped the iOS section earlier, you need to copy the React JavaScript code from App.js.

Now run the app through Android Studio or from react-native run-android (Figure 7-12).

This will launch the Android emulator with the app (Figure 7-13). If you don’t find an emulator in the list, you need to download a few by clicking Create New Virtual Device.

We can see the counter change when we click Increment and the JavaScript code is calling the Java code.

Summary

This chapter covered Native Bridge for both iOS and Android. You created a class in Swift and Java and through NativeBridge you were able to access these classes in JavaScript code.

In Chapter 8 you learn about testing in React Native, including type checking using Flow, using Jest with React Native, and understanding how to use snapshot testing.

Flow

Flow is a static type checker for JavaScript. It’s not essential to use Flow, but it really enhances your development efficiency. Type checking allows you to detect possible issues early by running tests on your project code base. In short, we would say Flow is a productivity module for developers.

This will create a .flowconfig file where all your Flow configurations will reside.

Typically, at the beginning of any project, you will find no errors. As you proceed with day-to-day development, however, you can find issues right away and resolve them.

Jest

Jest is a unit test framework that is built on top of Jasmine. React Native supports testing of components using Jest (it’s also the recommended framework used at Facebook for React Native). Besides React Native, you can also use Jest for other JavaScript projects built using TypeScript, Node, Angular, React for Web, Vue, and many more.

Snapshot Testing with Jest

Snapshotting is a really useful technique in UI development that helps ensure that there are no unexpected changes in the UI during development. With Jest we can capture snapshots of React trees, which help us to compare if there was a breaking change in subsequent changes.

A snapshot test case for a mobile app will render a UI component, take a snapshot, and then compare it to a reference point in the past by storing a snapshot alongside the test case. If the test fails, that means two snapshots did not match due to an unexpected change in the UI. Snapshots should be updated to a new version when a satisfactory UI component is ready.

Perfect! Our test failed, and this shows how snapshot testing with Jest really helps during development of a substantial React Native application if one developer makes a change, for example, that might hinder the UI build by someone else.

Summary

Testing is a crucial component in any mobile app development. In this chapter you learned about using Flow to keep your code type checked to assist in detecting issues with your code early and resolving them before they become bugs. Next, you learned about testing with Jest and how to set it up for both React Native CLI apps and those generated using the ExpoCLI. In the end, we introduced the powerful technique of snapshot testing with Jest, which makes building UIs and maintaining them much easier.

Chapter 9 covers iOS and Android app submission to the Apple App Store and Google Play Store, respectively.

Apple Developer Account

To create your Apple Developer Account, visit https://developer.apple.com/ .

Google Play Console

In the case of Android, you explicitly do not need to have a paid account from Google Play at the time of development or testing. However, eventually when you have to distribute your application (i.e., publish it to the Google Play Store) you would have to pay a one-time registration fee of US$25. However, this will only be required toward the end of the chapter if you wish to publish your app to the Play Store.To learn more about the Google Play Console visit https://play.google.com/apps/publish/ .

iOS Build Process

To get ready, we must set up our Apple Developer Profile. Apple has a specific way of setting up certificates, IDs, and profiles. Not to worry; we’ll learn about them all by setting them up for our React Native app. Once you have your paid Developer account, log in into https://developer.apple.com/ . You’ll have two options, as shown in Figure 9-1.

The first option is Certificates, Identifiers & Profiles and the second one is App Store Connect. The App Store is the place where we will upload our application build to be submitted to Apple for publishing our app to the App Store and also for beta testing our application using TestFlight.

Open the Certificates, Identifiers & Profiles page, select Development on the left, and then click the plus (+) button on the right to begin the development and distribution certificate process (Figure 9-2).

You will then have the option to create either a development or distribution certificate (Figure 9-3).

We will require both because we plan to publish our application to the App Store and the process is the same for both. Select iOS App Development and continue to the next step. There you will see instructions how to generate the certificate on your Mac machine, which will be then uploaded. For this you will make use of the Keychain utility.

Create a CSR File

In the Applications folder on your Mac, open the Utilities folder and launch Keychain Access. From the Keychain Access drop-down menu, select Keychain Access ➤ Certificate Assistant ➤ Request a Certificate from a Certificate Authority. In the Certificate Information window, enter the following information:

1. 1.

   In the User Email Address field, enter your e-mail address.

    
2. 2.

   In the Common Name field, create a name for your private key (e.g., John Doe Dev Key).

    
3. 3.

   The CA Email Address field should be left empty.

    
4. 4.

   In the Request is group, select Saved to disk.

    

Click Continue within Keychain Access to complete the CSR generating process. Once this is complete, click Continue and you see an option to upload the CSR file in your developer portal (Figure 9-4).

Once the CSR file is uploaded, click Continue. At the last step you will have the option to download the certificate. Double-click it and it will get loaded in your Keychain.

Next, follow the same steps and set up distribution certification. On successful completion you can check both your installed certificates in Keychain ➤ My Certifications.

We next create an App ID that will be unique for every application. Under Identifiers, select App IDs and then click the plus (+) button (Figure 9-5).

That will open the screen shown in Figure 9-6.

Make a note of the Bundle ID, as it’s the same ID that we have to use in our App ID. We will use this once we open our code to create the build for our application. In our example we have named it com.sampleRN.app, but you can use any nomenclature you desire. Click Continue, and your App ID will be listed within the App IDs section (Figure 9-7).

Next, we create a Development and Distribution profile for the sampleReactNative application. Scroll down to the Provisioning Profiles section and select Development, then click the plus (+) button (Figure 9-8).

Select the appropriate App ID from the drop-down list. In our case it will be the App ID we created in the previous section for our sampleReactNative app (Figure 9-9).

Click Continue. Your Development Provisioning profile will be generated. Double-click it and it will be loaded in your Xcode automatically. Before proceeding to the next section, create a Distribution Provisioning profile for our sampleReactNative app using the same process.

Now that all our basic setup is completed, in the next section you learn how we create a build for our application and distribute it among our team members using TestFlight.

Generating iOS .ipa(iPhone Application Archive)

Before we create our build and host it on TestFlight for testing, we should load our source code in Xcode. From the root of your React Native source code, navigate to the appropriate folder and click the Xcode project file (Figure 9-10).

Double-click this to load your application in Xcode. Click the General tab for the application to add the settings shown in Figure 9-11.

Use the App ID you had created in previous section as the Bundle Identifier. This has to be same, as mentioned in the Developer console, and unique for every application you create. It is essentially a unique identifier for your app in Apple’s system.

Next, let’s add some app icons and a launch screen for our sample application. It’s fine to keep your launch screen simple, with just text that comes out of the box when you initialize a React Native application. However, we must add all types of icons for our build to be successful and submitted to Apple for both App Store release and testing with TestFlight.

To add icons to your application, select Images.xcassets ➤ AppIcon folder from the project directory from Xcode (Figure 9-12).

The icons shown here represent the same icon for your application to be used at different places; in short, they represent your application icon in various sizes. We won’t get into a tutorial here about how to create these icons, because that’s a designer’s area of expertise. For our work, we can use some application—we suggest downloading Icon Set Creator for your Macintosh—to generate all sizes of icons for iOS devices (Figure 9-13). There are many online sites that can help you perform the same task.

Next drag and drop your icons into the AppIcon pane, as shown in Figure 9-14.

Once this is done, you will see all your icons automatically set up and you’re ready for the next step, which is setting up your launch screen.

Select LaunchScreen.xib to add or modify the launch screen for your application. In our sample application, we will keep the same default launch screen because it won’t break our build or stop us from uploading it. However, for a real-world application that is supposed to be published to the App Store, it is better to have a proper launch screen.

Next, let’s create our build, which is actually done using the Archive command. Before we create the build, please select Generic iOS Device as the target, as shown in Figure 9-15. The reason for changing this from a simulator to Generic iOS Device is that your Archive command will be disabled if you don’t make this change. On the XCode menu bar, select Product ➤ Archive and the build process will begin.

When successfully built, you’ll get the window shown in Figure 9-16 with a list of all your Archives. If this window does not appear for some reason, even after a successful build or by mistake you close it, you can reopen it. This is Xcode Organizer.

Click Distribute App and you will be presented with a few options. Select iOS App Store and after few steps your ipa will be ready to be uploaded to App Store Connect (Figure 9-17).

Before clicking Upload, you need to first create the application on the App Store Connect. Go to https://developer.apple.com/account and select the App Store Connect icon or visit https://appstoreconnect.apple.com/ . There you’ll find several options. Select My Apps, as shown in Figure 9-18.

Inside My Apps you will see all your iOS applications. Click the plus (+) button and select New App to create new App Store app for our React Native application (Figure 9-19).

Once selected, the form displayed in Figure 9-20 will appear.

Fill it out with the proper details for your application. You can select the appropriate Bundle ID from the drop-down list. A SKU has to be added, which can be different from the Bundle ID. This SKU is not visible to App Store users. For user access, if you have created any specific user group already you can select it. If not, select Full Access, especially if this is your first application.

Click Create and your empty app will be created on App Store Connect. Go back to Xcode and continue where we left off. Click Upload and shortly your application build will be uploaded on App Store Connect (Figure 9-21).

You can check your application build on App Store Connect in a few. From App Store Connect, you can submit your application to Apple for review. After a successful review of your application without issues and errors, your app will be live on the Apple App Store for users in two to five days.

Before you publish your application for end users, it must be thoroughly tested. This process is called beta testing and can be achieved using TestFlight.

Generating Android .apk(Android application package)

Just like Apple, Google expects all Android apps to be signed with a certificate before they get installed on a device either for testing or publishing in the Google Play Store.

When you execute this command, it will ask few questions and require a password to be set for your keys. Please remember the password because it will be used later when applying these settings for your React Native application.

Copy the my-release-key.keystore file in the android/app directory in your React Native application folder (Figure 9-22).

As mentioned earlier, provide the password you set when you were generating your keys.

This will generate the apk build that can you can find at android/app/build/outputs/apk/release/app-release.apk. This apk can be distributed to users and submitted to the Google Play Store.

Beta Testing with TestFlight

TestFlight is a utility that is included when you set up your Apple Developer Account. It allows you to invite users to test your application, provide you with feedback, and provide you with valuable test information like crashes, and so on.

Each build is active for 90 days and you can invite up to 25 internal testers (which does not require App Store review) and up to 10,000 external testers, which is only applicable after App Store review.

Let’s also set up our sample React Native application for TestFlight. The process is pretty simple. Inside App Store Connect, select your application and click the TestFlight tab (Figure 9-23).

You will see the recently uploaded build available. It will mention missing compliance. Under App Information, select Test Information from the menu pane. Click the Missing Compliance message again and click Start Internal Testing.

You can invite up to 25 users to participate in internal testing. To add users, return to the App Store Connect home screen and select Users and Access. From there, you can add your testing users and segregate them into groups if required.

Your testers would have to install the TestFlight application from the Apple App Store to access the build, which will be installed separately on your iOS device.

TestFlight is a good option, but it is limited to only iOS device testing. Besides TestFlight we would recommend TestFairy and HockeyApp as alternatives that can be used for both iOS and Android. Whereas TestFairy is a paid utility, HockeyApp is completely free (at the time of this writing).

Summary

In this chapter we finally reached the end of the development cycle for a mobile application, creating a build that can be tested by users and submitted to the Apple App Store or the Google Play Store. You learned about the signing process for both systems: Whereas Apple has specific steps in its signing process, the Google Android process is fairly quick. Both, though, are designed to keep the rights and devices of users from being misused. You also learned about beta testing with TestFlight and some other popular options.

Popular React Native Libraries

From the time of its inception the React Native ecosystem has grown by leaps and bounds. The React Native community is vibrant and exceptionally productive: With every passing week, something new is always coming up to untangle the complications of development. By the time you have reached this chapter and we have completed this book, a lot more must have happened (later in this chapter we share ways to stay updated with the community). However, this chapter provides a curated list of libraries organized based on categories to help you increase the velocity of your React Native development.

Where to Get Help

This section provides some suggestions on where to get help in the React Native community.

Stay Updated with React Native

You should also stay in tune with the latest happenings in React Native with the official documentation available at https://github.com/facebook/react-native-website . The official blog of React Native maintained at https://facebook.github.io/react-native/blog/ will keep you updated on what is new. You can also connect with the official React Native Twitter account, which keeps updated with both React Native and Reactjs. See https://twitter.com/reactjs .

Summary

Now we have reached the end of our book and our last summary. In this chapter we provided information about various React Native libraries that can expedite our development time and give access to the enormous treasure trove of features built over time by the React Native community. You also learned about how to stay updated on this fast-moving framework by getting information from the right sources.

Although you have learned a lot during the course of this book, to truly master this topic you have to keep practicing and creating apps. There is no better way to become an expert at a technology than learning on your own in a real-world scenario. You can contribute to the developer community by creating a module that still does not exist or by contributing to existing open source React Native repos. We are very excited about React Native, just like you, and look forward to seeing your work making a mark in the mobile development and React Native world.