React: Cross-Platform Application Development with React Native

Emilio Rodriguez Martinez

• Publisher: Packt Publishing
• Year: 2018
• eBook ISBN: 9781789139600
• Edition: 1
• Topic: Computer Science
• Subtopic: Open Source Programming
• Index: Computer Science

Harness the power of React Native to build 4 real-world appsAbout This Book• Build quirky and fun projects from scratch and become efficient with React Native• Learn to build professional Android and iOS applications using your existing JavaScript knowledge• Use isomorphic principles to build mobile apps that offer a native user experience• Embedded with assessments that will help you revise the concepts you have learned in this courseWho This Book Is ForThis book is for developers who want to build amazing cross-platform apps with React Native.What You Will Learn• Structure React Native projects to ease maintenance and extensibility• Optimize a project to speed up development• Use external modules to speed up the development and maintenance of your projects• Explore the different UI and code patterns to be used for iOS and Android• Get to know the best practices when building apps in React NativeIn DetailReact Native helps web and mobile developers to build cross-platform apps that perform at the same level as any other natively developed app. The range of apps that can be built using this library is huge. From e-commerce to games, React Native is a good fit for any mobile project due to its flexibility and extendable nature. This project-based book consists of four standalone projects. Each project will help you gain a sound understanding of the framework and build mobile apps with native user experience. Starting with a simple standalone car booking app, you will progressively move on to building advanced apps by adding connectivity with external APIs, using native features, such as the camera or microphone, in the mobile device, integrating with state management libraries such as Redux or MobX, or leveraging React Native's performance by building a full-featured game.This book is ideal for developers who want to build amazing cross-platform apps with React Native.This book is embedded with useful assessments that will help you revise the concepts you have learned in this book.Style and approachThis project-based book consists of four projects. Each project is a standalone project that covers the core techniques and concepts of React Native.Note: This book is a blend of text and quizzes, all packaged up keeping your journey in mind. It includes content from the following Packt products: • React Native Blueprints by Emilio Rodriguez Martinez

React: Cross-Platform Application Development with React Native

---

Emilio Rodriguez Martinez

React: Cross-Platform Application Development with React Native

Copyright © 2018 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: March 2018

Production reference: 1070318

Published by Packt Publishing Ltd.

Livery Place, 35 Livery Street

Birmingham B3 2PB, UK.

ISBN: 978-1-78913-608-1

www.packtpub.com

Credits

This book is a blend of text and quizzes, all packaged up keeping your journey in mind. It includes content from the following Packt product:

React Native Blueprints by Emilio Rodriguez Martinez

Meet Your Expert

We have the best work of the following esteemed author to ensure that your learning journey is smooth:

Emilio Rodriguez Martinez is a senior software engineer who has been working on highly demanding JavaScript projects since 2010. He transitioned from web development positions into mobile development, first with hybrid technologies such as Cordova and then with native JavaScript solutions such as Titanium. In 2015, he focused on the development and maintenance of several apps built in React Native, some of which were featured in Apple's App Store as the top apps of the week. Nowadays, Emilio is part of the Red Hat mobile team, which leverages Red Hat's open source mobile platform. He serves as an advocate for mobile developers using RHMAP. He is also an active contributor to React Native's codebase and Stack Overflow, where he provides advice on React and React Native questions.

Preface

React Native helps web and mobile developers to build cross-platform apps that perform at the same level as any other natively developed app. The range of apps that can be built using this library is huge. From e-commerce to games, React Native is a good fit for any mobile project due to its flexibility and extendable nature. There's no doubt React Native is not only a good alternative to native development, but also a great way to introduce web developers to a mobile project.

What's in It for Me?

Maps are vital for your journey, especially when you're holidaying in another continent. When it comes to learning, a roadmap helps you in giving a definitive path for progressing towards the goal. So, here you're presented with a roadmap before you begin your journey.

This book is meticulously designed and developed in order to empower you with all the right and relevant information on React Native. We've created this Learning Path for you that consists of four lessons:

Lesson 1, Project 1 – Car Booking App, explains how some of the most popular car-sharing apps can be developed using React Native.

Lesson 2, Project 2 – Image Sharing App, teaches you the fundamentals of how a social network based on image sharing can be created with React Native.

Lesson 3, Project 3 – Messaging App, shows you how to build a full-featured messaging app including push notifications and cloud-based storage.

Lesson 4, Project 4 – Game, shows you the fundamentals of how a 2D game can be developed using React Native.

What Will I Get from This Book ?

• Structure React Native projects to ease maintenance and extensibility
• Optimize a project to speed up development
• Use external modules to speed up the development and maintenance of your projects
• Explore the different UI and code patterns to be used for iOS and Android
• Know the best practices when building apps in React Native

Prerequisites

This book is for developers who want to build amazing cross-platform apps with React Native. Some of the prerequisites that is required before you begin this book are:

• Basic knowledge of HTML, CSS, and JavaScript is needed
• Prior working knowledge of React is assumed

Chapter 1. Project 1 – Car Booking App

Considering the success of the React framework, Facebook recently introduced a new mobile development framework called React Native. With React Native's game-changing approach to hybrid mobile development, you can build native mobile applications that are much more powerful, interactive, and faster by using JavaScript.

In this lesson, we will set the focus on feature development rather than in building a user interface by delegating the styling of our applications to UI libraries such as native-base as well as spend more time in building custom UI components and screens.

The app we will build is a car booking app in which the user can select the location in which he/she wants to be picked up and the type of car she wants to book for the ride. Since we want to focus on the user interface, our app will only have two screens and a little state management is needed. Instead, we will dive deeper into aspects such as animations, component's layout, using custom fonts, or displaying external images.

The app will be available for iOS and Android devices, and since all the user interface will be custom made, 100% of the code will be reused between both platforms. We will only use two external libraries:

• React-native-geocoder: This will translate coordinates into human-readable locations
• React-native-maps: This will easily display the maps and the markers showing the locations for the bookable cars

Due to its nature, most of the car booking apps put their complexity in the backend code to connect drivers with riders effectively. We will skip this complexity and mock all that functionality in the app itself to focus on building beautiful and usable interfaces.

Overview

When building mobile apps, we need to make sure we reduce the interface complexity to the minimum, as it's often punishing to present the user intrusive manuals or tooltips once the app is open. It is a good practice to make our app self-explanatory, so the user can understand the usage just by going through the app screens. That's why using standard components such as drawer menus or standard lists is always a good idea, but is not always possible (as it happens in our current app) due to the kind of data we want to present to the user.

In our case, we put all the functionality in the main screen plus in a modal box. Let's take a look at what the app will look like on iOS devices:

The background on our main screen is the maps component itself where we will show all the available cars as markers in the map. On the maps, we will display three components:

• The pickup location box displaying the selected pickup location
• The location pin, which can be dragged around the maps to select a new location
• The selector for the kind of car the user wants to book. We will display three options: ECONOMY, SPECIAL, and SUPERIOR

Since most of the components are custom built, this screen will look very similar in any Android device:

The main difference between the iOS and the Android version will be the map component. While iOS will use Apple maps by default, Android uses Google Maps. We will leave this setup as each platform has its own map component optimized, but it's good to know that we can switch the iOS version to use Google Maps just by configuring our component.

Once the user has selected a pickup location, we will display a modal box to confirm the booking and contact the nearest driver for pickup:

As it happened with the main screen, this screen uses custom components: we even decided to create our own animated activity indicator. Because of this, the Android version will look very similar:

Since our app won't be connected to any external API, it should be seen as a mere...

Table of contents

• React: Cross-Platform Application Development with React Native