Home Mobile Getting Started with React Native

Getting Started with React Native

By Ethan Holmes , Tom Bray
books-svg-icon Book
eBook $25.99 $17.99
Print $32.99
Subscription $15.99 $10 p/m for three months
$10 p/m for first 3 months. $15.99 p/m after that. Cancel Anytime!
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook + Subscription?
Download this book in EPUB and PDF formats, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
BUY NOW $10 p/m for first 3 months. $15.99 p/m after that. Cancel Anytime!
eBook $25.99 $17.99
Print $32.99
Subscription $15.99 $10 p/m for three months
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook + Subscription?
Download this book in EPUB and PDF formats, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
About 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.
Publication date:
December 2015
Publisher
Packt
Pages
172
ISBN
9781785885181

 

Chapter 1. Exploring the Sample Application

React Native is beginning to change the game in the mobile development world. Using the skills you already have, as a web developer, you can get a set of familiar methods to build user interfaces for mobile devices. In this book, we'll walk you through many React Natives features while developing a note-taking application, which we call React Notes. While building the essential features, such as creating notes, saving notes to the device, viewing a list of saved notes, and navigating between screens, you'll learn the fundamental skills you need to develop an app of your own. You'll also have the opportunity to go beyond the basics by adding the ability to store images and geolocation data with notes. Functionality is only a part of what makes a great app — it has to be great looking as well, so we've made sure to equip you with a thorough understanding of layout and styles. By the end of the book, you will have developed a fully featured application from start to finish and have all the skills you need to share your React Native applications with the world!

In this chapter, we'll introduce you to React Notes, the sample application that you'll learn how to build. We'll even point you in the right direction if you're anxious to start tinkering with the sample app to see what happens.

This chapter will focus on the following:

  • Installing Xcode on Mac OS X

  • Running the sample application in the iOS simulator

  • Taking a look at the sample application features

  • Modifying the sample application

 

Installing Xcode


Getting the tools to run the sample application is simple in OS X. The easiest way to install Xcode is through the App Store. In the top right-hand bar, search for the term Xcode, and from the list of results navigate to the Xcode store page, as shown in the following screenshot:

Install or update to the latest version of Xcode by clicking on the button.

Note

You will need to register for an Apple ID in order to download Xcode from the App Store.

You also require the command-line tools (CLT) for Xcode. A prompt will display when they need to be installed. You can also download the command-line tools directly from the Downloads for Apple developers at https://developer.apple.com/downloads/.

 

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.

 

Experimenting with the sample application


If you are the adventurous type, then feel free to start playing around and modifying the sample application code. There are two steps to switch the iOS application into development mode:

  1. Open the AppDelegate.m file in Xcode and uncomment the jsCodeLocation assignment from OPTION 1 and comment out the statement in OPTION 2:

    NSURL *jsCodeLocation;
    
    /**
    * Loading JavaScript code - uncomment the one you want.
    *
    * OPTION 1
    * Load from development server. Start the server from the repository root:
    *
    * $ npm start
    *
    * To run on device, change `localhost` to the IP address of your computer
    * (you can get this by typing `ifconfig` into the terminal and selecting the
    * `inet` value under `en0:`) and make sure your computer and iOS device are
    * on the same Wi-Fi network.
    */
    
    jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
    
    /**
    * OPTION 2
    * Load from pre-bundled file on disk. To re-generate the static bundle
    * from the root of your project directory, run
    *
    * $ react-native bundle --minify
    *
    * see http://facebook.github.io/react-native/docs/runningondevice.html
    */
    
    //jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
  2. Then, navigate to Product | Scheme | Edit Scheme…. Select Run, and under the Info tab change Build Configuration from Release to Debug, as shown:

  3. Run (F5) from Xcode to start the application in development mode. Using the Shake gesture from the iOS simulator (Hardware | Shake |Gesture) will show the development menu. It may be necessary to run react-native start from the command line to load the JavaScript bundle.

That's it! From here you can freely modify any of the source code in index.ios.js or in the Components folder. Later we will explain how to quickly reload your code in the simulator without having to recompile from Xcode.

 

Summary


This chapter gave us a brief overview of the type of functionality and user interface we will introduce throughout the rest of the book. We will cover features such as navigation, lists, user inputs, and so on in depth. With Xcode already set up, you will be able to jump right in to iOS development, and for Android developers we begin the setup in Chapter 3, Beginning with the Example Application. Next, we will demonstrate the value that React Native offers in rapid mobile development using the skills you have learned as a web developer.

Let's get started!

Latest Reviews (6 reviews total)
Rapid, easy, the book is directly added to your library.
Getting Started with React Native
Unlock this book and the full library FREE for 7 days
Start now