Home Mobile React Native Cookbook - Second Edition

React Native Cookbook - Second Edition

By Daniel Ward
books-svg-icon Book
eBook $30.99 $20.99
Print $38.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 $30.99 $20.99
Print $38.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
  1. Free Chapter
    Setting Up Your Environment
About this book
If you are a developer looking to create mobile applications with maximized code reusability and minimized cost, React Native is what you need. With this practical guide, you’ll be able to build attractive UIs, tackle common problems in mobile development, and achieve improved performance in mobile environments. This book starts by covering the common techniques for React Native customization and helps you set up your development platforms. Over the course of the book, you’ll work through a wide variety of recipes that help you create, style, and animate your apps with built-in React Native and custom third-party components. You’ll also develop real-world browser-based authentication, build a fully functional audio player, and integrate Google Maps in your apps. This book will help you explore different strategies for working with data, including leveraging the popular Redux library and optimizing your app’s dataflow. You’ll also learn how to write native device functionality for new and existing React Native projects and how app deployment works. By the end of this book, you'll be equipped with tips and tricks to write efficient code and have the skills to build full iOS and Android applications using React Native.
Publication date:
January 2019
Publisher
Packt
Pages
592
ISBN
9781788991926

 

Setting Up Your Environment

The React Native ecosystem has evolved quite a bit since the first edition. The open source tool Expo.io, in particular, has streamlined both the project initialization and development phases, making working in React Native even more of a pleasure than it already was in version 0.36.

With the Expo workflow, you'll be able to build native iOS and Android applications using only JavaScript, work in the iOS simulator and Android emulator with live reload, and effortlessly test your app on any real-world device via Expo's app. Until you need access to native code (say, to integrate with legacy native code from a separate code base), you can develop your application entirely in JavaScript without ever needing to use Xcode or Android Studio. If your project ever evolves into an app that must support native code, Expo provides the ability to eject your project, which changes your app into native code for use in Xcode and Android Studio. For more information on ejecting your Expo project, please see Chapter 10, App Workflow and Third-Party Plugins.

Expo is an awesome way to build fully featured apps for Android and iOS devices, without ever having to deal with native code. Let's get started!

We will cover the following topics in this chapter:

  • Installing dependencies
  • Initializing your first application
  • Running your application in a simulator/emulator
  • Running your application on a real device

 

Technical requirements

This chapter will cover installing the tools you'll be using throughout this book. They include:

  • Expo
  • Xcode (for iOS simulator, macOS only)
  • Android Studio
  • Node.js
  • Watchman
 

Installing dependencies

The first step toward building our first React Native application is installing the dependencies in order to get started.

Installing Xcode

As mentioned in the introduction of this chapter, Expo provides us with a workflow in which we can avoid working in Xcode and Android Studio altogether, so we can develop solely in JavaScript. However, in order to run your app in the iOS simulator, you will need to have Xcode installed.


Xcode requires macOS, and therefore running your React Native application in an iOS simulator is only possible on macOS.

Xcode should be downloaded from the App Store. You can search the App Store for Xcode, or use the following link:
https://itunes.apple.com/app/xcode/id497799835.

Xcode is a sizable download, so expect this part to take a little while. Once you have installed Xcode via the App Store, you can run it via the Applications folder in the Finder:

  1. This is the first screen you will see when launching Xcode. Note, if this is the first time you've installed Xcode, you will not see recent projects listed down the right-hand side:
  1. From the menu bar, choose Xcode | Preferences... as follows:
  1. Click the Components tab, and install a simulator from the list of provided simulators:
  1. Once installed, you can open the simulator from the menu bar: Xcode | Open Developer Tool | Simulator:
 

Installing Android Studio

Android Studio comes with the official Android emulator, which is the emulator that Expo recommends for use during development.

How to do it...

  1. Download Android Studio from https://developer.android.com/studio/.
  2. Open the downloaded file and drag the Android Studio.app icon to the Applications folder icon:
  1. Once installed, we'll need to change the Android Studio preferences. Open Android Studio, and then open Preferences from the Android Studio menu in the system bar. In the Preferences submenus, select Appearance & Behavior | System Settings | Android SDK. Under the SDK Tools tab, ensure that you have some version of Android SDK Build-Tools installed, and install it if isn't installed already.
  2. We'll also need to add the Android SDK location to the system PATH by editing ~/.bash_profile or ~/.bashrc. You can do this by adding the following line:
export PATH=$PATH:/Users/MY_USER_NAME/Library/Android/sdk

Be sure to replace MY_USER_NAME with your system username.

  1. On macOS, you will also need to add platform-tools to your PATH in ~/.bash_profile or ~/.bashrc. You can do this by adding the following line:

PATH=$PATH:/Users/MY_USER_NAME/Library/Android/platform-tools

Be sure to replace MY_USER_NAME with your system username.

If you've never edited a .bash_profile or .bashrc file before, or aren't familiar with PATH, you can get more information on what purpose they serve and how to work with them from the following resources:
  1. If the PATH was correctly updated, the adb command should work in the Terminal. You may have to restart your Terminal for the changes to take effect.
  1. On a fresh install of Android Studio, you'll see a welcome screen. Start a new app to fully open the software. Then, select the AVD Manager from the buttons in the top -right corner of the window, as indicated in the following steps:
  1. Press Create Virtual Device in the opened modal.
  2. Select a device in the Select Hardware screen, and then press Next:
  1. Download one of the system images under the Recommended tab of the System Image screen:
  1. Press Finish on the final screen and Android Studio will create your new virtual device. The device can be run at any time by pressing the play button in the row of buttons in the top-right corner:

To run your app on an Android emulator during development, Expo used to recommend using the excellent third-party emulator Genymotion. As of Expo version 29, however, they now recommend using the official emulator that ships with Android Studio.

You can follow the step-by-step guide provided in the official Expo documentation to ensure that Android Studio is set up to work properly with your Expo development workflow. The guide can be found at https://docs.expo.io/versions/latest/workflow/android-studio-emulator.

This is all the setup you need to get started developing your first React Native app using Expo! There are, however, a few extra steps you'll need to perform for working with pure React Native applications (non-Expo applications). Pure React Native app development will be covered in depth in Chapter 10, App Workflow and Third-Party Plugins. Since this setup process is a little more involved and subject to change, I recommend referring to the official guide. You can find these instructions in the React Native: Getting Started guide, located at https://facebook.github.io/react-native/docs/getting-started.html under the Building Projects with Native Code tab section.

Once Simulator is open, select your desired iOS device via the menu bar: Hardware | Device | [IOS Version] | [ iOS Device ]. When running Expo applications in Simulator in the future, the same device should be used automatically.

The app can be started with the Expo CLI in your Terminal if you run the following command:

 expo start

The command will build your app and open the Expo Developer Tools in your web browser. In the Expo Developer Tools, select Run on iOS Simulator.

 

There's more...

Once you have launched an app in the simulator, you'll be able to press the Run on iOS Simulator button without opening Simulator from Xcode. It should also remember your device choice. Opening Simulator from Xcode provides an easy way to choose your preferred iOS device to simulate.

If you followed the steps in the Expo guide, which can be found in the Installing Android Studio section, you would have also seen that it covered installing a virtual device that we can run as our emulator. To start your app on the emulator, just open the Android Virtual Device you installed in Android Studio, run the expo start command in your Terminal, and select Run on Android device/emulator.

Installing Node.js

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine, and is designed to build scalable network applications. Node allows JavaScript to be executed in a Terminal, and is an indispensable tool for any web developer. For more information on what Node.js is, you can read the project's About Node.js page at https://nodejs.org/en/about/.

According to the Expo installation documentation, Node.js is not technically required, but as soon as you start actually building something, you'll want to have it. Node.js itself is outside the scope of this book, but you can check out the Further reading section at the end of this chapter for more resources on working with Node.js.

There are numerous methods to install Node.js, and it is therefore difficult to recommend a particular installation method. On macOS, you can install Node.js in one of the following ways:

Installing Expo

The Expo project used to have a GUI-based development environment called the Expo XDE, which has been replaced with a browser-based GUI called the Expo Developer Tools. Since the Expo XDE has been deprecated, creating new Expo apps is now always done using the Expo CLI. This can be installed using npm (Node Package Manager, which comes as part of Node.js) via the Terminal with the following command:

 npm install expo-cli -g

We'll be using Expo quite a bit throughout this book to create and build out React Native applications, particularly those apps that do not need access to native iOS or Android code. Applications built with Expo have some very nice advantages for development, helping obfuscate native code, streamlining app publishing and push notifications, and providing a lot of useful functionality built into the Expo SDK. For more information on how Expo works, and how it fits into the bigger picture of React Native development, see Chapter 10, App Workflow and Third-Party Plugins.

Installing Watchman

Watchman is a tool used internally by React Native. Its purpose is to watch files for updates, and trigger responses (such as live reloading) when changes occur. The Expo documentation recommends installing Watchman, since it has been reported that some macOS users have run into issues without it. The recommended method for installing Watchman is via Homebrew. The missing package manager for macOS, Homebrew allows you to install a wide array of useful programs straight from your Terminal. It's an indispensable tool that should be in every developer's tool bag:

  1. If you don't have Homebrew installed already, run the following command in the Terminal to install it (you can read more about it and view the official documentation at https://brew.sh/):
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  1. Once Homebrew has been installed, run the following two commands in Terminal to install watchman:
brew update
brew install watchman
 

Initializing your first app

This is all the setup you need in order to get started developing your first React Native app using Expo! There are however a few extra steps you'll need to perform for working with pure React Native apps (non-Expo apps). Pure React Native app development will be covered in depth in Chapter 10, App Workflow and Third-Party Plugins. Since this setup process is a little more involved and subject to change, I recommend referring to the official guide. You can find these instructions in the React Native | Getting Started guide located at
https://facebook.github.io/react-native/docs/getting-started.html under the Building Projects with Native Code tab. From here on out, we can use the magic provided by Expo to easily create new apps for development.

We'll create our first app using Expo via the Expo CLI. Making a new application is as simple as running the following:

expo init project-name

Running this command will first prompt you which type of app you'd like to create: either a blank app, which has no functionality added, or a tabs app, which will create a new app with minimal tab navigation. For the recipes in this book, we'll be using the blank app option.

Once you've selected your preferred application type, a new, empty Expo-powered React Native app in a new project-name directory is created, along with all of the dependencies needed to start developing right away. All you need to do is begin editing the App.js file in the new project directory to get to work.

To run our new app, we can cd into the directory, then use the expo start command. This will automatically build and serve the app, and open a new browser window with the Expo Developer Tools for your in-development React Native app.

For a list of all of the available commands for the Expo CLI, check out the documentation at https://docs.expo.io/versions/latest/guides/expo-cli.html.

With our first application created, let's move on to running the application in an iOS simulator and/or Android emulator.

 

Running your app in a simulator/emulator

You have created a new project, and started running that project with Expo in the last step. Once we start making changes to our React Native code, wouldn't it be nice to see the results of those changes? Thanks to Expo, running your project in the installed iOS simulator or Android emulator has also been streamlined.

Running your app on an iOS simulator

Running your app in the Xcode simulator only takes a few clicks.

  1. Open Xcode.
  2. Open the Simulator from the menu bar: Xcode | Open Developer Tool | Simulator:
  1. The app can be started with the Expo CLI in your Terminal if you run the following command:
expo start

The command will build your app and open the Expo Developer Tools in your web browser. In the Expo Developer Tools, select Run on iOS Simulator.

  1. The first time you run a React Native app on the iOS simulator via Run on iOS Simulator, the Expo app will be installed on the simulator, and your app will automatically be opened within the Expo app. The simulated iOS will ask if you want to Open in "Expo"?. Choose Open:
  1. Upon loading, you will see the Expo Developer menu. You can toggle between this menu and your React Native app by pressing command key + D on your keyboard:

There's more...

Once you have launched an app in the simulator, you'll be able to press the Run on iOS Simulator button without opening Simulator from Xcode. It should also remember your device choice. Opening Simulator from Xcode provides an easy way to choose your preferred iOS device to simulate.

You can toggle between your React Native app and the Expo Developer menu, a list of helpful features for development, by pressing command key + M on your keyboard. The Expo Developer menu should look something like this:

 

Running your app on a real device

Running your development app on a real device as easy as running your app on a simulator. With the clever combination of the native Expo app and a QR code, running on a real device is only a few clicks and taps away!

Running your app on an iPhone or Android

You can get the in-development app running on your phone in three simple steps:

  1. Open the App Store on your iPhone, or the Google Play Store on your Android device.
  2. Search for and download the Expo Client app.
  3. While your app is running on your development machine, you should also have the Expo Developer Tools open in a browser. You should see a QR code at the bottom of the left-hand side menu of the Expo Developer Tools. Use the iPhone's native Camera app, or the Scan QR Code button in the Expo Client app on Android, to scan the QR code. This will open your in-development app on the device within the Expo Client app.

Your React Native app should now be running on your real device, fully equipped with live reload! You can also shake the device to toggle between your React Native app and the Expo Developer menu.

 

Summary

In this chapter, we've gone through all the steps required for getting started with developing React Native apps, including initializing a new project, emulating running your new project on your computer, and running your development app on real-world devices. Thanks to the power of Expo, it's easier to jump in and start working than ever before.

Now that you've got everything set up, it's time to start building!

 

Further reading

Here's a list of other resources covering similar topics:

About the Author
  • Daniel Ward

    Dan Ward is a full-stack developer and web technology consultant who has a number of years of experience working on mobile applications with React Native, and developing web applications with React, Vue, and Angular. He's also a co-founder at gitconnected, and co-editor at the associated Medium publication. His professional interests include React Native development, modern web development, and technical writing. He also has a BA in English Literature from Florida State University.

    Browse publications by this author
Latest Reviews (4 reviews total)
good quality affordable ebooks
I think I will use the same company for checkout that Packt uses. I like them.
Good written book. Learn new things from the book.
React Native Cookbook - Second Edition
Unlock this book and the full library FREE for 7 days
Start now