LitArk » Books » Home and family

Emilio Rodriguez Martinez [Emilio Rodriguez Martinez] - React: Cross-Platform Application Development with React Native

Here you can read online Emilio Rodriguez Martinez [Emilio Rodriguez Martinez] - React: Cross-Platform Application Development with React Native full text of the book (entire story) in english for free. Download pdf and epub, get meaning, cover and reviews about this ebook. year: 2018, publisher: Packt Publishing, genre: Home and family. Description of the work, (preface) as well as reviews are available. Best literature library LitArk.com created for fans of good reading and offers a wide selection of genres:

Romance novel Science fiction Adventure Detective Science History Home and family Prose Art Politics Computer Non-fiction Religion Business Children Humor

Choose a favorite category and find really read worthwhile books. Enjoy immersion in the world of imagination, feel the emotions of the characters or learn something new for yourself, make an fascinating discovery.

Book:
React: Cross-Platform Application Development with React Native
Author:
Emilio Rodriguez Martinez Emilio Rodriguez Martinez
Publisher:
Packt Publishing
Genre:
Books / Home and family
Year:
2018
Rating:
5 / 5
Favourites:
Add to favourites
Your mark:
- 100
- 1
- 2
- 3
- 4
- 5

Description
Author's other books
Similar books

React: Cross-Platform Application Development with React Native: summary, description and annotation

We offer to read an annotation, description, summary or preface (depends on what the author of the book "React: Cross-Platform Application Development with React Native" wrote himself). If you haven't found the necessary information about the book — write in the comments, we will try to find it.

Harness the power of React Native to build 4 real-world apps

About 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 course

Who This Book Is For

This 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 Native

In Detail

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.

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 Natives 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 approach

This 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

Downloading the example code for this book You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Emilio Rodriguez Martinez [Emilio Rodriguez Martinez]: author's other books

Who wrote React: Cross-Platform Application Development with React Native? Find out the surname, the name of the author of the book and a list of all author's works by series.

React: Cross-Platform Application Development with React Native — read online for free the complete book (whole text) full work

Below is the text of the book, divided by pages. System saving the place of the last page read, allows you to conveniently read the book "React: Cross-Platform Application Development with React Native" online for free, without having to search again every time where you left off. Put a bookmark, and you can go to the page where you finished reading at any time.

Light

Font size:

↓

↑

Reset

Interval:

↓

↑

Bookmark:

Make

Appendix 5. Assessment Answers

Lesson 1: Project 1 Car Booking App

Question Number	Answer




	`shadowColor`: This adds the hexadecimal or RGBA value of the color we want for our component `shadowOffset`: This shows how far we want our shadow to be casted `shadowRadius`: This shows the value of the radius in the corner of our shadow `shadowOpacity`: This shows how dark we want our shadow to be

Lesson 2: Project 2 Image Sharing App

Question Number	Answer


	True

	`onPress`: What the component needs to do when the Send button is pressed `busy`: This means "Are we waiting for remote data?" `loginError/registrationError`: Description of the error that happened when logging/register (in case it happened)

Lesson 3: Project 3 Messaging App

Question Number	Answer


	True

	`tick()`: To calculate the next position of the sprites on the screen `bounce()`: To make the parrot fly up `start()`: To initialize the game variables

Lesson 4: Project 4 Game

Question Number	Answer

	True
	True
	`mapStateToProps()`: This gets the data for all the sprites in the store and injects them into the component as props. The sprites will be stored in an array and therefore they will be accessed by an index. On top of these, the Score, a flag noting if the current game is over and a flag noting if the game is in progress, will also be retrieved from the state and injected into the component. `mapStateActionsToProps()`: This will inject the three available actions (`tick`, `bounce`, and `start`) into the component so they can be used by it.

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 - photo 1

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 - photo 2

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 - photo 3

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 wont be connected to any external API it should be seen as a - photo 4

Since our app won't be connected to any external API, it should be seen as a mere display of the visual capabilities of React Native, although it could be easily extended by adding a state management library and a matching API.

Let's take a look at the topics of this lesson:

Light

Font size:

↓

↑

Reset

Interval:

↓

↑

Bookmark:

Make

Similar books «React: Cross-Platform Application Development with React Native»

Look at similar books to React: Cross-Platform Application Development with React Native. We have selected literature similar in name and meaning in the hope of providing readers with more options to find new, interesting, not yet read works.

Richard Kho

React Native By Example

Alin Gheorghe

Lightning-Fast Mobile App Development with Galio: Build stylish cross-platform mobile apps with Galio and React Native

Adrian Leung

Rapid Application Development with AWS Amplify: Build cloud-native mobile and web apps from scratch through continuous delivery and test automation

Nalwaya Abhishek

React native for iOS development: harness the power of React and JavaScript to build stunning iOS applications

Bonnie Eisenman

Learning React Native

Eisenman

Learning React Native: Building Native Mobile Apps with JavaScript

Adam Boduch

React and React Native: A complete hands-on guide to modern web and mobile development with React.js, 3rd Edition

Mateusz Grzesiukiewicz [Mateusz Grzesiukiewicz]

Hands-On Design Patterns with React Native

Adam Boduch [Adam Boduch]

React and React Native - Second Edition

Bonnie Eisenman

Learning React Native: Building Native Mobile Apps with JavaScript

Adam Boduch

React and React Native

Masiello E.

Mastering React Native

Reviews about «React: Cross-Platform Application Development with React Native»

Discussion, reviews of the book React: Cross-Platform Application Development with React Native and just readers' own opinions. Leave your comments, write what you think about the work, its meaning or the main characters. Specify what exactly you liked and what you didn't like, and why you think so.