Getting Started with React Native

Ethan Holmes, Tom Bray

• Publisher: Packt Publishing
• Year: 2015
• ISBN:
  9781785885181
• Edition: 1
• Topic: Informatique
• Subtopic: Programmation en JavaScript

Learn to build modern native iOS and Android applications using JavaScript and the incredible power of React

About This Book

• Learn to design and build a fully-featured application using the newest cutting-edge framework from Facebook
• Leverage your JavaScript skills to become a native app developer
• Develop custom UI components, implement smooth navigation, and access native features such as geolocation and local storage

Who This Book Is For

This book is for web developers who want to learn to build fast, good-looking, native mobile applications using the skills they already have. If you already have some JavaScript knowledge or are using React on the web, then you will be able to quickly get up and running with React Native for iOS and Android.

What You Will Learn

• Set up the React Native environment on both devices and emulators
• Gain an in-depth understanding of how React Native works behind the scenes
• Write your own custom native UI components
• Learn the ins and outs of screen navigation
• Master the art of layout and styles
• Work with device-exclusive data such as geolocation
• Develop native modules in Objective-C and Java that interact with JavaScript
• Test and deploy your application for a production-ready environment

In Detail

React Native is a game-changing approach to hybrid mobile development. Web developers can leverage their existing skills to write mobile applications in JavaScript that are truly native without using cross-compilation or web views. These applications have all of the advantages of those written in Objective-C or Java, combined with the rapid development cycle that JavaScript developers are accustomed to.

Web developers who want to develop native mobile applications face a high barrier to entry, because they are forced to learn platform-specific languages and frameworks. Numerous hybrid technologies have tried to simplify this process, but have failed to achieve the performance and appearance that users expect.

This book will show you all the advantages of true native development that React Native has without the steep learning curve, leveraging the knowledge you already have. We do this by getting you up and running quickly with a sample application. Next, we'll introduce you to the fundamentals of creating components and explain how React Native works under the hood. Once you have established a solid foundation, you will dive headfirst into developing a real-world application from start to finish. Along the way, we will demonstrate how to create multiple screens and navigate between them, use layout and style native UI components, and access native APIs such as local storage and geolocation. Finally, we tackle the advanced topic of Native modules, which demonstrates that there are truly no limits to what you can do with React Native.

Style and approach

This book provides a simple and easy way to build mobile applications in JavaScript. Each topic takes you through the life cycle of creating a fully-functional native app, with detailed explanations of the entire process.

Getting Started with React Native

---

Table of Contents

Getting Started with React Native

Credits

About the Authors

About the Reviewer

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Exploring the Sample Application

Installing Xcode

Running the sample application

A sneak peek at the sample application

Experimenting with the sample application

Summary

2. Understanding React Native Fundamentals

The Virtual DOM

Components

Creating your first component

JSX

Back to our first component

Props and states

Props

Validating props

State

Summary

3. Beginning with the Example Application

Generating the projects

Xcode and the iOS simulator

The Android SDK and emulator

Modifying the React Native starter template

Structuring the application

Creating the SimpleButton component

Navigation

The Navigator component

Navigator.NavigationBar

The NoteScreen – first pass

Summary

4. Working with Styles and Layout

React CSS

Style Sheet

Styling the SimpleButton component

Layout and Flexbox

Flex container

Flex items

Horizontal and vertical centering

Absolute positioning

Styling the NavigationBar component

Changing the Android Material Theme

Styling the NoteScreen

Summary

5. Displaying and Saving Data

Lists

Understanding props

Using state

Passing callbacks in props

Creating new notes

Using AsyncStorage

Deleting notes

Summary

6. Working with Geolocation and Maps

Introducing the Geolocation API

The location permission in iOS

Tagging notes with geolocation

NoteLocationScreen

MapView

Summary

7. Integrating Native Modules

Adding images to notes

Installing react-native-camera on iOS

Searching for Native Modules

Using the camera component

Viewing images

The image component

Deleting images

Connecting the final pieces

Summary

8. Releasing the Application

Generating the static bundle in iOS

Testing the static bundle in iOS

Creating an iOS release in Xcode

Generating the Android APK

Summary

Index

Getting Started with React Native

Copyright © 2015 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 authors, 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: December 2015

Production reference: 1101215

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78588-518-1

www.packtpub.com

Credits

Authors

Ethan Holmes

Tom Bray

Reviewer

Soliury

Content Manager

Wilson Dsouza

Acquisition Editor

Aaron Lazar

Content Development Editor

Divij Kotian

Technical Editor

Naveenkumar Jain

Copy Editor

Sneha Singh

Project Coordinator

Nikhil Nair

Proofreader

Safis Editing

Indexer

Hemangini Bari

Graphics

Kirk D'Penha

Production Coordinator

Shantanu N. Zagade

Cover Work

Shantanu N. Zagade

About the Authors

Ethan Holmes is a Software Engineer from Vancouver, BC, Canada. He obtained a B.Sc. in computer science from Simon Fraser University. He has primarily been a full-stack web developer working and creating applications for start-ups in the Silicon Beach area. Currently, he is stationed at Cargomatic, disrupting the freight industry. After learning React for the web, learning React Native complemented the skills he obtained as a web developer and allowed him to quickly make the transition to mobile development.

You can follow him on Twitter at @sherclockholmes.

I'd like to thank Tom for being such a great ol' chap and for giving me the opportunity to work on this book with him. Big thanks to the friends and colleagues I have met throughout my many years of software development. Shout out to my Bengal cat, Whiskey!

Tom Bray has been developing for the web since the browser wars of the late 90s when DHTML was the buzzword of the day. Creating great user experiences using the cutting edge technologies of the day has always been his passion, from Flash to Flex to Adobe AIR to React, and React Native.

He has created sophisticated software that has been used by large companies, such as Adobe, MySpace, Cisco, Informatica, and Dell; it has been a key contributor to numerous start-ups where he has worn many hats and gained a broad skill set. He currently serves as the Principal Software Architect with Cargomatic where he has designed a system to orchestrate the movement of ocean freight to and from America's ports—a solution that leveraged React Native to assign work to truck drivers and track their progress.

You can follow him on Twitter at @tombray.

I would like to dedicate this book to my wonderful wife, Amy, and my amazing son, Tyler. They have put up with me working late at night and on weekends, and I couldn't have written this book without their love and support. They bring me great joy and I'm so grateful to have them in my life.

I also want to thank my co-author, Ethan Holmes, who is a fantastic developer, a great writer, a...