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