Book Image

Getting Started with React Native

Book Image

Getting Started with React Native

Overview of this book

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.
Table of Contents (15 chapters)

Running the sample application


The source code contains the completed application that we will build throughout the book. We are going to start with running the application. The source code is already configured to run in the iOS simulator:

  1. Open the ReactNotes.xcodeproj in the ios/ folder in Xcode or from the command line:

    ReactNotes$ open ios/ReactNotes.xcodeproj/
    

    Tip

    Downloading the example code

    You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. 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.

  2. This book targets iPhone 6 for development; although it does work on other iOS versions, we recommend using this one. Make sure that the iPhone 6 is selected in the iOS simulator device drop-down menu. If you own an iPhone 6, you may select an iOS Device:

  3. Press the Run button (F5) to launch the iOS simulator:

A sneak peek at the sample application

The goal of this book is to introduce you to how quickly React Native can get you up and running to create user interfaces. No matter what type of mobile application you build, there are certain features that you're very likely to have. Your UI will probably have multiple screens, so you'll need the ability to navigate between them. In Chapter 3, Beginning with the Example Application we will start laying the foundation for navigation and the note screen:

Not long after you have seen a bare-bones application, you'll want to start making it look good. Let us dive deep into styles and layout in Chapter 4, Working with Styles and Layout, and carry those lessons throughout the rest of the book.

It's hard to imagine an application that doesn't have lists of data, and React Notes is no exception. We'll cover working with lists in Chapter 5, Displaying and Saving Data:

One of the capabilities that sets mobile applications apart from web applications is the ability to access GPS data. We present capturing geolocation data using maps in Chapter 6, Working with Geolocation and Maps:

It is very common to capture photos on mobile devices. The camera screen will allow users to attach photos to their notes and save them for viewing later. You will learn how to add camera support to your applications in Chapter 7, Using Native Modules:

Note

Note that the camera screen will be black in the iOS simulator. This is also explained later in Chapter 7, Using Native Modules.